Ещё недавно сайты делали в расчёте на экран настольного компьютера, а мобильную версию добавляли потом — если вообще добавляли. Сегодня ситуация обратная: большая часть посетителей заходит со смартфонов, и для многих бизнесов именно мобильный сайт — главный. При этом люди продолжают пользоваться ноутбуками, планшетами, большими мониторами и даже телевизорами.
Сайт должен одинаково хорошо работать на любом из этих устройств. Именно эту задачу решает адаптивная вёрстка. Разберёмся, как она устроена и на что обратить внимание.
Что такое адаптивная вёрстка
Адаптивная вёрстка — это подход, при котором одна и та же страница автоматически подстраивается под ширину экрана. На большом мониторе блоки могут стоять в несколько колонок, на планшете — в две, на телефоне — в одну. Меню превращается в выпадающую панель, изображения уменьшаются, шрифты остаются читаемыми.
Важно, что это один сайт с одним адресом и одним содержимым. Меняется только его отображение. Это удобно и для пользователей, и для поисковых систем, и для владельца сайта, которому не нужно поддерживать две отдельные версии.
Чем отличается от мобильной версии
Раньше часто делали отдельную мобильную версию сайта — по другому адресу, обычно с упрощённым содержимым. Такой подход имеет недостатки:
- нужно поддерживать два сайта и следить, чтобы информация в них совпадала;
- ссылки, которыми делятся пользователи, могут вести не на ту версию;
- урезанное содержимое мобильной версии раздражает посетителей, которые не находят нужной информации;
- поисковым системам сложнее правильно связать две версии.
Адаптивная вёрстка лишена этих проблем, поэтому сегодня это стандарт.
Почему это важно
Посетители
Если на телефоне сайт отображается как уменьшенная копия десктопной версии, его приходится постоянно увеличивать и прокручивать в стороны. Текст не читается, кнопки слишком мелкие, чтобы попасть в них пальцем. Большинство посетителей не станет с этим мириться и уйдёт к конкуренту.
Поисковые системы
Поисковики оценивают сайты прежде всего по мобильной версии. Если сайт неудобен на смартфоне, это отражается на его позициях в выдаче — в том числе для пользователей настольных компьютеров.
Реклама
Значительная часть рекламных кликов приходится на мобильные устройства. Если сайт плохо работает на телефоне, вы платите за посетителей, которые сразу уходят.
Как устроена адаптивность
Гибкая сетка
Вместо фиксированных размеров в пикселях блоки задаются в относительных величинах — процентах или долях доступного пространства. Благодаря этому они растягиваются и сжимаются вместе с экраном.
Контрольные точки
Это значения ширины экрана, при которых раскладка меняется. Например, до определённой ширины карточки стоят в одну колонку, после — в две, ещё шире — в три. Хорошая практика — выбирать контрольные точки исходя из содержимого, а не из размеров конкретных устройств.
Гибкие изображения
Изображения масштабируются вместе с контейнером и не выходят за его пределы. Для экранов разного размера и плотности можно отдавать разные версии картинок, чтобы на телефоне не грузить огромные файлы, предназначенные для большого монитора.
Адаптивная типографика
Размеры шрифтов могут плавно меняться в зависимости от ширины экрана. Важно, чтобы на телефоне основной текст оставался не меньше 16 пикселей, а заголовки не занимали весь экран.
Подход «сначала мобильная»
Многие дизайнеры и разработчики используют подход mobile first: сначала проектируют и верстают страницу для самого маленького экрана, а затем расширяют её для больших. Это заставляет с самого начала определить, что на странице действительно важно, — на маленьком экране нет места для лишнего.
В результате мобильная версия получается продуманной, а не урезанной, а десктопная — более сфокусированной.
Что часто ломается на мобильных
По опыту доработки чужих сайтов, вот проблемы, которые встречаются чаще всего:
- Таблицы. Широкие таблицы выходят за пределы экрана. Решение — горизонтальная прокрутка внутри таблицы или перестроение строк в карточки.
- Горизонтальная прокрутка страницы. Какой-то элемент оказался шире экрана, и вся страница начинает сдвигаться в сторону.
- Мелкие кнопки и ссылки. Элементы, на которые нужно нажимать, должны быть достаточно крупными — не меньше 44 пикселей по высоте — и стоять не слишком близко друг к другу.
- Всплывающие окна. Окна, которые закрывают весь экран и не имеют заметной кнопки закрытия, раздражают и мешают.
- Формы. Неправильные типы полей — например, обычная клавиатура вместо цифровой для ввода чисел, или почта без соответствующей раскладки.
- Фиксированные элементы. Шапка или кнопки, закреплённые на экране, могут занимать слишком много места на маленьком экране.
- Тяжёлые изображения. Большие картинки, не оптимизированные для мобильных устройств, замедляют загрузку.
Как проверить свой сайт
Самый надёжный способ — открыть сайт на реальных устройствах: своём телефоне, телефонах коллег, планшете. Пройдите основные сценарии: найти услугу, узнать цену, оставить заявку, купить товар.
Также полезно:
- использовать режим эмуляции устройств в инструментах разработчика браузера;
- проверить сайт в специальных сервисах тестирования мобильной совместимости;
- посмотреть в аналитике, как ведут себя мобильные посетители по сравнению с десктопными. Если на телефонах заметно выше отказы и ниже конверсия — это сигнал.
Больше, чем ширина экрана
Адаптивность — это не только про размеры. Мобильные пользователи находятся в другом контексте: часто на ходу, с одной свободной рукой, с нестабильным интернетом. Хорошая мобильная версия учитывает это:
- важная информация доступна быстро, без долгой прокрутки;
- кнопки действий удобно расположены для нажатия большим пальцем;
- страницы лёгкие и загружаются даже на медленном соединении;
- ссылки на почту и адрес открывают соответствующие приложения;
- формы короткие и заполняются с минимумом ввода.
Можно ли адаптировать старый сайт
Да, во многих случаях старый сайт можно сделать адаптивным без полного редизайна. Для этого перерабатывается вёрстка шаблонов: добавляются гибкие сетки, контрольные точки, адаптивное меню. Объём работ зависит от того, насколько аккуратно был свёрстан исходный сайт.
Иногда, правда, оказывается, что вёрстка настолько устарела, что проще сделать новые шаблоны. В любом случае стоит начать с аудита.
Сколько стоит адаптивность
При разработке нового сайта адаптивная вёрстка — не отдельная опция, а часть стандартной работы. Она увеличивает объём дизайна и вёрстки, потому что каждый шаблон нужно продумать для нескольких размеров экрана, но эти затраты окупаются удобством для большинства посетителей. Адаптация старого сайта оценивается отдельно и зависит от качества исходного кода.
Итог
Адаптивная вёрстка — обязательное требование для любого современного сайта. Она обеспечивает удобство для посетителей на любых устройствах, помогает в продвижении и делает рекламу эффективнее. Хорошая адаптивность — это не просто сжатие страницы, а продуманный опыт для каждого типа экрана.
Все наши сайты изначально проектируются адаптивными и проверяются на реальных устройствах. Если ваш текущий сайт неудобен на телефоне — мы можем его адаптировать. Напишите нам, и мы оценим объём работ.