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

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

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

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

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

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

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