Mobile First или Desktop-нафиг?

Подход к разработке, превратившийся в профанацию

Владимир Завертайлов

Главный бармалей Сибирикс

Mobile First — идеология разработки интерфейсов, согласно которой изначально разрабатывается интерфейс сайта для разрешений мобильных устройств (смартфонов). И уже эти макеты в дальнейшем масштабируются под большие разрешения — планшеты и desktop-устройства.

Недавно я провел бесчеловечный эксперимент над людьми в области UI/UX. Попросил 10 человек найти по паре сайтов, сделанных по идеологии Mobile First. А затем выписать общее: что все эти сайты объединят. И объяснить, как они вообще поняли, что это Mobile First.

Список признаков Mobile First получился «внушительным»:

Этому сервису сайт изначально был не нужен / вторичен (в основном — вспомогательные сайты мобильных приложений. Пример — Самокат).
Карточные слайдеры в интерфейсах.
На Desktop сайт выглядит плохо (про 4К вообще молчим).

Всё.

Дальше конкретные вариации, что именно было плохо на desktop:

Гигантизм в шрифтах и картинках (например, блок сториз, расфигаченный на 4К будет выглядеть на 8 шакалов из 10):

Наоборот, всё мелкое и кургузое — и шрифты, и изображения:

«Бороды контента» (ну знаете, когда контент висит по центру страницы клинышком, а-ля бородка Феликса Эдмундовича):

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

Промоблоки на сайте вертикальной ориентации:

Наличие блоков, которые выглядят как из стандартного конструктора Тильды: блок залит фоном, растянут на всю ширину экрана, а по центру блока сиротливо висит немного контента. Всё скучное, одинаковое, одинаковое, одинаковое. Как под копирку:

Дисклеймер: да, уважаемый читатель. Я верю, что если ты проектируешь интерфейсы по Mobile First, то твои работы выглядят нормально везде. Я про другие, которые так не выглядят. Сайт Пумы или БургерКинга — вроде того.

Почему же так случилось, например?

Сложно сказать точно, кто конкретно накосячил. Но часть лавров явно принадлежит Люку Вроблевски, написавшему одноименную книгу (Mobile First). Книгу, естественно, мало кто читал (да и кто вообще сейчас читает книги?). Но термин хорошо разошелся по сети и прижился (об этом — ниже). Собственно, логика была очень простой:

1. Раз доля мобильного трафика растет (сегодня по некоторым темам уже более 70%)
и
2. Усложнять дизайн легче чем упрощать***
то
3. Давайте проектировать весь UI сначала на мобилку.

Логично? Логично! Хоть глупо, но логично.

Впрочем, «глупость» случилась несколько позднее:

«Переврайтеры» написали десятки статей, о том, как важно перейти в религию Mobile First. Что характерно, в таких статьях подчеркивается ВАЖНОСТЬ, но почти нигде нет ссылок на удачные примеры. И почему бы это?
Термин Mobile First хорошо был воспринят всеми теми, кто ищет серебряную пулю, но не любит думать и дочитывать до конца (привет паре моих знакомых маркетологов).

Тут-то и случилось печалька: десктоп начал делаться по методологии «Как получится» ©. Почему? Да потому, что чтобы десктоп выглядел хорошо, его почти наверняка нужно нарисовать отдельно! А это:

Деньги/сроки. Порой, это банально x2 работы.
Если десктоп все равно проектировать, какая тогда разница — Mobile First или Desktop? Еретичность, епрст.

Самое интересное, что на практике хороший фронтендер в состоянии сделать из desktop нормальный responsive в 90% случаях. Приёмы и ходы известны и давно изучены, а руки на этом деле уже набиты. Технология отработана. В остальных 10% всё же нужно будет взять дизайнера и нарисовать две отдельные версии. Как правило, это пара-тройка супер-важных страниц на проекте (вроде карточек товаров).

А вот обратное — НЕВЕРНО. Нормальный фронтендер вряд ли наколдует кайфовый Desktop-интерфейс из Mobile First-версии, т.к. все поломано уже шагом ранее (см. пункт № 2 с тремя звёздочками, парой абзацев выше).

Заметим также, что Вроблевски не имел в виду, что Desktop не будет проектироваться вообще. Просто так исказилась его мантра «Mobile First» в бесконечных пересказах и попытках экономии бюджета. Mobile First превратился в Desktop-нахер.

То же самое порой происходит в некоторых головах с Manifesto for Agile Software Development, невзирая на дисклеймер: «That is, while there is value in the items on the right, we value the items on the left more». Раз работающий продукт важнее исчерпывающей документации — нафиг её, эту документацию.

Итого:

1. Mobile First вполне себе может превратиться в профанацию «Desktop-нафиг». Или, как говорили в тех местах, где я вырос — кроилово ведет к попадалову;
2. Вообще-то до профанации подразумевалось, что Desktop тоже проектируется. Но есть ли тогда разница, что будет первым: курица или яйцо?
3. Нормальный фронтендер может сделать конфетку для Mobile в 90% случаях самостоятельно. Остальные 10% — нужно проектировать. Обратное — неверно.
4. Нормально делайте — нормально будет. Это важно!

Больше полезного — в блоге Владимира Завертайлова в Telegram.