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

Мобильный трафик — не будущее, а настоящее

У большинства B2B-сайтов от половины визитов приходит со смартфонов — из мессенджеров, рекламы, писем. Сайт, который «красиво выглядит на мониторе» и разваливается на телефоне, отдаёт этих клиентов конкурентам. Адаптивность — это не опция в смете, а базовое качество.

Контрольные точки и сетка

Мы верстаем от мобильного экрана к большому: сначала убеждаемся, что минимальная версия работает, затем наращиваем колонки и детали. Контрольных точек обычно три-четыре — их количество не важно, важно, что между ними нет «мёртвых зон». Типографика меняется не абстрактно, а под читаемость на каждом экране.

Скорость как часть дизайна

Адаптивность — это и вес страницы. Телефон в мобильной сети не простит четыре мегабайта картинок и три библиотеки шрифтов. Лёгкие форматы изображений, ленивая загрузка, минимум блокирующих скриптов — всё это часть адаптивного дизайна, а не отдельная забота.

Проверка на реальных устройствах

Эмулятор — для разработки, устройство — для приёмки. Дешёвый Android в медленной сети покажет больше проблем, чем самый быстрый ноутбук. Мы принимаем вёрстку на реальном наборе устройств, включая самые массовые модели — именно на них сидит большинство аудитории.

Итог

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