Простыми словами
Адаптивная вёрстка — подход, при котором страница автоматически меняет расположение элементов в зависимости от ширины экрана. На компьютере три колонки превращаются на телефоне в одну, меню сворачивается в значок, картинки подгоняются под размер.
Раньше для телефонов делали отдельную мобильную версию на другом адресе. Сегодня почти всегда применяют один сайт, который подстраивается сам. Это проще поддерживать и лучше для поисковиков: у страницы один адрес и один набор данных.
Как это работает
Технически адаптивность реализуют с помощью гибкой сетки, относительных размеров и правил, срабатывающих на определённых ширинах — их называют точками перехода. Разработчик описывает, как блок выглядит на узком экране, и добавляет правила для широких.
Современные подходы идут от малого экрана к большому: сначала продумывают телефон, затем усложняют макет. Этот принцип называют mobile first. Он заставляет оставить только главное и делает сайт быстрее, ведь на телефон загружается меньше лишнего.
Зачем это владельцу бизнеса
В Казахстане большинство посетителей приходит с телефонов, а для многих ниш — до восьмидесяти процентов трафика. Если форма неудобна, телефон не нажимается, текст приходится увеличивать пальцами, клиент уйдёт к конкуренту.
Поисковики используют мобильную версию как основную при оценке страницы. Неадаптивный сайт теряет позиции и дороже обходится в рекламе из-за низкой конверсии.
Пример из практики
Ателье в Усть-Каменогорске имело красивый сайт, сделанный десять лет назад для компьютеров. С телефона мелкий текст и кнопки приходилось увеличивать. После переделки на адаптивную вёрстку с крупными кнопками звонков и WhatsApp число обращений с мобильных выросло в полтора раза.
Частые ошибки
- Проверять сайт только на своём компьютере
- Мелкие кнопки и ссылки рядом, в которые невозможно попасть пальцем
- Тяжёлые картинки без сжатия для мобильного интернета
- Всплывающие окна, перекрывающие весь экран телефона
- Забывать про ландшафтный режим и планшеты