Адаптивный дизайн сайта

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

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

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

• смотрим, с каких экранов приходят именно ваши посетители
• берём несколько контрольных ширин, а не одну
• проверяем граничные значения, где макет ломается чаще всего
• отдельно смотрим альбомный поворот телефона и планшета

Больше всего проблем возникает не в середине диапазона, а на его краях — там, где три колонки ещё не успели превратиться в одну. Бывает так: на планшете в книжном положении всё аккуратно, а стоит повернуть экран — и заголовок наезжает на фото. Именно такие стыки мы проходим руками.

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

Сетка — это невидимые направляющие, по которым выровнены все блоки; гибкая означает, что они тянутся вместе с экраном, а не держат жёсткую ширину.

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

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

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

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

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

Медиазапрос — это правило в духе «если экран уже такой-то ширины, делай вот так»; именно оно перестраивает страницу, а не просто сжимает её.

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

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

• количество колонок на каждой контрольной ширине
• размеры заголовков и основного текста
• меню: полное горизонтальное или кнопка с тремя полосками
• что прячется, что сворачивается, что переезжает вверх

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

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

Та же фотография не должна грузиться на телефон в размере для большого монитора — иначе страница открывается долго и съедает мобильный трафик.

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

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

• несколько размеров одной картинки под разные экраны
• современные форматы сжатия вместо тяжёлых оригиналов
• двойная плотность для чёткости на ретина-экранах
• кадрирование под вертикальный экран, а не сжатие

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

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

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

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

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

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

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

Простая проверка: возьмите телефон одной рукой, как в транспорте, и попробуйте оставить заявку на собственном сайте. Всё, что заставило перехватить телефон или увеличить экран пальцами, — место для правки.

Макет — это пока картинка; вёрстка превращает её в работающие страницы, и от описания поведения блоков зависит, совпадёт ли сайт с рисунком.

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

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

• описание поведения каждого блока на каждой ширине
• библиотека повторяющихся элементов: кнопки, поля, карточки
• шрифты, цвета и графика в нужных размерах
• права на созданные материалы переходят заказчику

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

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