Адаптивные версии сайта: сколько делать и каких размеров

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

Адаптивный дизайн подстраивается под ширину экрана устройства. Один и тот же сайт должен корректно отображаться на больших мониторах, ноутбуках, планшетах и смартфонах.

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

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

В рамках урока отдельно рассматриваем два подхода.

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

Отдельная мобильная версия может существовать как самостоятельная версия сайта, например на отдельном поддомене. В таком случае её содержимое при необходимости можно сильнее сокращать и перерабатывать.

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

Адаптивные версии удобнее проектировать последовательно: сначала десктоп, затем более узкие разрешения и в конце мобильную версию.

Так проще контролировать изменения типографики, размеров и композиции.

Если на определённой ширине заголовок пришлось уменьшить, то на следующем, ещё меньшем разрешении не стоит снова увеличивать его без необходимости.

Количество таких переключений лучше минимизировать. Чем меньше лишних изменений размеров одних и тех же элементов, тем понятнее и проще будет дальнейшая вёрстка.

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

В адаптивной версии меняются:

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

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

При уменьшении интерфейса важно не сделать кликабельные элементы слишком маленькими.

В рамках курса ориентируемся на область взаимодействия примерно от 40 px. Это относится к кнопкам, меню, иконкам и другим элементам, по которым пользователь нажимает пальцем.

Даже если сама пиктограмма визуально небольшая, вокруг неё должна оставаться достаточная зона для комфортного нажатия.

Адаптивные версии должны восприниматься как один и тот же сайт.

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

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

Меняется композиция, но не дизайн-язык проекта.

Для многих лендингов со стандартной рабочей областью около 1100–1200 px достаточно подготовить:

• десктопную версию 1920 px;
• мобильную версию 510 px с рабочей областью около 480 px.

Отдельный вариант под ноутбук в таком случае часто не требуется.

Если основная сетка спокойно помещается в экран шириной около 1366 px и важные элементы не обрезаются, десктопный макет может корректно использоваться и на ноутбуке.

Нужно лишь заранее учитывать, что боковые области экрана будут меньше.

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

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

Можно заранее поставить дополнительные направляющие под ширину около 1366 px и убедиться, что ключевая часть изображения остаётся видимой.

Так дополнительного адаптива иногда удаётся избежать ещё на этапе проектирования.

В рамках курса основной десктопный макет создаём под 1920 px.

Если разработать всю страницу только под 1440 px, то на Full HD-мониторе по краям появится дополнительное пространство, которое всё равно необходимо будет правильно оформить.

Особенно это заметно в дизайнах со сложными фоновыми композициями, полноэкранными изображениями и декоративными объектами.

Поэтому даже при рабочей сетке 1100–1440 px сам Frame десктопной версии лучше проектировать с учётом ширины 1920 px.

Ситуация меняется, если рабочая сетка значительно шире.

Например, при модульной сетке около 1440 px макет уже не помещается в экран ноутбука шириной около 1366 px. В этом случае часть контента действительно может обрезаться.

Тогда необходимо подготовить дополнительную версию с более узкой рабочей областью, например около 1100 px.

То есть количество адаптивов зависит не только от размера устройства, но и от выбранной сетки конкретного проекта.

Следующей промежуточной точкой может стать планшет, например шириной около 768 px.

Она особенно полезна, если между ноутбучной и мобильной версиями интерфейс должен существенно перестроиться.

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

Решение принимается по конкретному проекту, а не по формальному правилу «для каждого устройства нужен свой макет».

Простая структура адаптируется легче.

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

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

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

В практическом примере исходная версия имеет широкую сетку. Поэтому для промежуточного состояния приходится не только изменить рабочую область, но и скорректировать ширину самого Frame.

Например, под ноутбук можно оставить макет шириной 1440 px, но использовать внутри более узкую сетку около 1100 px.

Фоновые элементы при этом растягиваются на всю ширину Frame, а основной контент остаётся внутри нового контейнера.

Так сложный фон продолжает выглядеть цельно, а информация помещается в доступную область.

После ноутбучного варианта можно подготовить версию 768 px.

Здесь рабочая область становится ещё уже, поэтому карточки, текст и другие группы начинают сильнее перестраиваться.

В простых блоках достаточно уменьшить ширину карточек и изменить количество колонок. Сложные фоны и декоративные композиции потребуют отдельной ручной настройки.

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

Нет необходимости сразу рисовать большое количество адаптивов «на всякий случай».

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

Тогда дизайнер локально дорабатывает нужное состояние и при необходимости подготавливает обновлённую нарезку.

Так работа строится от реальной потребности, а не от попытки заранее предусмотреть абсолютно все существующие устройства.

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

Поэтому при работе в ограниченные сроки полезно заранее оценивать, насколько легко выбранная композиция сможет перестраиваться.

Иногда стоит немного упростить декоративное решение, если это позволит значительно быстрее подготовить остальные разрешения и реализовать сайт.

Особенно это актуально для лендингов, которые часто требуется запустить в сжатые сроки.

На этапе адаптива особенно важно взаимодействие дизайнера и верстальщика.

Даже тщательно подготовленный макет невозможно идеально предусмотреть для каждого промежуточного значения ширины. Уже в процессе реализации могут появиться точки, где потребуется дополнительное дизайнерское решение.

В таком случае верстальщик обозначает проблемное разрешение, а дизайнер показывает, как должен перестраиваться конкретный блок.

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

Домашнее задание