Ещё два года назад мобильная версия сайта была приятным дополнением. Сегодня смартфон – основной экран, с которого пользователь впервые встречается с компанией или ведомством. Доля мобильного трафика в Рунете уверенно перевалила за четверть и продолжает расти двузначными темпами. Это меняет порядок проектирования: не «сначала десктоп, потом подгоним под телефон», а наоборот. Подход mobile-first из идеи Люка Вроблевски превратился в производственный стандарт, и игнорировать его – значит закладывать переделку в смету проекта заранее.

Что меняет mobile-first на практике

Mobile-first – это не уменьшенная копия десктопа. Это другая логика проектирования. Вы стартуете с самого жёсткого ограничения: маленький экран, медленный канал, палец вместо курсора. На этом фоне приходится отбрасывать второстепенное и оставлять то, ради чего пользователь пришёл. Дальше интерфейс расширяется под планшет и десктоп через медиазапросы CSS3 – этот приём адаптивной вёрстки описал ещё Итан Маркотт в 2010-м, и сейчас он опирается на достаточно зрелую поддержку браузеров.

Технически за этим стоят гибкая сетка в процентах, резиновые изображения и точки перелома, привязанные к контенту, а не к моделям устройств. Гнаться за конкретными разрешениями iPhone или Galaxy бессмысленно – линейка устройств меняется каждый квартал. Один отзывчивый шаблон обслуживает весь парк: и пятидюймовый смартфон, и десятидюймовый планшет, и широкий монитор.

Почему это вопрос денег, а не эстетики

Альтернатива адаптиву – отдельный мобильный сайт на поддомене m. Звучит просто, но на дистанции это два кода, две команды, два бэклога и постоянное расхождение контента. Адаптивная вёрстка убирает дублирование: один URL, один набор данных, одна точка правок. Для SEO это тоже выгоднее – поисковики уже прямо рекомендуют единый адрес вместо разведённых версий.

К отдаче трафика добавляется производительность. Мобильный канал в регионах далёк от идеального, и тяжёлая десктопная страница, втиснутая в телефон, отпугивает посетителя за первые секунды. Mobile-first дисциплинирует: вы изначально считаете вес страницы и число запросов. О том, как растущие объёмы пользовательских данных превращаются в управленческий ресурс, мы писали в материале про переход от хранения к аналитике больших данных – мобильная аналитика здесь часть той же картины.

Госсектор: уже не пожелание, а ориентир

Для государственных сервисов мобильный доступ перестал быть бонусом для продвинутых. Гражданин записывается к врачу и проверяет штрафы с телефона в транспорте, а не за рабочим компьютером. Мы разбирали этот сдвиг в обзоре мобильных госуслуг, и за прошедшие месяцы тенденция только усилилась. Портал, который на смартфоне требует масштабирования двумя пальцами, де-факто недоступен значительной части аудитории – а для госуслуги это прямой провал по охвату.

В наших прогнозах на 2014 год мобильный приоритет шёл первым пунктом, и старт года это подтверждает. Заказчики всё чаще приходят с готовым требованием: адаптив по умолчанию, в техническом задании, а не «на втором этапе».

Вывод

Mobile-first – это не дань моде, а способ строить продукт под реальное поведение пользователя и не платить дважды за переделку. Проектируйте интерфейсы с малого экрана, держите единый код и считайте вес страниц с первого дня. Если планируете запуск или редизайн, начинайте с адаптивного интерфейса под мобильные устройства, а не достраивайте его потом. В 2014 году это уже не конкурентное преимущество – это входной билет.