Дисклеймер: оставайтесь с нами и читайте данный материал, если задаетесь вопросами:
почему одни начинают разработку с мобильной версии сайта, другие — с ПК?
с чего подрядчики взяли, что вам нужен именно адаптивный, а не респонсивный дизайн — вам ведь за это доплачивать?
почему настолько дороже и что со сроками, если для каждого устройства будут рисовать, а потом еще и программировать отдельный макет?
и главное — окупится ли?
Все, кто хотели, ушли? Теперь поговорим:
Разберем разницу подходов.
Посмотрим базовые практические советы по разработке.
Посчитаем, сколько стоит (и стоит ли оно того).
Заберем чек-лист, который поможет определить нужный подход к разработке вашего сайта, спланировать бюджет и вести более конкретные переговоры. Достаточно будет выделить 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 минут и пройтись по основным пунктам чек-листа.
