Адаптивный дизайн: принципы и проверка

Сайт, который «вроде бы открывается на телефоне», и сайт, которым удобно пользоваться на телефоне, — две большие разницы. В первом случае посетитель щурится, увеличивает текст двумя пальцами и промахивается по ссылкам. Во втором — спокойно читает, находит нужное и оставляет заявку. Разница между ними — в том, насколько продуманно сделан адаптивный дизайн. Рассказываем, на каких принципах он строится и как проверить, что ваш сайт действительно работает на всех экранах.

Адаптивный, резиновый, мобильная версия: в чём разница

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

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

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

Контрольные точки и сетка

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

Сетка определяет, как контент делится на колонки. Чаще всего используют 12 колонок на десктопе, 8 на планшете и 4 на телефоне: числа хорошо делятся и позволяют гибко компоновать блоки. Главное правило — ограничивать максимальную ширину текстового блока. Строка длиннее 75–80 символов утомляет, поэтому даже на мониторе в 2 560 пикселей статья должна занимать удобную для чтения колонку, а не растягиваться на весь экран.

Mobile first как способ мышления

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

Принципы, которые делают адаптив удобным

Адаптивность нельзя свести к правилу «всё в одну колонку». Удобная мобильная версия опирается на несколько принципов, каждый из которых решает конкретную проблему пользователя.

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

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

Изображения, таблицы и другие сложные элементы

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

Изображения

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

Таблицы

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

Формы и всплывающие окна

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

Как проверить адаптивность сайта

Режим разработчика в браузере, который имитирует разные экраны, полезен, но не заменяет проверку на реальных устройствах. Эмулятор не покажет, как ведёт себя экранная клавиатура, как работает прокрутка внутри блоков и насколько удобно попадать пальцем по кнопкам. Мы проверяем сайты в несколько проходов.

1. Плавное изменение ширины окна

   Медленно сужаем окно браузера от 1 920 до 320 пикселей и смотрим, нет ли моментов, когда блоки наезжают друг на друга, текст вылезает за край или появляется горизонтальная прокрутка.

2. Эмуляция популярных устройств

   Проверяем типовые разрешения в режиме разработчика, обращая внимание на переходы между контрольными точками.

3. Реальные телефоны

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

4. Горизонтальная ориентация

   Поворачиваем телефон. Закреплённые шапки и панели часто съедают половину и без того низкого экрана.

5. Медленный интернет

   Включаем ограничение скорости и смотрим, как страница загружается: не прыгает ли контент, видно ли что-то полезное в первые секунды.

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

Типичные ошибки, которые мы находим на аудитах

Большинство проблем с адаптивом повторяется от сайта к сайту. Вот что мы встречаем чаще всего, когда к нам приходят с запросом на доработку или редизайн:

• Телефон компании в шапке не кликабелен — посетителю приходится переписывать номер вручную.
• Слайдер на главной занимает весь первый экран, а информация о компании начинается только на втором-третьем.
• Фильтры каталога открываются поверх товаров, но не закрываются без перезагрузки страницы.
• Текст в карточках обрезается многоточием, и не видно ключевых характеристик.
• Чат-виджет и кнопка «наверх» перекрывают кнопку оформления заказа.
• Изображения в статьях выходят за пределы экрана и создают горизонтальную прокрутку всей страницы.

Каждая из этих ошибок по отдельности кажется мелочью, но вместе они превращают мобильную версию в полосу препятствий. Хорошая новость в том, что большинство из них исправляется за несколько часов работы верстальщика, если не требуется менять структуру страниц.

Сколько стоит адаптивность

В новых проектах отдельной строки «адаптивный дизайн» в смете у нас нет: мобильная версия входит в работу по умолчанию, потому что сайт без неё сегодня не имеет смысла. Но объём работы реальный: дизайнер отрисовывает минимум две версии каждого шаблона, а верстальщик тратит на адаптив примерно треть времени вёрстки. Если подрядчик предлагает «сделать мобильную версию автоматически», стоит уточнить, кто и как будет решать, что показывать на маленьком экране.

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

Выводы

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