Адаптивная вёрстка: как сделать сайт удобным на телефоне

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

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

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

Раньше часто делали отдельную мобильную версию на поддомене вида m.site.ru. У такого подхода много минусов: два сайта нужно поддерживать параллельно, контент рассинхронизируется, поисковым системам приходится разбираться, какая страница главная. Сегодня отдельная мобильная версия — скорее исключение для очень крупных проектов. Для блога, лендинга, сайта услуг или небольшого интернет-магазина стандарт один — адаптив.

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

Почему без адаптива сегодня никуда

Я бы выделил три причины, по которым экономить на адаптиве — плохая идея.

• Пользователи. Большая часть трафика на информационные сайты, сайты услуг и магазины приходит с мобильных устройств. Неудобная страница — это потерянные заявки и читатели.
• Поисковые системы. И Яндекс, и Google оценивают удобство сайта на мобильных. Страница, которая плохо отображается на телефоне, проигрывает конкурентам в выдаче. Подробнее о том, как поисковики оценивают сайты, я рассказывал в статье об основах SEO-продвижения.
• Реклама. Если вы платите за клики, а человек попадает на страницу, где ничего не понятно, вы буквально сжигаете бюджет.

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

Фундамент: мета-тег viewport и относительные единицы

Всё начинается с одной строки в разделе head. Мета-тег viewport говорит браузеру телефона: «Не притворяйся широким экраном, используй реальную ширину устройства». Без него мобильный браузер отрисует страницу так, будто у него монитор около тысячи пикселей в ширину, а потом уменьшит её целиком — отсюда мелкий нечитаемый текст. Стандартная запись выглядит так: name="viewport" и content="width=device-width, initial-scale=1". Никогда не запрещайте пользователю масштабирование — это вредит доступности.

Второй важный момент — единицы измерения. Жёстко заданные в пикселях ширины блоков — главный враг адаптива. Вот что стоит использовать вместо них:

• Проценты — для ширины колонок и контейнеров относительно родителя.
• rem — для размеров шрифтов и отступов. Один rem равен размеру шрифта корневого элемента, поэтому, изменив его в одном месте, вы пропорционально меняете весь интерфейс.
• vw и vh — доли ширины и высоты окна. Удобны для полноэкранных блоков, но с высотой на мобильных будьте аккуратны: адресная строка браузера то появляется, то прячется.
• max-width вместо width. Контейнер с max-width: 1140px и width: 100% на широком экране не вылезет за разумные пределы, а на узком спокойно сожмётся.

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

Медиазапросы и контрольные точки

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

Для ориентира можно взять такие диапазоны:

Отдельно скажу про подход mobile first. Суть в том, что базовые стили вы пишете для телефона, а медиазапросы с min-width добавляют усложнения для больших экранов. Так код получается чище: мобильная версия простая по своей природе, и вы не тратите силы на то, чтобы «отменять» десктопные стили. Кроме того, телефон не загружает лишние правила, что немного помогает скорости.

Гибкие сетки: Flexbox и Grid

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

Flexbox

Flexbox хорош для одномерных раскладок — строки или столбца. Меню, ряд карточек, шапка с логотипом слева и кнопкой справа — всё это делается во флексе. Свойство flex-wrap: wrap позволяет элементам переноситься на новую строку, если им не хватает места, а flex: 1 1 280px говорит карточке: «будь не уже 280 пикселей, а оставшееся пространство дели с соседями». Такая карточная сетка адаптируется вообще без медиазапросов.

Grid

Grid — двумерная сетка, где вы управляете и строками, и колонками. Классический приём: grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)). Браузер сам решит, сколько колонок поместится: на телефоне одна, на планшете две, на мониторе четыре. Для сложных макетов, где шапка, сайдбар, контент и подвал меняют расположение, удобно использовать grid-template-areas и переопределять их в медиазапросах.

Если вы работаете в конструкторе вроде Tilda или с готовой темой WordPress, всё это уже реализовано за вас. Но понимать принцип всё равно полезно: так вы быстрее найдёте, где именно «поехал» блок, и сможете поправить его точечно.

Картинки, шрифты и кнопки на маленьком экране

Раскладка — это полдела. Много проблем на мобильных возникает из-за мелочей.

Изображения. Первое правило — max-width: 100% и height: auto для всех картинок, чтобы они никогда не вылезали за пределы экрана. Второе — не отдавайте телефону огромный файл, рассчитанный на широкий монитор. Атрибуты srcset и sizes позволяют предложить браузеру несколько вариантов одного изображения, и он сам выберет подходящий. А тег picture даёт возможность показать на телефоне другой кадр — например, крупный план вместо широкой панорамы, на которой ничего не разглядеть.

Шрифты. Основной текст на телефоне должен быть не меньше 16 пикселей, иначе его тяжело читать, а iOS вдобавок начинает автоматически увеличивать страницу при фокусе на поле ввода. Заголовки удобно масштабировать функцией clamp: она задаёт минимальный размер, желаемый в процентах от ширины экрана и максимальный. Межстрочный интервал для текста — около 1.5–1.7.

Кнопки и ссылки. Палец — не курсор мыши. Кликабельная область должна быть не меньше 44–48 пикселей по высоте, а между соседними ссылками нужен зазор. Номер телефона оформляйте ссылкой с tel:, почту — с mailto:, тогда человек сможет позвонить одним касанием.

Формы. Используйте правильные типы полей: type="tel" откроет цифровую клавиатуру, type="email" — клавиатуру с символом @. Не заставляйте человека заполнять десять полей на телефоне — оставьте только необходимое.

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

Таблицы и длинные элементы. Широкую таблицу оберните в контейнер с overflow-x: auto — пусть прокручивается горизонтально внутри себя, но не растягивает всю страницу. То же касается блоков кода и встроенных видео: видео лучше вписывать через aspect-ratio, чтобы сохранялись пропорции.

Как проверить адаптив: пошаговый чек-лист

Проверять адаптивность нужно не «на глаз» в конце, а в процессе работы. Вот порядок, которым пользуюсь я сам:

1. Режим разработчика в браузере. В Chrome или Firefox нажмите F12 и включите режим эмуляции устройств. Проверьте несколько размеров: узкий смартфон около 360px, крупный около 414px, планшет, ноутбук.
2. Плавное сужение окна. Медленно тяните границу окна от широкого к узкому и следите, где что-то ломается. Промежуточные ширины часто выдают ошибки, которые не видны на «стандартных» размерах.
3. Горизонтальная прокрутка. На телефоне страница не должна скроллиться вбок. Если скроллится — ищите элемент с фиксированной шириной или слишком большим отступом.
4. Реальные устройства. Эмулятор не заменит живой телефон. Проверьте хотя бы на одном Android и одном iPhone: шрифты, поведение фиксированной шапки, работа форм и всплывающих окон отличаются.
5. Горизонтальная ориентация. Поверните телефон. Фиксированная шапка высотой в треть экрана в таком положении съедает половину полезного пространства.
6. Скорость. Мобильный интернет бывает медленным. Проверьте, как быстро грузится страница, и уберите лишнее — об этом подробно в статье о том, как ускорить загрузку сайта.
7. Инструменты поисковиков. В Яндекс Вебмастере и Google Search Console есть отчёты об удобстве для мобильных — загляните туда после запуска.

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

Подведём итог

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

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