Между телефоном и рабочим монитором лежит целый диапазон устройств, о котором вспоминают в последнюю очередь. Проектируют обычно два состояния: мобильное и десктопное. В результате на планшете сайт выглядит как растянутая мобильная версия с огромными кнопками и строками текста в полторы сотни знаков, а на широком мониторе содержимое жмётся в узкую колонку посередине пустого экрана. Разберём, чем отличается вёрстка для промежуточных и больших экранов и что мы проверяем перед сдачей проекта.
Почему планшеты выпадают из работы
Причин несколько, и все они организационные, а не технические. Макеты рисуют в двух размерах, потому что так дешевле согласовывать. Тестируют на том, что под рукой, — телефон и ноутбук. В отчётах аналитики доля планшетов невелика, и это становится аргументом «можно не тратиться».
Ошибка в том, что промежуточный диапазон — это не только планшеты. Сюда попадают окно браузера, растянутое на половину экрана, небольшие ноутбуки, телевизоры и мониторы с крупным системным масштабированием, телефон в горизонтальной ориентации. Если сайт разваливается на ширине около тысячи пикселей, его увидят сломанным заметно чаще, чем показывает строка «планшеты» в отчёте.
Типичные проблемы промежуточных экранов
| Проблема | Как выглядит для посетителя | Как исправляем |
|---|---|---|
| Мобильная версия растянута на 1024 px | Огромные блоки, много пустоты, длинная прокрутка | Добавляем промежуточную точку перестроения: две-три колонки |
| Строки текста по 140 знаков | Глаз теряет строку, текст читают по диагонали | Ограничиваем ширину текстовой колонки |
| Меню спрятано в бургер на широком экране | Разделы не видны, хотя место для них есть | Показываем пункты меню, начиная с промежуточной ширины |
| Мелкие цели при касании | Промахи по ссылкам и кнопкам | Держим размер области нажатия не меньше пальца, а не курсора |
| Всё завязано на наведение | Подменю и подсказки недоступны | Дублируем нажатием, выпадающие меню открываем по тапу |
| Таблицы и прайсы шире экрана | Горизонтальная прокрутка всей страницы | Скроллим саму таблицу или перестраиваем её в карточки |
| Фиксированная шапка занимает треть экрана | Содержимого почти не видно | Уменьшаем высоту шапки на невысоких экранах |
Точки перестроения выбираются по содержимому
Распространённый подход — брать ширины популярных моделей устройств. Мы так не делаем: список моделей меняется каждый год, а содержимое сайта — нет. Точку перестроения разумно ставить там, где макет начинает выглядеть плохо.
Порядок, которым мы пользуемся:
- Собираем блок в самой узкой версии — одна колонка, всё по порядку.
- Плавно расширяем окно и смотрим, в какой момент появляется проблема: строка стала слишком длинной, карточки слишком широкими, между колонками появилась дыра.
- В этом месте ставим точку перестроения и меняем раскладку.
- Повторяем до максимальной ширины.
В итоге у разных блоков точки перестроения оказываются разными, и это нормально: карточкам услуг нужна перестройка раньше, чем текстовому блоку.
Планшет — это пальцы, а не курсор
Главное отличие планшета от ноутбука с похожей шириной экрана — способ ввода. На это часто не обращают внимания, потому что вёрстка «по ширине» уже подходит.
- Размер областей нажатия остаётся таким же, как на телефоне, — палец не становится меньше от того, что экран больше.
- Расстояние между соседними ссылками должно исключать промах: в списках, в меню, в фильтрах, в таблицах с действиями.
- Наведение недоступно. Всё, что открывается по наведению, должно открываться и по нажатию, а после повторного нажатия закрываться.
- Подсказки при наведении не читаются вовсе — важное выносим в видимый текст.
- Экранная клавиатура закрывает нижнюю половину экрана: форма не должна прятаться под ней, а кнопка отправки должна оставаться достижимой.
- Ввод текста неудобен: чем меньше полей и чем чаще подходит выбор из списка, тем лучше.
Очень широкие экраны
Обратная крайность — сайт, растянутый на весь монитор шириной больше двух тысяч пикселей. Содержимое расползается, строки становятся нечитаемыми, а взгляд не находит, за что зацепиться.
- Ограничиваем ширину основного содержимого: для текста комфортный диапазон — примерно 1200-1440 пикселей.
- Не растягиваем сетку карточек до бесконечности — лучше добавить ещё одну колонку, чем расширять существующие.
- Следим за шапкой и подвалом: разнесённые по краям экрана логотип и меню выглядят разорванными.
- Фоновые изображения готовим в достаточном разрешении, иначе на большом экране они мылят.
- Проверяем, не превращается ли страница в узкую колонку посреди пустоты: на широком экране разумно использовать пространство под навигацию, оглавление или боковую карточку с ценой.
Ландшафтная ориентация и невысокие экраны
Отдельный случай, который почти никогда не проверяют, — телефон, повёрнутый горизонтально. Ширина при этом становится «планшетной», а высота падает до нескольких сотен пикселей. Последствия предсказуемы: фиксированная шапка и всплывающее окно вместе занимают весь экран, а до содержимого добраться нельзя.
Что мы проверяем в этом положении:
- Помещается ли всплывающее окно целиком и прокручивается ли оно, если не помещается.
- Не перекрывают ли фиксированные элементы кнопку отправки формы.
- Виден ли на первом экране хотя бы заголовок и часть следующего блока.
- Работает ли закрытие окон и меню — крестик не должен уезжать за пределы экрана.
Те же проблемы возникают на ноутбуках с невысоким экраном и у людей с включённым системным масштабированием, поэтому проверка окупается не только ради горизонтального телефона.
Как мы проверяем перед сдачей
Порядок проверки простой и не требует парка устройств.
- Плавно менять ширину окна браузера от 320 до 1920 пикселей и смотреть, где раскладка ломается. Именно плавно, а не переключением между заготовленными размерами: проблемы живут между ними.
- Открыть сайт на реальном планшете, а не только в режиме эмуляции — эмулятор не воспроизводит поведение касаний и клавиатуры.
- Повернуть телефон горизонтально и пройти основной сценарий до отправки заявки.
- Проверить масштабирование страницы до 150-200 процентов: это то, что видят люди с плохим зрением и владельцы экранов высокой плотности.
- Посмотреть сайт на большом мониторе целиком: не выглядит ли содержимое потерянным.
- Пройти основные страницы клавиатурой — на планшетах с клавиатурой это рабочий сценарий.
Что в итоге
Адаптивность — это не два состояния макета, а непрерывный диапазон, в котором сайт должен оставаться читаемым и управляемым. Промежуточные ширины дают меньше трафика, чем телефон и десктоп, но именно на них чаще всего теряются заявки: посетитель видит сломанную страницу и не разбирается, почему так вышло. Проверка всего диапазона занимает несколько часов и делается один раз при сдаче, а не после жалоб.
Если сайт выглядит собранным только на телефоне и на мониторе, мы приведём вёрстку в порядок по всему диапазону ширин или разработаем сайт, который одинаково работает на планшете, в половине окна и на широком экране. Начинаем с обзора текущего состояния на реальных устройствах.
