Чтобы сайт хорошо отображался на экране компьютера, планшета и телефона, используют адаптивную вёрстку. Рассказываем о её особенностях и принципах.
Что такое адаптивная вёрстка сайта
Адаптивная вёрстка сайта — это способ обеспечить оптимальное отображение интерфейсов на устройствах с разным разрешением экранов. Вёрсткой занимается фронтенд-разработчик.
Адаптивный дизайн предусматривает, что пользователь будет взаимодействовать с кнопками, текстом, изображениями через разные устройства. Думает об удобстве пользователя в этом случае уже дизайнер.
У адаптивного дизайна длинная история. В ней можно выделить три этапа.
Этап 1: мобильные версии сайтов. Началось всё с появления интернета на мобильных устройствах в начале 2000-х годов. Как только появилась возможность выходить в интернет с телефона, крупные компании начали делать мобильные версии сайтов.
Мобильная версия — это отдельный сайт, созданный разработчиками с нуля и повторяющий целиком или частично десктопную версию. Её разработка дорогая и сложная, поэтому примеров не так много.
Самый известный пример — мобильная версия вконтакте, которая появилась в 2010 году и с тех пор развивается параллельно с основным сайтом.
На первой картинке — скрин из мобильного приложения вконтакте. На второй — мобильная версия сайта, которая открывается через браузер телефона
Для большинства компаний разработка мобильной версии оказалась слишком дорогой, поэтому с телефона сайты отображались некорректно. Например, пользователь видел на экране только часть интерфейса или его уменьшенную версию.
Так выглядит неадаптивный сайт: его отображение одинаково и на компьютере, и на телефоне
Аудитория пользователей мобильного интернета быстро росла: в 2015 году в России им пользовалось уже 40 млн человек. Появилась потребность сделать их пребывание на сайтах комфортным, но не затратным для компаний.
Этап 2: «резиновая» вёрстка. Следующим этапом на пути к адаптивному дизайну стала «резиновая» вёрстка и «резиновые сайты», в которых ширина всех элементов менялась при изменении ширины страницы.
Сайт становился «резиновым» благодаря разработчику, который указывал ширину элементов не в пикселях, а в процентах. Дизайнер разрабатывал для этого только один макет.
Так выглядит «резиновый» сайт: ширина карточек меняется по мере сужения экрана, но порядок их расположения сохраняется
«Резиновые» сайты лучше выглядели на экранах мобильных телефонов, если были простыми. Например, если кроме заголовка, картинок и текста в одну колонку на них ничего не было.
Если сайт был сложнее — например, элементы располагались не в одну колонку, а в пять, — на экране телефона всё становилось мелким и нечитаемыми. Поэтому «резиновые» сайты не решили проблему адаптивности до конца.
Этап 3: адаптивная вёрстка. После «резиновой» вёрстки появилась адаптивная. Её суть в том, чтобы не сжимать сайт под размеры экрана, а создать для каждого экрана отдельный макет.
Адаптивный сайт портала «Арзамас» — есть версия для компьютера, планшета и телефона. Всё это — три разных макета
При создании адаптивного сайта дизайнер рисует как минимум два макета: для десктопной версии и мобильной. Но может потребоваться и больше макетов, например для планшета или ноутбука с узким экраном. Фронтенд-разработчик тоже верстает не один макет, а несколько.
Материал по теме:
Как сделать продающий лендинг: советы продуктового дизайнера
Преимущества сайта с адаптивной вёрсткой
Сайты конкурируют за внимание и время пользователей. Хорошо, если человек долго находится на странице: читает текст, рассматривает картинки, выбирает товар или услугу.
Чем дольше пользователь взаимодействует с контентом, тем больше вероятность, что он совершит целевое действие. Например, позвонит и запишется на консультацию, купит товар, оставит отзыв. Адаптивный дизайн сайта делает любое действие доступным не только с компьютера, но и с телефона.
Кроме того, что адаптивная вёрстка сайта помогает компаниям удерживать клиентов, у неё есть ещё несколько преимуществ:
● Сайт выглядит аккуратно.
Сайты с адаптивным дизайном корректно отображаются на экранах с любым разрешением. При адаптивной вёрстке элементы не наползают друг на друга, не получаются слишком мелкими или крупными.
● Сайт удобен для разной аудитории.
В 2019 году пользователи одинаково часто заходили в интернет с телефонов и компьютеров. В 2022 году с телефонов заходит уже более 65% пользователей, с компьютеров и ноутбуков — около 30%, а с планшетов — 2%.
Доля визитов с разных устройств по данным Яндекс Метрики
Если сайт неудобно просматривать с телефона, пользователи уходят. Если сайт не адаптируется под экран мобильного телефона, есть риск потерять часть мобильных пользователей, которых сейчас большинство.
● Адаптивные сайты получают приоритет в поисковой выдаче.
Сайты конкурируют не только за внимание пользователей, но и за приоритет в выдаче поисковиков. Например, Google с 2019 года показывает в первую очередь те сайты, которые оптимизированы под мобильные устройства и корректно отображаются с них.
Принципы адаптивного дизайна сайта
В адаптивной вёрстке выделяют следующие принципы:
1. Контент десктопной и мобильной версии сайта дублируется. Всё, что пользователь может увидеть с компьютера, должно быть доступно и с телефона. Если какой-то информации не хватает в мобильной версии, придётся включать компьютер, искать сайт, а на нём — нужную информацию.
Чтобы не вынуждать пользователя совершать столько действий, дизайнер должен перенести всю информации из десктопной версии в мобильную, ничего не выбрасывая.
2. Дизайн не меняется. Шрифты, цвета, логотипы должны быть одинаковыми в десктопной и мобильной версиях. Например, если в десктопной версии сайта использован голубой цвет, не стоит делать главным цветом мобильной версии зелёный. Если пользователь уже заходил на сайт с компьютера, то не узнает его в телефоне и подумает, что неправильно ввёл запрос или попал не на тот сайт.
3. Сохраняется иерархия элементов. Иерархия заголовков, подзаголовков, текстовых блоков, иллюстраций и кнопок выстраивается на основе цели сайта.
Например, если на сайте продаются термокружки, нужно сначала рассказать о товаре, закрыть возражения и только потом разместить форму заказа. Цель сайта — продать товар, а целевое действие — оформление заказа.
Если десктопная версия свёрстана по логике «товар — возражение — заказ», при оптимизации под мобильные устройства нет смысла переносить блок с заказом на первое место. Это изменит путь пользователя и не подтолкнёт его к целевому действию.
4. Высота и ширина кликабельных элементов — не менее 44 пикселей. По десктопной версии сайта пользователь перемещается с помощью мыши. По мобильной версии можно перемещаться только с помощью пальца. Область нажатия — 44–48 пикселей. Если кнопка или знак подсказки меньше этих значений, пользователю будет сложно попасть по ним.
5. Функционал десктопного сайта повторяется. Если с компьютера доступны фильтры и разные режимы отображения товаров — например, списком и карточками, — в мобильной версии этот функционал должен быть повторён.
Если дизайнер урежет функционал, пользователь вряд ли выделит время, чтобы обратиться к десктопной версии. Скорее всего, он покинет сайт и найдёт решение своей проблемы у конкурентов с оптимизированным под мобильные устройства сайтом.
6. Число колонок уменьшается. При вёрстке десктопных сайтов обычно используют сетку из 12 колонок. Для узкого мобильного экрана столько колонок не нужно, обычно хватает одной, максимум четырёх. Для экрана планшета подойдёт сетка из шести или восьми колонок.
Когда дизайнер начинает адаптировать сайт под разные разрешения, ему стоит помнить про две вещи: компактность и наведение.
Компактность — это вертикальное расположение в мобильной версии карточек и других элементов, которые на десктопной идут в ряд. Это обосновано тем, что на компьютере просматривают контент слева направо, а на телефоне — сверху вниз.
На компьютере карточки идут по две или три в ряд. На телефоне рядов нет, карточки расположены одна под другой
Иногда такое расположение мешает пользователю перейти к важной информации. Например, когда карточки с отзывами находятся перед разделом с комментариями.
Чтобы пользователь мог быстро перейти к самому важному и интересному на сайте, при оптимизации сайта под мобильные устройства карточки можно прятать в горизонтальный скролл.
Элементы, активные при наведении, — это интерактивные подсказки, толкования слов и другие пояснения. В десктопной версии на мелкий знак вопроса около слова легко навести курсор, а в мобильной вообще нет механики наведения. Поэтому нужно продумать такой знак подсказки, чтобы он не занимал много места, но был понятен пользователю.
Разрешения экранов для адаптивной вёрстки
Основных разрешений для адаптивной вёрстки три:
1600 пикселей — для компьютеров;
960 пикселей — для планшетов;
375 пикселей — для телефонов.
Это усреднённые значения. Ширина может меняться в зависимости от сайта, идеи и технических особенностей. Ещё эти значения называют брейкпоинтами (от англ. breakpoint) — то есть разрешениями, при которых сайт меняет отображение на экране.
Например, пользователь заходит на сайт с ноутбука с шириной экрана 1280 пикселей, а потом вдвое сужает окно браузера. Как только ширина станет меньше 960 пикселей, отображение сайта поменяется.
По брейкпоинтам алгоритм на сайте определяет, какой шаблон выбрать для отображения
В популярном фреймворке разработчиков Bootstrap сейчас представлено шесть брейкпоинтов: 1920, 1200, 992, 768, 576 и 376 пикселей.
Пример адаптивного дизайна с учётом шести брейкпоинтов. Элементы одни и те же, но их расположение подстраивается под ширину экрана
Иногда дизайнеру требуется отрисовать все шесть макетов по требованию разработчика или заказчика, а иногда достаточно двух — для десктопной и мобильной версий. Промежуточный вариант для планшета фронтенд-разработчик может сделать самостоятельно, выбрав при вёрстке усреднённые параметры.
Выбор адаптивной вёрстки зависит и от задач сайта. Для лендинга с распродажей постельного белья достаточно двух версий. Сложному сервису со множеством фильтров, кнопок и других функций двух версий, скорее всего, не хватит. Лучше продумать три-четыре макета, чтобы убедиться, что все элементы доступны пользователю.
Инструменты для адаптивной вёрстки
Основной инструмент — это графический редактор Figma. Дальше название этого онлайн-сервиса будем писать кириллицей.
В фигме предусмотрены шаблоны для разных разрешений экранов, здесь они называются фреймами. Достаточно выбрать подходящий и расположить в рабочей области, а сервис сам задаст параметры ширины и высоты.
Попасть в раздел с фреймами можно из панели управления или с помощью горячей клавиши F
Как сделать адаптивный дизайн
В идеальном мире разработка адаптивного дизайна начинается со сбора аналитики. Если известно, откуда на сайт должны приходить пользователи, дизайнер может выбрать, с какой версии начать разработку.
Метод, когда мобильная версия создаётся раньше десктопной, называется Mobile First.
Ксения Крылова
В моей практике был случай, когда 90% покупателей посещали сайт с телефона. Мы взялись за его обновление и даже не думали над десктопом, а сразу перешли к мобильной версии.
Чаще всего адаптивный веб-дизайн начинается с десктопной версии, а потом дизайнер адаптирует её под разрешение телефона. Некоторые дизайнеры любят метод Mobile First и делают наоборот, но это вопрос вкуса.
Когда десктопная версия готова, сделать адаптивную вёрстку несложно. Для этого достаточно перенести все элементы на макет с нужным разрешением и пропорционально их уменьшить. Пункты меню и фильтры можно скрыть под кнопками.
При адаптации сайта для мобильных дизайнер последовательно переносит и уменьшает все элементы
Адаптированные элементы удобно проверять в режиме предпросмотра. В него можно попасть через кнопку в верхнем правом углу экрана.
Если какие-то элементы не помещаются на экран или выглядят несоразмерными интерфейсу, в режиме предпросмотра это можно заметить
Ошибки при разработке адаптивной вёрстки
❌ Сжатые изображения. При адаптивной вёрстке с фотографиями и иллюстрациями можно поступать двумя способами: кадрировать или пропорционально уменьшать.
При кадрировании изображение не сжимается. Пользователь начинает видеть часть изображения, а не всё целиком.
В этом примере изображение кадрируется по краям. При уменьшении экрана пользователь видит только центральную часть
При пропорциональном уменьшении части изображения не отсекаются — вся картинка становится мельче.
Чем уже экран, тем меньше изображение
Проблема возникает, если на изображении есть текст, но оно не кадрируется, а пропорционально уменьшается. Текст сжимается вместе с картинкой и становится нечитаемым.
За визуальные элементы сайта отвечает дизайнер, поэтому он должен следить за корректным кадрированием или сжатием изображений. Если картинка отображается некорректно, об этом нужно сообщить разработчику.
❌ Мелкий кегль. Кегль шрифта — размер буквы по вертикали в пикселях. На десктопных версиях сайтов обычно используется кегль от 16 до 18 пикселей, а подписи к фотографиям можно сделать кеглем 14 или 15.
При просмотре сайта с телефона кегли 14 и 15 выглядят слишком мелкими, и пользователю приходится растягивать пальцами экран, чтобы прочитать текст.
Ксения Крылова
В мобильной версии я не советую уменьшать кегль. Наоборот, лучше сделать его немного больше, если это уместно.
❌ Мало места для заголовков. Иногда разработка адаптивного дизайна начинается ещё до того, как для сайта написаны все тексты. Поэтому дизайнер может ошибиться, когда будет проектировать области заголовков и подзаголовков.
Есть риск заложить для них мало места — например, всего одну строку или две, но неполных. Если текст не влезет, придётся двигать все элементы макета и менять их расположение.
Ксения Крылова
Рекомендую оставлять для заголовков больше места и ставить в текстовые блоки длинный «рыбный» текст.
❌ Длинные строки. Проблема длинных строк появляется, если дизайнер работал по методу Mobile First. У мобильного телефона узкий экран, а контент часто располагается в одну колонку. Поэтому дизайнер может занять текстом всю ширину колонки, оставив только небольшие поля.
Если после этого дизайнер переходит к разработке десктопной версии, он может случайно или специально растянуть текстовый блок так же — по всей ширине экрана. Но если для мобильной версии такой вариант годится, то для десктопной — нет.
На широком экране строка получается слишком длинной, и её неудобно читать. Взгляд сначала долго двигается по одной строке, а потом долго перемещается из её конца в начало следующей. В итоге чтение занимает больше времени и требует больше внимания.
Идеальная длина строки для десктопных сайтов — 60–70 символов с пробелами. А если это мобильная версия, лучше не делать строки длиннее 40–60 символов.
Совет эксперта
Ксения Крылова
Иногда у дизайнера возникает соблазн сделать макет для одного разрешения экрана и понадеяться, что разработчики сами соберут адаптивные версии. Но это не задача разработчиков: они могут провести адаптацию по шаблонам, не задумываясь об удобстве пользователя. Поэтому, даже если этот момент не оговорён, всегда делайте две версии ключевых страниц — для мобильного и для десктопа.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
