Представим прораба на объекте. Он стоит у штабеля кровельных листов, в одной руке телефон, на другой рабочая перчатка, и ему нужно быстро сверить толщину и покрытие с тем, что есть на сайте поставщика. На компьютере у поставщика прекрасная таблица характеристик в восемь колонок. На телефоне от нее остались узкие столбики, в которых цифры переносятся по одной.
Прораб пробует увеличить экран, таблица уезжает вбок, заголовки колонок теряются. Раздел с сертификатами, который на компьютере стоял сразу под таблицей, в мобильной версии кто-то когда-то скрыл, чтобы страница была короче. В итоге человек делает самое разумное в его положении: звонит менеджеру. Сайт формально адаптивный, просто пользоваться им с телефона почти невозможно.
Что значит адаптивный сайт
Адаптивный сайт перестраивается под ширину экрана: колонки встают друг под друга, меню прячется в кнопку, картинки уменьшаются. Тильда, по справке о мобильной версии, делает это для стандартных блоков автоматически. Но перестроить сетку — только половина задачи. Вторая половина в том, чтобы после перестройки человек мог сделать на сайте все то же самое, что и на компьютере.
Хорошо эту мысль формулирует W3C в пояснении к критерию 1.4.10 «Перекомпоновка»: содержимое должно показываться без потери информации и функциональности, без прокрутки в двух направлениях, при ширине, эквивалентной 320 CSS-пикселям. Любопытная деталь: эти 320 пикселей соответствуют экрану шириной 1280 пикселей при увеличении в 400%. То есть речь не только о телефонах, но и о людях, которые увеличивают страницу на компьютере, чтобы ее прочитать.
Сразу оговорюсь: прохождение этой проверки еще не делает сайт удобным. Это минимальная планка, после которой разговор об удобстве только начинается.
Таблицы и фильтры: что нельзя просто сжать
W3C прямо признает, что некоторый контент нельзя перестроить в одну колонку без потери смысла. Таблицы данных, карты, схемы, видео требуют двумерного расположения, и для них сделано исключение. Но исключение распространяется только на саму таблицу. Заголовок над ней, поиск, пагинация и текст вокруг все равно должны нормально перестраиваться, а саму таблицу W3C предлагает показывать в собственном прокручиваемом контейнере, чтобы вбок уезжала она, а не вся страница.
Для каталога это особенно заметно. Таблица характеристик на восемь колонок может остаться таблицей, но тогда первым столбцом стоит показать то, по чему человек ищет, и закрепить его. Иногда лучше работает другой формат: карточка, в которой характеристики идут списком «параметр — значение». Фильтры, которые на компьютере стоят колонкой слева, на телефоне обычно переезжают в отдельную панель, и хорошо, когда после выбора человек видит, сколько товаров осталось и как сбросить фильтр. Если каталог еще проектируется, такие решения проще заложить в структуру интернет-магазина сразу, чем потом подгонять под экран.
Скрыть блок — значит решить, что эта информация не нужна
В Тильде у блока есть настройка «Диапазон видимости на устройствах». По справке, она нужна, чтобы на смартфонах и компьютерах отображались разные блоки. Это полезная возможность: можно показать на телефоне упрощенную схему вместо широкой инфографики или другую компоновку первого экрана.
Опасность в том, что «показать другое» легко превращается в «не показать ничего». Блок скрыли, потому что он плохо смотрелся на телефоне, а замену так и не сделали. У W3C для этого есть отдельная формулировка ошибки: содержимое пропадает и становится недоступным после перекомпоновки. Мне кажется, каждый скрытый на телефоне блок стоит проверить простым вопросом: где мобильный посетитель теперь найдет эту информацию? Если ответа нет, сертификаты нашему прорабу так и не достанутся.
Телефон — не запасной экран
Если значительная часть посетителей приходит с телефона, мобильную версию лучше проектировать одновременно с основной: решать, как поведут себя таблицы, фильтры и формы, еще до того, как все это нарисовано для большого монитора.
Крупный текст и липкие элементы
Адаптивность проверяют обычно на одном телефоне с обычным размером шрифта. Но размер текста легко увеличить в настройках системы или браузера. В пояснении W3C отдельно говорится о связи с критерием 1.4.4: даже при перекомпоновке весь текст должно быть можно увеличить хотя бы до 200%. Кнопка, на которой надпись в одну строку помещалась впритык, при увеличенном шрифте обрезается или налезает на соседнюю.
Вторая частая проблема — закрепленные элементы. Шапка, плашка с телефоном, кнопка мессенджера, баннер с акцией по отдельности занимают немного места. На маленьком экране или при увеличении вместе они могут закрыть половину страницы. W3C настоятельно советует на узких экранах делать такие элементы обычными, незакрепленными, или давать пользователю их скрыть.
Как это устроено на Тильде
У стандартных блоков Тильды, по справке, есть отдельные настройки типографики и отступов для мобильной версии, а у части блоков еще и дополнительные мобильные настройки элементов. Если стандартной адаптивности не хватает, блок можно сконвертировать в Zero Block и настроить вид вручную на пяти диапазонах ширины экрана или на своих. Но справка предупреждает: после конвертации контент и дизайн возвращаются к настройкам по умолчанию, текст и изображения придется добавить заново. Есть и обратная крайность — галочка, которая отключает адаптивность, и тогда на телефоне страница выглядит так же, как на компьютере.
Еще одна деталь из той же справки: переключение вида в редакторе не является полноценным предпросмотром, некоторые блоки на опубликованной странице выглядят иначе. Поэтому мобильную версию я бы проверяла в предпросмотре и на настоящем телефоне, а лучше на двух разных. В моих проектах адаптив под все устройства входит по умолчанию. Смотреть на результат при этом полезнее всего глазами того самого прораба.
Ему, кстати, не нужен сайт, который на телефоне выглядит так же эффектно, как на мониторе. Ему нужно найти толщину листа и скачать сертификат, не снимая перчатку. Если это получается, мобильная версия сделала свою работу.