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