Разбираем, чем адаптивная вёрстка отличается от отдельной мобильной версии сайта, какие сценарии ломаются на маленьком экране чаще всего и на что обратить внимание при разработке.
Большая часть трафика на многих сайтах сегодня приходит с телефонов, но мобильная версия сайта до сих пор нередко получает меньше внимания на этапе разработки, чем десктопная. Разберём, что значит по-настоящему адаптивная разработка и какие сценарии обычно ломаются на маленьком экране.
Меню по статье
Адаптивная вёрстка vs отдельная мобильная версия
Исторически существовало два подхода: отдельная мобильная версия сайта на своём поддомене (m.site.ru) и адаптивная вёрстка, где один и тот же код перестраивается под разные экраны. Сегодня адаптивный подход почти всегда предпочтительнее — он не требует поддерживать две версии сайта параллельно и не создаёт риск, что контент на десктопе и мобильной версии разойдётся.
Что чаще всего ломается на маленьком экране
- таблицы и широкие блоки, которые не помещаются на узком экране без горизонтальной прокрутки;
- кнопки и поля форм, слишком маленькие для пальца, а не только для курсора мыши;
- всплывающие окна и меню, перекрывающие контент на маленьком разрешении;
- длинные тексты, которые на десктопе читаются легко, а на телефоне превращаются в бесконечную прокрутку.
Как проверить, что сайт действительно адаптивен
Формальная проверка «сайт растягивается под экран» — недостаточный критерий. Стоит пройти по сайту с телефона так, как это делает реальный посетитель: заполнить форму заявки, открыть каталог, нажать на все кнопки одним пальцем. Если на этом пути возникают заминки — сайт адаптивен формально, но не функционально, а именно функциональность на мобильных устройствах чаще всего влияет на конверсию.