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

Все больше и больше людей используют смартфоны и планшеты для выхода в интернет. По данным исследования Mediascope, уже в 2021 году доля мобильного трафика в Рунете составила 61,5%. Поэтому адаптация сайта под мобильные устройства - необходимое условие для успеха любого онлайн-бизнеса. В этой статье мы разберем пошаговый процесс адаптации сайта под мобильные.

Что такое адаптивная верстка 

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

Адаптивный веб-дизайн развивался в 3 этапа:

1. Отдельные мобильные версии сайтов. С появлением мобильного интернета в начале 2000-х крупные компании начали делать отдельные мобильные сайты. Это дорого и сложно, примеров немного (напр. мобильная версия ВКонтакте).
2. Резиновая верстка. Она подстраивает ширину элементов под ширину экрана (указывая размеры в %, а не пикселях). Годится для простых сайтов, для сложных - элементы становятся мелкими и нечитаемыми.
3. Адаптивная верстка. Предполагает создание отдельных макетов сайта под разные экраны. Дизайнер рисует минимум 2 макета (десктоп и мобайл), верстальщик делает по макету на каждый вид устройств. Это и есть современная адаптивная верстка.

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

Самый простой способ проверить, адаптирован ли ваш сайт под смартфоны и планшеты - открыть его на этих устройствах.

Откройте сайт на реальных мобильных устройствах и оцените:

• Все ли элементы отображаются и работают корректно
• Легко ли попасть пальцем по ссылкам и кнопкам
• Не приходится ли много скроллить, чтобы увидеть основной контент
• Нет ли навязчивой рекламы на пол-экрана

Используйте онлайн-инструменты:

• Mobile Friendly Test от Google
• Проверка мобильных страниц от Яндекса (нужен добавленный сайт в Вебмастере)
• Эмуляция мобильных устройств в браузере через Инструменты разработчика

По рекомендации Яндекса применяйте минимум 2 способа для более достоверного результата.

Пошаговый процесс адаптации 

Шаг 1. Укажите мета-тег viewport в коде страниц. Он задает браузеру ширину области просмотра, равную ширине устройства. Без него мобильный браузер будет масштабировать сайт под свой размер экрана.

Шаг 2. Добавьте медиа-запросы в стили, чтобы менять дизайн блоков под разные размеры экрана:

• Показывать меньше колонок (4 на десктопе, 2 на планшете, 1 на смартфоне)
• Скрывать неважные блоки или прятать под спойлеры
• Увеличивать мелкий текст и кнопки
• Добавлять горизонтальный скролл широким таблицам

Шаг 3. Оптимизируйте основные элементы сайта:

• Упростите шапку, скройте меню под "гамбургер"
• В каталогах скройте фильтры под кнопку
• Уберите всплывающие окна на половину экрана

Шаг 4. Уменьшите объем загружаемых на смартфоны данных. Нет смысла грузить контент, который будет скрыт от мобильных пользователей. Это ускорит загрузку страниц, что критично на мобильных сетях.

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

При наличии желания, но недостатке опыта можно обратиться к профессионалам - в маркетинговое агентство "Webstripe", мы выполним адаптацию под ключ.

Адаптация сайта под мобильные устройства - это проявление заботы о своих пользователях. 53% посетителей уходят с сайтов, если те грузятся дольше 3 секунд. Адаптивный дизайн гарантирует удобство на любых устройствах, снижает показатель отказов и повышает конверсию. Как итог - рост позиций сайта в поиске и лояльности аудитории.

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