Desktop only, desktop+adaptive, desktop+responsive и mobile-first: в чем разница, как выбрать и как работать?

Дисклеймер: оставайтесь с нами и читайте данный материал, если задаетесь вопросами: 

• почему одни начинают разработку с мобильной версии сайта, другие — с ПК? 

• с чего подрядчики взяли, что вам нужен именно адаптивный, а не респонсивный дизайн — вам ведь за это доплачивать? 

• почему настолько дороже и что со сроками, если для каждого устройства будут рисовать, а потом еще и программировать отдельный макет? 

• и главное — окупится ли? 

Все, кто хотели, ушли? Теперь поговорим:

1. Разберем разницу подходов.

2. Посмотрим базовые практические советы по разработке.

3. Посчитаем, сколько стоит (и стоит ли оно того).

4. Заберем чек-лист, который поможет определить нужный подход к разработке вашего сайта, спланировать бюджет и вести более конкретные переговоры. Достаточно будет выделить 5 минут и пройтись по основным пунктам чек-листа. Чек-лист находится в самом последнем предложении статьи (да, вы можете просто перемотать).

Поехали!

Для начала, вот несколько фактов от команды Google:

• более 67% запросов в Google поступают с мобильных устройств

• около 53% пользователей покинут ваш сайт, если он не оптимизирован для мобильных устройств и загрузка страницы займет больше трех секунд

• от 40 % рост конверсии продуктов отмечают компании, которые внедрили mobile-first

Но когда именно — в каком проекте, в какой нише — стоит начинать с мобильной версии, а когда достаточно обойтись классическим десктопом и подвязать к нему респонсивный или адаптивный дизайн?

Краткий обзор ключевых вариантов разработки проекта: desktop only, desktop+adaptive, desktop+responsive и mobile-first

Desktop-first — традиционная модель, где сайт разрабатывается сначала для десктопных устройств, и только затем адаптируется (или не адаптируется вовсе) под мобильные. К десктопной разработке в договор, как правило, дописывается либо респонсивный, либо адаптивный дизайн.

Плюсы desktop-first: быстрая разработка, четкая функциональность, пониже стоимость (на 15-20%).

Минусы desktop-first: плохой UX на мобильных устройствах, просадки по SEO-трафику.

Что делать, когда нужна мобильная версия, но не супер-дорогая?

Здесь к desktop-first подключаются adaptive или responsive design.

Responsive design или респонсивный дизайн  — это один гибкий макет для всех устройств. Создается один макет, который автоматически подстраивается под любое устройство. Этот подход использует подвижные сетки и медиа запросы, что делает сайт гибким для всех разрешений экранов. 

Плюсы responsive design: экономия времени и ресурсов, универсальность. 

Минусы responsive design: ограниченная оптимизация, ограниченная кастомизация, меньше контроля над версиями. 

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

Adaptive design или адаптивный дизайн — параллельная разработка для нескольких экранов и типов устройств: ноутбуков, планшетов, смартфонов. UX/UI-дизайнеры рисуют для стандартных разрешений — 320 px, 480 px, 768 px, 960 px, 1200 px, 1600 px. А разработчик ставит контрольные точки, по которым определяется: с какого именно устройства зашел пользователь. Пользователь видит нужную версию сайта.

Плюсы adaptive design: индивидуальная оптимизация, контроль, высокий уровень технической оптимизации.

Минусы adaptive design: более высокая стоимость, сложность в поддержке.

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

Mobile-first, или когда весь приоритет на мобильные устройства

Mobile-first — это подход, при котором разработка начинается с мобильной версии сайта, а затем адаптируется под более крупные экраны. В отличие от desktop-first, здесь основной акцент делается на создании удобного и быстрого UX для мобильных пользователей.

Плюсы mobile-first: оптимизация UX для мобильных, рост конверсий, SEO-преимущества. 

Минусы mobile-first: высокая стоимость (на 15-20% дороже desktop-first), требовательность к ресурсам.

Когда выбрать mobile-first? Подход оправдан, если основной трафик на сайте идет с мобильных устройств. Он идеален для интернет-магазинов, маркетплейсов, платформ доставки и любых проектов, где важно удобство мобильных пользователей. Да, он дороже, но в долгосрочной перспективе затраты окупаются за счет роста конверсий и улучшения пользовательского опыта.

Техническая сложность разработки mobile-first: почему за проект вы платите / получаете минимум на 15% больше

Давайте просто пройдемся по пунктам, оправдывающим все затраты:

• начинаем «с малого». Мобильный пользователь ожидает одновременно простоты, удобства и скорости — и все это на миниатюрном экране, поэтому важно сразу заложить все необходимые элементы, чтобы сайт был интуитивно понятен и легко доступен.

• загнали в рамки… На мобильных устройствах нужно разместить ключевые элементы так, чтобы они были легко доступны и не перегружали интерфейс. Пространство крайне ограничено.

• оптимизатор года. Каждый элемент сайта должен быть адаптирован для маленьких экранов, включая текст, изображения, кнопки и меню. И при этом не потерять ни пикселя в качестве. Разработчик следит за каждым элементом, вылавливая баланс.

• нам не удобно. Мобильные пользователи взаимодействуют с сайтом с помощью сенсорного экрана и пальцев — не мышкой. Размер кнопок, отступы, взаимодействие с формами — буквально все выглядит иначе.

• тестируем, тестируем и еще раз тестируем. Разработка mobile-first требует множества итераций тестирования на реальных устройствах, на всех типах экранов и операционных системах. + часы работы тестировщиков.

Слушаете Яндекс.Музыку? Компания использует mobile-first подход и тратит огромные ресурсы на одно только UX-тестирование.

Особенности проектирования mobile-first: базовые практические советы

Отмечу, они подойдут только для «чайников». Если будет запрос — мои дизайнеры и маркетологи, а также разработчики готовы выкатить подробный гайд, как они работаю и что делают, расписывая не просто пошагово, а посекундно. 

Базовые вещи — как раз то, что забывается (и на что забивается, если не дергать).

1. Фокус на содержании: покажите важное сразу

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

А что по примерам?

• Корзина и меню на видном месте: На сайте доставки еды такие элементы, как корзина и календарь для выбора даты доставки, должны быть легко доступны. Они не должны скрываться в сложных меню или находиться на втором экране. Пользователь должен с минимальными усилиями совершить покупку или оформить заказ.

2. Минимализм и упрощение: удобство на первом месте

Один из ключевых принципов mobile-first — это минимализм. Мобильные экраны ограничены, поэтому перегружать интерфейс ненужными элементами — ошибка. Нужно сосредоточиться на простоте и удобстве взаимодействия, убрав все, что может отвлечь или усложнить использование.

Совсем со своим минимализмом, где старые-добрые 1000 и 1 кнопка?

• Сделайте так, чтобы пользователи могли легко перемещаться по сайту. Используйте простые и интуитивные кнопки. Например, фиксированные нижние панели навигации позволяют пользователям быстро перемещаться по разделам сайта.

3. Оптимизация под разные устройства: тестирование и адаптация

Хотя mobile-first ориентирован на мобильные устройства, важно учитывать, что сайт будет использоваться на самых разных устройствах с различными размерами экранов — от небольших смартфонов до планшетов. Поэтому нужно провести тестирование и адаптировать сайт для всех возможных разрешений.

И что, на кирпичах нокиа этот дизайн высматривать?

• Да! Проверяйте, как сайт выглядит и работает на устройствах с разными разрешениями экранов. Не забывайте протестировать сайт на старых моделях смартфонов, где производительность может быть ниже.

4. Скорость загрузки: критический фактор

Мобильные пользователи ожидают быстрой загрузки страниц. 53% пользователей покидают сайт, если его загрузка занимает больше трех секунд. Чтобы снизить процент отказов, важно оптимизировать все элементы сайта, начиная от картинок и заканчивая кодом.

Делать-то что? Вы и сами знаете:

• Сжимайте изображения: Используйте сжатые версии изображений для мобильных устройств, чтобы минимизировать вес страниц и ускорить загрузку.

• Минимизируйте код: Оптимизируйте CSS и JavaScript, чтобы ускорить рендеринг страниц на мобильных устройствах.

5. Удобство взаимодействия с формами

Мобильные пользователи часто сталкиваются с неудобствами при вводе данных на маленьком экране. Формы должны быть максимально простыми и интуитивно понятными, чтобы пользователь мог легко и быстро их заполнить.

А если мне все поля нужны? Да все равно:

• Минимизируйте количество полей: Сократите количество полей в формах до минимально необходимого, чтобы пользователь не отвлекался и быстрее завершил процесс.

• Автозаполнение: Или реализуйте возможность автозаполнения, чтобы пользователи могли быстрее вводить данные.

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

«Посчитайте, сколько будет стоить mobile-first в моем проекте»

Без данных о вашем проекте расчеты будут «пальцем в небо». Хотите точную стоимость — нужно поговорить с агентством, рассказать им о проекте и попросить точные расчеты по этапам. 

А сейчас мы можем показать пример. Предположим, что вы заказываете разработку корпоративного сайта для интернет-магазина с расчетной стоимостью проекта для desktop-first подхода. Возьмем следующие примерные цифры:

• Стоимость разработки desktop-first: $30,000

• Стоимость разработки mobile-first: $42,000

Почему дороже?

• 20% времени на разработку UX мобильной версии (с маркетингом, копирайтингом, работой UX/UI-дизайнеров) = $5,000 (20% от общего бюджета на UX-дизайн)

• 10% тестировщикам = $3,000

• 15% разработчикам = $4,000

Итого:

$30,000 + $5,000 + $3,000 + $4,000 = $42,000

Обратите внимание: здесь выходит +40%, но вы получаете две полноценно разработанные версии сайта — мобильную и десктопную.

«+40% — почему так дорого, где гарантии, что я не зря дал вам 42 000$?»

Давайте докажем окупаемость дополнительных вложений в mobile-first разработку расчетами, опять же, прогнозными

Исходные данные:

• Стоимость разработки desktop-first: $30,000

• Стоимость разработки mobile-first: $42,000 (на 40% дороже)

• Ежемесячный мобильный трафик (среднее значение): 50,000 посетителей

• Конверсия для desktop-first: 2% (по данным Google, средняя мобильная конверсия для сайтов, не оптимизированных под mobile-first)

• Средний чек: $50

• Прогнозируемая конверсия для mobile-first: 2,8% (на основе исследования, что компании, внедрившие mobile-first, увеличили мобильные конверсии на 40%)

• Ожидаемое снижение процента отказов на mobile-first: 15% (благодаря улучшенному UX)

Выручка при desktop-first:

При desktop-first сайт конвертирует 2% посетителей в покупателей:

• 50,000 посетителей × 2% конверсии = 1,000 покупателей

• 1,000 покупателей × $50 средний чек = $50,000 выручки в месяц

Выручка при mobile-first:

При mobile-first конверсия увеличивается до 2,8% (на 40% выше):

• 50,000 посетителей × 2,8% конверсии = 1,400 покупателей

• 1,400 покупателей × $50 средний чек = $70,000 выручки в месяц

Разница в выручке:

• $70,000 (mobile-first) − $50,000 (desktop-first) = $20,000 дополнительной выручки в месяц

Срок окупаемости дополнительных затрат:

Теперь посчитаем, за сколько месяцев окупятся дополнительные вложения в разработку mobile-first:

• Дополнительные затраты на mobile-first: $42,000 − $30,000 = $12,000

• Дополнительная выручка в месяц: $20,000

Таким образом, дополнительные затраты на разработку mobile-first ($12,000) окупятся уже за 1 месяц работы сайта.

Ожидаемая прибыль за год:

• Дополнительная выручка: $20,000 × 12 месяцев = $240,000 в год

Итак, за первый год использования mobile-first сайта бизнес может получить до $240,000 дополнительной выручки, что значительно превышает начальные затраты на разработку.

Фух, (выдох) вывод:

Дополнительные вложения в mobile-first разработку ($12,000) окупаются за 1 месяц, а в течение года компания может увеличить выручку на $240,000 за счет повышения конверсий и снижения отказов. Это гипотетический пример, но он наглядно демонстрирует, как mobile-first разработка может приносить долгосрочные выгоды и быстро окупаться.

Мы не ярые противники desktop-first: иногда предпочтительно начинать с десктопной версии — по опыту CEO Ninen

Хотя mobile-first активно продвигается как стандарт для большинства проектов, есть ниши, где desktop-first остается актуальным и даже предпочтительным — это только мое мнение, основанное на опыте. Для некоторых отраслей и типов проектов десктопная версия имеет решающее значение.

Когда desktop-first актуален:

• Мобильная версия вторична. Типично для компаний, где мобильный доступ носит скорее вспомогательный характер — например, когда пользователи проверяют статус задач, но не выполняют сложные операции с мобильных устройств.

• Работа с большими объемами данных. Системы, которые обрабатывают и визуализируют большие объемы информации, лучше функционируют на настольных компьютерах с их большими экранами и высокой производительностью.

• Сложные системы и интерфейсы Если проект включает сложные интерфейсы с множеством элементов управления (например, аналитические платформы, финансовые системы, системы управления производством), desktop-first может быть наиболее оптимальным решением.

• Основной упор на аналитику и сложные процессы. Если ваша система ориентирована на аналитические инструменты, сложные процессы или работу с большими объемами данных, desktop-first позволяет разработчикам сосредоточиться на создании полноценного функционала для десктопных пользователей, не жертвуя удобством и скоростью работы.

Хотя mobile-first часто подходит для массовых бизнесов, есть определенные ниши, где desktop-first остается более оправданным. Компании, которые работают с большими объемами данных, сложными аналитическими системами или предоставляют доступ к корпоративным инструментам, могут смело выбирать desktop-first, если основная работа происходит на настольных устройствах.

Заключение: mobile-first как стратегическая инвестиция в бизнес

Подводя итоги, можно с уверенностью сказать, что mobile-first — это не модный тренд, а необходимость для бизнеса, которая напрямую влияет на ключевые показатели эффективности. 

Если ваш бизнес сталкивается с растущим мобильным трафиком, выбор mobile-first становится очевидным.

Рассматривайте mobile-first как долгосрочную инвестицию в успех вашего бизнеса. Да, это требует дополнительных затрат и усилий на этапе разработки, но вложения окупаются на 200%+.

Обещанный чек-лист можете забрать в личных сообщениях на Хабре. Просто напишите: «Здравствуйте, хочу чек-лист для мобайла». Или что-то в таком духе. 

Что за чек-лист? Он поможет вам определить нужный подход к разработке вашего сайта, чтобы:

• запланировать бюджет на разработку

• вести более конкретные переговоры с подрядчиками

• разбираться в подходах и не позволять себя обманывать

Достаточно будет выделить 5 минут и пройтись по основным пунктам чек-листа.