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