РБК Pro —  
информационный сервис для предпринимателей и управленцев. Первый месяц — бесплатно
РБК Pro
— сервис для вашего бизнеса. Зарегистрируйтесь и получите доступ ко всем материалам. Первые 30 дней бесплатно.

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

IT Инструкции RU-CENTER
По статистике Яндекс.Радар, более 50% пользователей пользуются интернетом со смартфонов, а Google уже несколько лет придерживается принципа mobile-first. Рассказываем, как адаптировать сайт под мобильные устройства и что учесть при разработке

Мобильная версия vs десктопная версия

Чем мобильная (адаптивная) версия отличается от десктопной (полной):

  • Страницы масштабированы под распространенные разрешения смартфонов (1792 x 828 для iPhone 11, 480 x 800 для Samsung Galaxy и других андроидов).
  • Пункты меню «спрятаны» в раскрывающийся список («бургер»).
  • На странице не больше 2–3 однородных блоков в ряд: карточки товаров, преимущества и др.
  • Используется крупный шрифт, так что текст хорошо видно, а по кнопкам и ссылкам легко попасть.
  • Применяется только вертикальная полоса прокрутки.
  • Формы на сайте (поля для ввода email, телефона, номера карты) легко заполнить.
  • Тяжелые элементы сайта (изображения, баннеры, всплывающие окна) оптимизированы в верстке, и сайт загружается 1–2 секунды.

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

  • Содержимое страницы или ее элементы обрезаются.
  • Элементы (меню, текст, кнопки) слишком маленькие, их трудно разглядеть и нажать.
  • Раскрывающиеся списки слишком длинные и выходят за рамки экрана.
  • Всплывающие элементы (поп-апы, чаты, реклама) закрывают большую часть страницы.

Проверить, встречаются ли эти проблемы на вашем сайте, можно одним из трех способов: