Адаптация сайта под мобильные устройства: основные подходы и примеры

Адаптивный сайт — это интернет-проект, который хорошо воспринимается на экране компьютера, планшета, смартфона. Он сохраняет иерархию блоков, баланс и читаемость при любых параметрах экрана.

Для чего нужна адаптация

По данным сервиса Яндекс Радар, в России около 70% визитов пользователей приходится на мобильные устройства, и эта доля продолжает расти.

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

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

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

Поисковые системы и ранжирование

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

Влияние на конверсию

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

Рекламные кампании

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

Принципы адаптации

Адаптивный веб-дизайн эволюционировал в несколько этапов. Сначала макеты создавались исключительно под десктопы. С появлением первых смартфонов некоторые компании разрабатывали две версии сайта: для компьютеров и мобильных устройств. Затем пришла очередь «резиновой» вёрстки. Сейчас актуальна адаптивная вёрстка. Коротко расскажем о каждом этапе адаптации сайтов для мобильных устройств.

Отдельные версии для смартфонов и компьютеров

Этот принцип практиковался в 2000-х годах. Мобильная версия обычно имела отдельный URL. По сути, это второй сайт, который полностью или частично повторял формат для компьютера и учитывал другой размер экрана. Разработка была довольно сложной, её могли позволить себе только крупные проекты.

«Резиновая» вёрстка

Когда пользователи стали массово использовать смартфоны, разработчики придумали более простой способ адаптации интернет-проектов. Макет становится «резиновым», если в коде ширина элементов интерфейса указывается не в пикселях, а в процентах. Меняется ширина видимой области — меняется ширина блока.

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

Адаптив

Адаптивная вёрстка на базе HTML и CSS в том виде, в каком она существует сейчас, получила распространение больше 10 лет назад. Принцип в том, что разработчик создаёт как минимум два макета одного сайта: для десктопа и смартфонов. Иногда нужны и дополнительные макеты для телевизоров, планшетов и телефонов с нестандартными пропорциями и разным размером экрана.

Мобильные приложения

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

Минус в том, что раскрутка приложения требует дополнительных маркетинговых усилий и не всегда окупается. Нужно мотивировать пользователя скачать и установить приложение на телефон. При этом сайт всё равно надо адаптировать для смартфонов. Ведь важно, чтобы у мобильного пользователя был выбор: заходить через браузер или пользоваться приложением.

Основные принципы адаптивного дизайна

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

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

• Удобство юзабилити, достаточно крупные кликабельные элементы на телефоне. Если кнопка слишком маленькая (меньше 44 пикселей), в неё сложно попасть пальцем.
• Использование векторных и растровых форматов изображений. Для иконок и декоративных элементов подходит векторный формат SVG. Для фона и контентных изображений используются PNG, JPG, WEBP и другие привычные растровые форматы. Для разных блоков подбирается своё изображение нужного размера.
• Версия для телефона должна быстро загружаться. Критичной считается скорость загрузки более 3 секунд.

Разрешения экранов для адаптивной вёрстки

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

Например, у нас три макета с определёнными диапазонами ширины области просмотра (в пикселях):

• 320–480
• 480–1 000
• 1 000–1 920

Если открыть страницу на широком десктопном экране, а потом сужать область просмотра, то при достижении брейк-пойнтов (1 000 пикселей, 480 пикселей) макет меняется.

Стандартные разрешения для адаптивной вёрстки (в пикселях):

• 1 600 — для десктопа и телевизора
• 960 — для планшетов
• 375 — для смартфонов

Это усреднённые значения, они зависят от дизайна и функционала. Макетов и соответствующих им брейк-пойнтов может быть больше, например 5–6.

Как сделать адаптивный дизайн

Если используется популярный конструктор сайтов, проект адаптировать не нужно. Страница автоматически подстраивается под устройство пользователя.

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

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

Desktop First или Mobile First

Сначала стоит решить, какая версия будет базовой — десктопная или мобильная (Mobile First). С технической точки зрения нет особых различий: можно начать с макета для смартфонов и потом преобразовать его для десктопов или сделать наоборот.

Проанализируйте нишу и конкурентов. Если преобладает мобильная аудитория (это актуально для большей части проектов), логичнее придерживаться принципа Mobile First. Если наоборот, то стоит сначала разработать версию для десктопа.

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

Метатег viewport

Когда десктопный макет готов, можно приступать к адаптации для смартфонов. Для этого надо уменьшить элементы, сохранив пропорции и нужный размер.

В HTML-код страницы вписывают метатег viewport, который отвечает за параметры (высота, ширина, масштаб) области отображения.

К метатегу viewport добавляются атрибуты:

• Width — ширина области просмотра. При значении device-width ширина соответствует размеру экрана.
• Height — высота области просмотра. Код device-height означает, что высота соответствует высоте экрана.
• Initial-scale — масштаб страницы.
• Minimum-scale — минимальный масштаб области просмотра.
• Maximum-scale — максимальный масштаб области просмотра.
• User-scalable — показывает, может ли пользователь пальцами масштабировать контент.

Пример использования метатега:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>

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

Стили

При вёрстке используются CSS3-медиазапросы. CSS3 — расширенная версия CSS, каскадной таблицы стилей, которая используется для стилизации и форматирования страниц. CSS3-медиазапросы позволяют применять особые CSS-стили для конкретных устройств и разного размера окна.

Вот пример:

.menu {display: block;}
@media (max-width: 400px) {
  .menu {display: none;}
}

В этом коде свойство display: block для menu означает, что блок меню отображается. Часть кода @media (max-width: 400px) означает, что, если ширина страницы меньше 400 пикселей, меню не показывается.

По этому же принципу в CSS вписываются другие правила, например отображение картинок, шрифтов и так далее.

Адаптивные изображения

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

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

Как адаптировать сайт для мобильных: методы и примеры

При адаптации сайта важно руководствоваться рекомендациями Яндекса. Чтобы страницами было удобно пользоваться со смартфона, нужно не только пропорционально уменьшить элементы, но и изменить интерфейс. Некоторые элементы стоит сделать более компактными. Вот что можно сделать для удобства пользователей:

• Преобразовать меню в шапке в меню формата «гамбургер». Оно выглядит как три полоски в правом или левом верхнем углу.

• Создать удобный модуль поиска и компактное меню каталога.

• Создать фильтр, которым удобно пользоваться даже на маленьком экране.

• Ссылки и другие кликабельные элементы сделать более крупными.

• На мобильном часть контента скрыть под ссылку «Развернуть» или «Читать ещё». При этом содержание страниц мобильной версии сайта не должно кардинально отличаться от контента основной версии сайта.

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

• Преобразовать шапку. Если переместить элементы шапки из горизонтали в вертикаль, то шапка будет слишком громоздкой и займёт половину экрана. Поэтому стоит сократить количество элементов или сделать их более лаконичными. Например, убрать блок переключения языков, а кнопки «Войти» и «Создать аккаунт» заменить одной кнопкой со значком входа.

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

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

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

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

Как проверить адаптивность сайта

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

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

Инструмент «Проверка страницы» в Яндекс Вебмастере поможет убедиться, что страницы адаптированы правильно. Чтобы воспользоваться сервисом, нужно добавить сайт в Вебмастер.

Преимущества и недостатки сайта с адаптивной вёрсткой

У адаптивных сайтов много преимуществ:

1. Универсальность. Такие проекты хорошо отображаются на телефонах, десктопах, телевизорах, планшетах с разным размером экрана. Необязательно создавать приложение или отдельную версию для смартфонов.
2. Удобство. Пользователям не приходится масштабировать контент, с сайтом легко взаимодействовать.
3. Повышается лояльность пользователей. Растёт конверсия по сравнению с показателями проекта, который не адаптирован для мобильных.
4. Оптимизация. При прочих равных условиях поисковые системы отдают предпочтение проектам, с которыми удобно взаимодействовать на любых устройствах. Адаптированный сайт может лучше индексироваться и ранжироваться в поисковой выдаче.

У адаптивного дизайна есть минусы:

1. Если у сайта много страниц, есть тяжёлые элементы (например, видео), он может оказаться недостаточно производительным для телефонов, время загрузки страниц увеличивается. Отдельная мобильная версия оптимизируется специально для смартфонов, она легче и производительнее.
2. Нужна помощь хорошего разработчика. Редко удаётся создать проект раз и навсегда. Через какое-то время могут всплыть ошибки, и их придётся исправлять. Или потребуются доработки под новые задачи. Впрочем, это касается почти любых интернет-проектов.

Итог

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

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

Дополнительные материалы