Что такое адаптивная вёрстка сайта
Адаптивная вёрстка (responsive design, адаптивный дизайн) — Адаптивная вёрстка это способ сделать сайт, при котором одна и та же страница автоматически перестраивается под ширину экрана телефона, планшета или компьютера.
Большая часть трафика из рекламы и поиска сейчас приходит с телефонов, в некоторых нишах это 70–80% (доля сильно зависит от тематики). Если сайт на телефоне показывает уменьшенную версию десктопа, где надо щипать экран, человек уходит к конкуренту.
Как это работает. Вёрстка использует гибкие сетки и медиазапросы CSS. На широком экране три колонки, на планшете две, на телефоне одна. Меню сворачивается в кнопку, таблицы превращаются в карточки, шрифт и кнопки становятся крупнее.
Чем отличается от мобильной версии. Мобильная версия это отдельный сайт на поддомене вроде m.site.ru со своим кодом. Сейчас так почти не делают: две версии сложно поддерживать, а поисковики отдают предпочтение одному адресу для всех устройств.
Что проверить на своём сайте:
- текст читается без увеличения, шрифт не мельче 16 пикселей;
- кнопки и ссылки легко нажать пальцем, между ними есть отступ;
- телефон кликабельный и открывает звонок;
- формы удобно заполнять, поле телефона вызывает цифровую клавиатуру;
- нет горизонтальной прокрутки;
- всплывающие окна не закрывают весь экран.
Пример. Лендинг натяжных потолков: на компьютере конверсия 4%, на телефонах 1,2%. В Вебвизоре видно, что кнопка «Рассчитать» на телефоне уезжает за край экрана. После исправления конверсия на мобильных сравнялась с десктопом. Цифры условные.
Проверяют вёрстку в режиме разработчика браузера, на реальных телефонах и в Метрике: отчёт по типам устройств быстро покажет, где проваливается конверсия. Мы делаем сайты с мобильной версии в первую очередь и смотрим этот отчёт после каждого запуска рекламы.