По статистике Яндекс.Радар, более 50% пользователей пользуются интернетом со смартфонов, а Google уже несколько лет придерживается принципа mobile-first. Рассказываем, как адаптировать сайт под мобильные устройства и что учесть при разработке
Мобильная версия vs десктопная версия
Чем мобильная (адаптивная) версия отличается от десктопной (полной):
- Страницы масштабированы под распространенные разрешения смартфонов (1792 x 828 для iPhone 11, 480 x 800 для Samsung Galaxy и других андроидов).
- Пункты меню «спрятаны» в раскрывающийся список («бургер»).
- На странице не больше 2–3 однородных блоков в ряд: карточки товаров, преимущества и др.
- Используется крупный шрифт, так что текст хорошо видно, а по кнопкам и ссылкам легко попасть.
- Применяется только вертикальная полоса прокрутки.
- Формы на сайте (поля для ввода email, телефона, номера карты) легко заполнить.
- Тяжелые элементы сайта (изображения, баннеры, всплывающие окна) оптимизированы в верстке, и сайт загружается 1–2 секунды.
Открывая неадаптированные сайты со смартфонов, посетители сталкиваются со следующими проблемами:
- Содержимое страницы или ее элементы обрезаются.
- Элементы (меню, текст, кнопки) слишком маленькие, их трудно разглядеть и нажать.
- Раскрывающиеся списки слишком длинные и выходят за рамки экрана.
- Всплывающие элементы (поп-апы, чаты, реклама) закрывают большую часть страницы.
Проверить, встречаются ли эти проблемы на вашем сайте, можно одним из трех способов:
