Собственнику завода не нужно разбираться в CSS. Но когда вы принимаете сайт у подрядчика, полезно понимать одну вещь: сайт, который отлично выглядит на большом мониторе дизайнера, может разваливаться на телефоне снабженца. А снабженец всё чаще заходит именно с телефона — в цеху, в командировке, между встречами. Если на его экране кнопка заявки уехала за край, а таблица характеристик не читается, заявку вы не получите. Адаптивная вёрстка — это про то, чтобы такого не было.
Что такое адаптивная вёрстка простыми словами
Сайт состоит из блоков: шапка, меню, тексты, картинки, формы. Адаптивная вёрстка — это когда эти блоки сами перестраиваются под ширину экрана. На мониторе меню идёт строкой, на телефоне сворачивается в кнопку-бургер. Таблица, которая на десктопе видна целиком, на телефоне становится прокручиваемой, а не вылезает за край. Один сайт, один адрес, но на каждом устройстве он удобен.
Это не то же самое, что отдельная мобильная версия (когда делают два разных сайта). Адаптивный подход — один сайт, который подстраивается. Так проще поддерживать и лучше для поиска.
Почему для производства это про заявки, а не про красоту
Три причины, по которым адаптивность бьёт по деньгам напрямую:
- Поиск ранжирует по мобильной версии. Яндекс и Google оценивают сайт в первую очередь по тому, как он выглядит на телефоне. Кривая мобильная версия — ниже позиции — меньше трафика
- Закупщики заходят с телефонов. Первое касание часто с мобильного: увидел в поиске, зашёл, оценил. Неудобно — ушёл к конкуренту
- Формы и звонки. Если на телефоне неудобно заполнить заявку или не работает клик по номеру, вы теряете горячего клиента на последнем шаге
Мобильная версия давно не «приятное дополнение». Как её проверять и настраивать под поиск, подробнее разбирали в статье про SEO для мобильных.
На что смотреть при приёмке сайта
Не нужно быть верстальщиком, чтобы проверить главное. Откройте сайт на своём телефоне и пройдите путь клиента:
| Что проверить | Как должно быть |
| Текст | Читается без увеличения пальцами, не вылезает за край |
| Кнопки | Крупные, попадаешь пальцем с первого раза, не слипаются |
| Меню | Сворачивается в бургер, открывается, все пункты доступны |
| Картинки и фото продукции | Не растянуты, не обрезаны, грузятся быстро |
| Таблицы характеристик | Прокручиваются вбок, а не ломают вёрстку |
| Форма заявки | Легко заполнить, поля видны, кнопка отправки на месте |
| Телефон | Клик по номеру сразу набирает звонок |
Проверьте на разных экранах: свой телефон, планшет, чужой смартфон поменьше. Отдельно посмотрите скорость загрузки на мобильном интернете — тяжёлый сайт на 4G грузится долго, и человек уходит.
Частые проблемы, которые всплывают уже после запуска
Классика — сайт приняли на десктопе, обрадовались красоте, а через месяц заметили, что с телефона половина заявок не доходит. Типичные болячки: горизонтальная прокрутка (приходится елозить сайт вбок), микроскопический текст, кнопка заявки под шапкой и её не видно, всплывающее окно на весь экран без крестика. Это не мелочи дизайна — это дырки, через которые утекают лиды.
Такие вещи — часть более широкой темы ошибок при разработке сайта. Ловить их надо на приёмке, потому что потом переделка стоит дороже.
Как не попасть на кривую вёрстку
Простое правило: требуйте показать сайт на мобильном ещё до финальной оплаты и сами пройдите путь клиента с телефона. Хорошая студия делает адаптивность по умолчанию и не считает её доплатой. Если подрядчик говорит «мобильная версия — отдельно за деньги» или сдаёт сайт, который вы не проверяли на телефоне, это повод насторожиться.
Хотите убедиться, что ваш сайт не теряет мобильные заявки? Проведём аудит: пройдём путь клиента с телефона и покажем, где утекают лиды. Первый разбор бесплатный, услуга — создание и доработка сайтов.
