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

Что такое адаптивный сайт

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

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

По данным сервиса Яндекс Радар, в России около 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 вписываются другие правила, например отображение картинок, шрифтов и так далее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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