Адаптивный дизайн: каким должен быть сайт на телефоне

Адаптивный дизайн — это когда один и тот же сайт перестраивается под ширину экрана: на компьютере в нём несколько колонок, на телефоне — одна, с крупными кнопками и текстом, который читается без увеличения. Хороший адаптив — не уменьшенная копия десктопа, а версия, которой удобно пользоваться одной рукой: прочитать, сравнить, позвонить, оставить заявку. Разберём, что проверять на телефоне и где адаптив ломается чаще всего.

Что такое адаптивный дизайн и чем он отличается от мобильной версии

Адаптивный сайт — один для всех устройств: тот же адрес, то же содержимое, тот же код. Меняется раскладка: на определённых ширинах экрана — их называют контрольными точками — колонки перестраиваются, меню сворачивается, картинки уменьшаются. Иногда различают «резиновую» вёрстку, которая тянется плавно, и адаптивную, которая перестраивается скачками; современные сайты обычно сочетают оба подхода.

Отдельная мобильная версия — второй сайт, обычно с адресом, который начинается с m., и телефоны перенаправляют туда автоматически. Такой подход ещё встречается у старых и очень больших сайтов.

	Адаптивный сайт	Отдельная мобильная версия
Адрес	Один для всех устройств	Свой, обычно с приставкой m.
Содержимое	Общее, правится один раз	Обновлять нужно в двух местах
Поисковики	Одна страница — один адрес	Версии нужно связывать разметкой, иначе появятся дубли
Ссылки	Работают на любом устройстве	Ссылка, отправленная с телефона, часто открывает на компьютере мобильную версию
Поддержка	Один код	Два кода, ошибки чинят дважды

Google прямо рекомендует адаптивный дизайн как самый простой в поддержке вариант, и новому сайту отдельная мобильная версия почти никогда не нужна. У адаптивного сайта есть обязательная техническая мелочь — метатег viewport. Без него телефон показывает страницу как на широком экране, только мелко, и посетителю приходится увеличивать её пальцами.

В конструкторах адаптив бывает отчасти ручным. Например, в Zero Block на Tilda расположение элементов задают отдельно для каждой ширины экрана — и про узкие экраны легко забыть.

Что проверить на телефоне

Кнопки и ссылки

Палец — не курсор мыши. Apple советует делать область нажатия размером 44 × 44 точки и больше, Google — 48 × 48 и больше: это примерно подушечка пальца. Между соседними ссылками нужен зазор, иначе человек будет попадать не туда. Главную кнопку удобно держать в нижней части экрана, куда дотягивается большой палец. Телефон и мессенджеры — ссылками, которые открывают звонок или чат в одно касание.

На сенсорном экране нет наведения. Выпадающее меню, которое раскрывается при наведении курсора, и подсказки, которые появляются так же, на телефоне не работают — им нужна замена по нажатию.

Текст

Основной текст на телефоне — обычно не меньше 16 пикселей, с достаточным межстрочным расстоянием и контрастом: сайт открывают и на улице, при ярком солнце. Крупные заголовки уменьшают так, чтобы длинное слово вроде «достопримечательности» не вылезало за край экрана.

Формы

• Поля нужного типа: для телефона открывается цифровая клавиатура, для почты — клавиатура с @.
• Автозаполнение: браузер сам подставляет имя, телефон и адрес, если поля правильно размечены.
• Подписи над полями, а не только серый текст внутри, который исчезает при вводе.
• Шрифт в полях не меньше 16 пикселей — иначе Safari на iPhone увеличивает страницу, когда человек нажимает на поле.
• Ошибки — рядом с полем и понятными словами.
• Кнопка отправки не прячется под клавиатурой, а флажок согласия на обработку данных легко нажать пальцем.

Таблицы

Широкая таблица — частая беда мобильной версии. Варианты: прокручивать вбок только саму таблицу, а не всю страницу, и подсказать, что её можно листать; превратить строки в карточки; оставить на телефоне только главные столбцы. Таблицу цен из шести колонок обычно проще показать карточками.

Меню

Меню на телефоне обычно прячут под кнопку. Проверьте, что пункты в нём крупные, меню закрывается после выбора пункта, а главное действие — позвонить, записаться, оставить заявку — доступно и без него. Закреплённая шапка не должна занимать пол-экрана: на телефоне место дорого.

Скорость на мобильном интернете

Телефон слабее ноутбука, а мобильный интернет нестабилен — в дороге, за городом, в здании с толстыми стенами. Картинки должны приходить в размере экрана телефона, тяжёлое фоновое видео лучше заменить картинкой, а сторонние виджеты — подключать только нужные. Lighthouse в мобильном режиме специально замедляет сеть и процессор, чтобы показать сайт глазами владельца недорогого телефона. Подробно о причинах и решениях — в статье о скорости загрузки сайта.

Mobile-first: почему проектируют с телефона

Mobile-first — подход, при котором сайт сначала проектируют для узкого экрана, а потом расширяют для планшета и компьютера. На телефоне помещается немного, поэтому сразу приходится решать, что главное, а без чего можно обойтись. Добавить блоки для широкого экрана легче, чем ужать десктопный макет, в котором всё казалось важным.

В вёрстке это значит, что базовые стили пишутся для телефона, а правила для широких экранов добавляются поверх. Есть и причина, связанная с поиском: Google индексирует сайты по мобильной версии страниц, так что всё, что убрали из мобильной версии, для него не существует. Остальные пункты, которые стоит проверить до запуска, — в SEO-чек-листе нового сайта.

Как проверить адаптив самому

На компьютере. Сузьте окно браузера и посмотрите, как сайт перестраивается. Точнее — в режиме устройства в Chrome: откройте инструменты разработчика и нажмите Ctrl + Shift + M (на Mac — Cmd + Shift + M). Там можно выбрать модель телефона, повернуть экран и замедлить сеть. Начинайте с самой узкой ширины, которую должен поддерживать сайт, — например, 320 пикселей.

Но эмулятор не заменит телефон: он не показывает, как страницу отрисует Safari на iPhone, и не передаёт ощущения пальца, клавиатуры и реальной скорости.

На настоящих телефонах. Нужны хотя бы один iPhone и один Android, лучше не самые новые. Проверьте:

• вертикальную и горизонтальную ориентацию;
• увеличенный системный шрифт;
• мобильный интернет вместо офисного Wi-Fi;
• каждую форму — до отправки и сообщения об успехе;
• ссылку на сайт из мессенджера: она открывается во встроенном браузере, и там всё тоже должно работать.

Частые ошибки

• Горизонтальная прокрутка: какой-то элемент шире экрана.
• Всплывающее окно на весь экран, которое трудно закрыть. Google считает такие окна навязчивыми, и это может стоить позиций в мобильном поиске.
• Первый экран «во всю высоту», где кнопка оказывается под панелью браузера.
• Меню и подсказки, которые работают только при наведении мышью.
• Половина блоков скрыта на телефоне, «чтобы не мешали», — а вместе с ними и ответы на вопросы посетителя.
• Номер телефона простым текстом, на который нельзя нажать.
• Проверка только в эмуляторе.

Если ваш сайт неудобен на телефоне или вы планируете новый, расскажите о задаче: спроектируем и сверстаем его так, чтобы им было удобно пользоваться с любого экрана. Перед финальной оплатой пригодится чек-лист приёмки сайта — адаптив в нём один из первых пунктов.