Как разработка мобильной, а только потом десктопной версии дизайна увеличивает эффективность вашего сайта x3, а ROMI — на 300%
Стоит ли начинать разработку проекта с мобильной версии и платить +15% $$$: разбираем 4 ключевых подхода — desktop only / first, desktop+adaptive, desktop+responsive и mobile-first, рассчитываем затраты, смотрим окупаемость.
Дисклеймер: вас ожидает лонгрид, поэтому добавлю сюда самое важное вкратце.
- Разберем разницу подходов в разработке.
- Рассчитаем ROMI вложений в качественный мобайл и поймем смысл подхода, когда первой разрабатывается мобильная версия сайта, а не для ПК — как все привыкли.
- Отдадим чек-лист, который поможет вам самостоятельно определить нужный подход к разработке вашего сайта, спланировать бюджет и провести более конкретные переговоры с заказчиком. Достаточно будет выделить 5 минут и пройтись по основным пунктам чек-листа. Чек-лист находится в самом последнем предложении статьи.
Поехали!
Вам нужен сайт: интернет-магазин, корпоративный портал, маркетплейс, финтех платформа и так далее. Вы смотрите коммерческое предложение агентства N, а в нем написано:
«У вас разработка mobile-first и +20% к стоимости проекта» / «Заплатите нам на 30% больше того, на что вы рассчитывали, потому что мы не делаем респонсивный дизайн — только адаптивный» / «Desktop-first + responsive design = столько-то $$$»
Задаетесь вопросами:
- почему одни разработку начинают с мобильной версии сайта, а другие — с ПК?
- с чего подрядчики взяли, что вам нужен именно адаптивный, а не респонсивный дизайн — вам ведь за это доплачивать?
- почему настолько дороже и что со сроками, если для каждого устройства будут рисовать, а потом еще и верстать отдельный макет?
И главное — окупится ли? Разберемся. Вот несколько фактов от команды Google и Яндекс:
- более 67% запросов в Google поступают с мобильных устройств
- трафик с мобильных устройств в 6 раз превышает трафик с десктопных, по данным Яндекс Вордстат
- около 53% пользователей покинут ваш сайт, если он не оптимизирован для мобильных устройств и загрузка страницы займет больше трех секунд
- от 40% рост конверсии продуктов отмечают компании, которые внедрили mobile-first
Мы расскажем: когда именно — в каком проекте, в какой нише — стоит начинать с мобильной версии, а когда достаточно обойтись классическим десктопом и подвязать к нему респонсивный или адаптивный дизайн. Рассмотрим четыре ключевых варианта разработки: desktop only / first, desktop+adaptive, desktop+responsive и mobile-first. Разберемся, как они влияют на сроки, стоимость, трудозатраты и конечные бизнес-результаты, чтобы помочь вам сделать правильный выбор.
Краткий обзор ключевых вариантов разработки проекта, разных по стоимости и результатам: desktop only / first, desktop+adaptive, desktop+responsive и mobile-first
Desktop only / first — традиционная модель, где сайт разрабатывается сначала для десктопных устройств, и и только затем весь массив контента десктопного макета адаптируется под мобильный телефон (или не адаптируется вовсе). К десктопной разработке в договор, как правило, дописывается либо респонсивный, либо адаптивный дизайн.
Несмотря на рост мобильного трафика, подход актуален для некоторых бизнесов. Подчеркиваем — для некоторых. А именно:
- если пользователи чаще всего заходят с ПК;
- если это многофункциональный высоконагруженный сервис, которым с телефона сложно пользоваться — в Битрикс24 на телефоне еще поди разберись;
- если это сайт с мощной графикой — музей с 3D-турами, гейминг и т.д.;
- системы отчетности, аналитики данных, типа Яндекс Метрики;
- премиальный сегмент уровня Louis Vuitton, где продают масштабные, дорогие и стильные фотографии, а не миниатюры 360x640 — не «comme il faut» (не комильфо).
Чтобы понять, с каких устройств будут пользоваться вашим сайтом, маркетологи проводят базовую предпроектную аналитику. Если вы наткнулись на хорошего подрядчика, разумеется. До заключения сделки и начала работы (и даже до коммерческого предложения) вам представляют резюме проекта. Резюме включает:
- сведения о конкурентах,
- профиль целевой аудитории,
- рекомендуемые каналы продвижения,
- прогнозные расчеты метрик,
- предварительную структуру сайта.
Это гарантирует, что для вашего бизнеса будут предложены персонализированные решения и гипотезы, которые реально работают, а не сливают бюджеты. В моем агентстве это работает для каждого заказчика — пишите напрямую мне, CEO Ninen, чтобы обсудить детали.
Плюсы desktop only / first:
- Четкая функциональность. Большой экран позволяет разместить сложные элементы, большой объем контента или сложные функции.
- Стоимость. Десктоп обычно дешевле mobile-first на 15-20%.
- Сложные визуальные элементы и анимации. Анимации, параллакс-скроллинг, 3D-графика могут заставить телефон плавиться прямо в ваших руках. Зато на больших экранах и мощных устройствах это круто работает для отстройки от конкурентов и создания сильного эмоционального отклика у аудитории.
- Поддержка многозадачности. Параллельная работа с несколькими задачами, быстрое переключение между вкладками — мобильное устройство не заточено под такую работу.
- Гибкость. Десктопные экраны позволяют разрабатывать уникальные интерфейсы — больше функциональных элементов, многоуровневые меню и высоконагруженные пользовательские панели управления панели управления. Актуально для специализированного ПО или платформ с гибкими настройками.
По данным исследования Software Advice, для B2B-компаний, работающих через корпоративные порталы, десктопные решения по-прежнему приносят до 70% конверсий.
Попробуйте составить бухгалтерский отчет на 1000+ строк или статистический анализ с диаграммами и графиками на мобильном телефоне. Именно поэтому компании, использующие сложные системы управления данными, например, SAP и Oracle, часто отдают предпочтение desktop only / first.
Минусы desktop only / first:
- Плохой UX на мобильных устройствах. Мелкие кнопки, сложные меню с большим количеством уровней вложения на несколько скроллов экрана, трудности с вводом больших объемов данных на сенсорном экране — таким продуктом невозможно пользоваться на смартфоне.
- Просадки по SEO-трафику. Google использует Mobile-First Index, который отдает приоритет сайтам, оптимизированным для мобильных устройств. Сайты, разработанные по принципу desktop only / first, рискуют падать в выдаче, даже если в SEO вложены хорошие бюджеты.
- Неоптимизированный пользовательский сценарий. Сложные действия, которые легко выполнить на компьютере, на мобильном могут быть неудобны и запутанны. Интересно, что некоторые компании переносят QR-коды из десктопа в мобильную версию — а пользователи сканируйте, как хотите, ищите второй телефон.
- Перенос большого объема контента с десктопа на мобильное устройство. Сайты, разработанные для десктопа, обычно содержат много информации и функциональности. При переносе на мобильное устройство возникает проблема: весь этот объем контента не всегда можно разместить без изменений. При этом сокращение или изменение контента негативно сказывается на SEO.
- Ограничение функций. Некоторые функции, которые удобно реализованы на десктопе, сложно адаптировать для мобильных устройств. Например, на ПК удобно вводить номер карточки, код и далее по реквизитам, а на телефоне многие предпочтут какой-нибудь Эппл Пэй.
Что делать, когда нужна мобильная версия, но не супер-дорогая?
Пример: вы заказываете разработку корпоративного портала для сотрудников компании. Это внутренняя система, которой пользуются со стационарных рабочих ПК. Смысла углубляться в мобайл нет.
Но есть исключения: когда директорам или сотрудникам на выездной встрече, в командировке или на удаленной работе необходимо зайти на корпоративный портал — скачать отчет, проверить статус задачи, переслать NDA-документы. Это удобно делать с мобильного телефона. Но для таких случаев разрабатывается урезанная версия, только с самым необходимым функционалом.
Здесь к desktop first подключаются adaptive или responsive design.
Responsive design или респонсивный дизайн — это один гибкий макет для всех устройств.
Создается один макет, который автоматически подстраивается под любое устройство. Этот подход использует подвижные сетки и медиа запросы, что делает сайт гибким для всех разрешений экранов.
На примере: вы открываете сайт в браузере, а затем начинаете стягивать окошко указателем мыши. И сайт сжимается: элементы становятся меньше, начинают выстраиваться один за другим.
Плюсы responsive design:
- Экономия времени и ресурсов. Один макет адаптируется ко всем устройствам, что снижает затраты на разработку.
- Универсальность. Responsive дизайн обходится без макетов для разных устройств. Соответственно, срок разработки сильно уменьшается.
- Нормальный дизайн. Все устройства получают «ничего такой» дизайн, несмотря на размеры экрана. Даже если завтра выйдет айфон 37 Pro Max Plus Ultra с экраном 5:16, сайт будет смотреться так же хорошо, как и на любом другом устройстве.
Минусы responsive design:
- Ограниченная оптимизация. Несмотря на универсальность, responsive дизайн не идеально подходит под устройства. Например, на очень больших смартфонах сайт будет выглядеть «растянутым», а на маленьких — перегруженным.
- Ограниченная кастомизация. Здесь проще на примере. В интернет-магазинах часто нужно показывать больше товаров на мобильной версии для повышения продаж — это сложно настроить при responsive подходе. Минус конверсия.
- Меньше контроля. Вам, то и дело, будут писать в техподдержку с запросами на долгую загрузку, на потерянную кнопку, съехавшую форму — потому что невозможно идеально подстроить под каждый экран, каким-то % качества придется жертвовать.
Итог: респонсивный дизайн подходит для небольших и средних бизнесов с ограниченным бюджетом, где нужно быстро развернуть сайт для всех устройств. Он также хорош для проектов, где пользователи взаимодействуют с сайтом с разных устройств, но поверхностно — не проводят на сайте дольше трех минут.
Adaptive design или адаптивный дизайн — параллельная разработка для нескольких экранов и типов устройств: ноутбуков, планшетов, смартфонов.
UX/UI-дизайнеры рисуют для стандартных разрешений — 320 px, 480 px, 768 px, 1024 px, 1280 px, 1280 px, 1440 px, 1920 px и выше. А разработчик ставит контрольные точки, по которым определяется, с какого именно устройства зашел пользователь.И каждый видит нужную версию сайта.
Плюсы adaptive design:
- Индивидуальная оптимизация. Каждый макет настроен под конкретное устройство, что гарантирует хороший UX для большей части категорий пользователей.
- Контроль. Дизайнеры диктуют макетам, как они должны выглядеть, а не наоборот. Никаких проблем с отображением контента на разных экранах!
- Техническая оптимизация. Когда каждая версия сайта оптимизирована под свое устройство, страницы загружаются быстрее.
- Идеально для кроссплатформенности. Например, вы можете зайти в веб-версию Wildberries с ПК и с телефона, и сравнить, как при этом сохраняется визуальная консистентность и нативность. А это хорошо влияет не только на user experience, но и сам бренд.
Минусы adaptive design:
- Стоимость. Очевидно: нужно больше времени и ресурсов для разработки отдельных макетов для каждого устройства.
- Сложность в поддержке. Каждая новая адаптация — добавление новой функции, оптимизация под iOS 18, 19, 258392… — требует постоянной поддержки и обновления.
- Перегруженность. Из-за кастомного набора стилей для каждого устройства, скорость загрузки идет в минус.
- Сложность тестирования и поддержки. Необходимо проверять, как сайт отображается на множестве устройств и разрешений — усложняет процесс и добавляет строку расходов.
Итог: адаптивный дизайн хорош для тех проектов, где пользователи работают с сайта на нескольких устройствах с разными экранами, и важна идеальная подстройка под каждый формат. Но при этом требует более значительных затрат, чем респонсивный.
Mobile-first, или когда весь приоритет на мобильные устройства
Mobile-first — это подход, при котором разработка начинается с мобильной версии сайта, а затем адаптируется под более крупные экраны. В отличие от desktop only / first, здесь основной акцент делается на создании удобного и быстрого UX для мобильных пользователей. Актуально, учитывая последние данные статистики, правда?
Плюсы mobile-first:
- Оптимизация UX для мобильных. Интерфейсы изначально спроектированы для мобильных пользователей, а значит: на смартфонах сайт работает надежно, *****, как швейцарские часы.
- Рост конверсий. Компании, внедрившие mobile-first, отмечают рост мобильных конверсий до 40%.
- SEO-преимущества. Mobile-first подход помогает улучшить позиции сайта в поисковой выдаче благодаря Mobile-First Index от Google. В данном случае преимуществом можно воспользоваться на 100%, адаптировав мобайл под SEO.
- Высокая производительность и оптимизация. Mobile-first подход — спасение для пользователей с медленным интернетом, менее мощными устройствами. Легкий сайт загружается быстрее и требует меньше ресурсов.
- Визуальная легкость и не нагруженность интерфейса. Поскольку дизайн изначально разрабатывается с учетом ограничений мобильных устройств, интерфейс получается более упрощенным и удобным. Это создает комфортный пользовательский опыт, минимизируя отвлекающие элементы.
- Проще масштабировать под другие не десктопные устройства. Mobile-first подход позволяет легче адаптировать сайт для планшетов и других не десктопных устройств. Базовый легкий дизайн можно без проблем расширить.
Минусы mobile-first:
- Стоимость. Этот подход стоит на 15-20% дороже по сравнению с desktop only / first, так как требует больше времени и усилий на проработку UX для мобильных устройств.
- Требовательность к ресурсам. Создание мобильной версии требует тщательной работы над каждым элементом интерфейса, что удлиняет сроки разработки и увеличивает кратно требования к скиллам команды разработки.
- Сложности при адаптации под десктоп. Нужно добавлять новые элементы и перерабатывать компоновку, чтобы заполнить пространство больших экранов и сохранить композицию дизайна.
- Изначально ограниченный функционал. Mobile-first часто начинается с базового набора функций, чтобы не перегружать мобильные устройства. Нужно что-то добавить — доработка.
- Ограничения на использование анимаций и интерактива. Мало места и производительности — меньше креативных решений, это прямо пропорциональная зависимость. Страдает ваша отстройка от конкурентов.
Когда выбрать mobile-first? Подход оправдан, если основной трафик на сайте идет с мобильных устройств. Он идеален для интернет-магазинов, маркетплейсов, платформ доставки и любых проектов, где важно удобство мобильных пользователей. Да, он дороже, но в долгосрочной перспективе затраты окупаются за счет роста конверсий и улучшения пользовательского опыта.
Техническая сложность разработки mobile-first: почему за проект вы платите минимум на 15% больше
Давайте просто пройдемся по пунктам, оправдывающим все затраты:
- начинаем «с малого». Мобильный пользователь ожидает одновременно простоты, удобства и скорости — и все это на миниатюрном экране, поэтому важно сразу заложить все необходимые элементы, чтобы сайт был интуитивно понятен и легко доступен.
- загнали в рамки… На мобильных устройствах нужно разместить ключевые элементы так, чтобы они были легко доступны и не перегружали интерфейс. Пространство крайне ограничено.
- оптимизатор года. Каждый элемент сайта должен быть адаптирован для маленьких экранов, включая текст, изображения, кнопки и меню. И при этом не потерять ни пикселя в качестве. Разработчик следит за каждым элементом, вылавливая баланс.
- нам не удобно. Мобильные пользователи взаимодействуют с сайтом с помощью сенсорного экрана и пальцев — не мышкой. Размер кнопок, отступы, взаимодействие с формами — буквально все выглядит иначе.
- тестируем, тестируем и еще раз тестируем. Разработка mobile-first требует множества итераций тестирования на реальных устройствах, на всех типах экранов и операционных системах. + часы работы тестировщиков.
Слушаете Яндекс.Музыку? Компания использует mobile-first подход и тратит огромные ресурсы на одно только UX-тестирование.
А за что я плачу?
- Принципиально новый вектор предпроектной аналитики. Маркетологи рассматривают 1000+ мобильных версий, ищут особенности разработки в вашей нише, разрабатывают стратегию. Эта работа абсолютно отличающаяся от предпроектной аналитики для десктопа.
- Дополнительные часы работы копирайтеров и дизайнеров. Чтобы сделать мобильный интерфейс удобным, копирайтерам приходится считать каждое слово по буквам, а дизайнерам — учитывать множество ограничений мобильного экрана.
- Дополнительные разработки и оптимизация. Разработчикам приходится больше работать над оптимизацией загрузки контента, кода и адаптацией интерфейсов под разные устройства. Для мобильных версий необходимо сжать изображения, минимизировать скрипты и сделать сайт максимально легким.
- Тестирование на всех устройствах. Об этом мы уже говорили, но повторим: тестирование проводится на множестве разных устройств и экранов, отличающихся на пару дюймов и пару версий ОС.
«Посчитайте, сколько будет стоить 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 only / first: иногда предпочтительно начинать с десктопной версии — по опыту CEO Ninen
Хотя mobile-first активно продвигается как стандарт для большинства проектов, есть ниши, где desktop only / first остается актуальным и даже предпочтительным — это только мое мнение, основанное на опыте. Для некоторых отраслей и типов проектов десктопная версия имеет решающее значение.
Когда desktop only / first актуален:
- Мобильная версия вторична. Если мобильная версия сайта не является ключевой для бизнеса, а основное использование происходит через десктопные устройства. Типично для компаний, где мобильный доступ носит скорее вспомогательный характер — например, когда пользователи проверяют статус задач, но не выполняют сложные операции с мобильных устройств.
- Работа с большими объемами данных. Системы, которые обрабатывают и визуализируют большие объемы информации, лучше функционируют на настольных компьютерах с их большими экранами и высокой производительностью. В таких случаях desktop only / first позволяет создать удобные интерфейсы для работы с отчетами, диаграммами и аналитикой, которые сложно представить на маленьких экранах мобильных устройств.
- Сложные системы и интерфейсы. Если проект включает сложные интерфейсы с множеством элементов управления (например, аналитические платформы, финансовые системы, системы управления производством), desktop only / first может быть наиболее оптимальным решением. Мобильные версии таких проектов требуют упрощений, что часто недопустимо для полноценного функционала.
- Основной упор на аналитику и сложные процессы. Если ваша система ориентирована на аналитические инструменты, сложные процессы или работу с большими объемами данных, desktop only / first позволяет разработчикам сосредоточиться на создании полноценного функционала для десктопных пользователей, не жертвуя удобством и скоростью работы.
- Оперативность. Когда важно быстро сделать работающий сайт, быстро его протестировать и пустить в релиз, а только потом масштабировать и развивать — без проблем, десктоп-фёрст!
Хотя mobile-first часто подходит для массовых бизнесов, есть определенные ниши, где desktop only / first остается более оправданным. Компании, которые работают с большими объемами данных, сложными аналитическими системами или предоставляют доступ к корпоративным инструментам, могут смело выбирать desktop only / first, если основная работа происходит на настольных устройствах.
Заключение: mobile-first как стратегическая инвестиция в бизнес
Подводя итоги, можно с уверенностью сказать, что mobile-first — это не модный тренд, а необходимость для бизнеса, которая напрямую влияет на ключевые показатели эффективности.
Если ваш бизнес сталкивается с растущим мобильным трафиком, выбор mobile-first становится очевидным.
Рассматривайте mobile-first как долгосрочную инвестицию в успех вашего бизнеса. Да, это требует дополнительных затрат и усилий на этапе разработки, но вложения окупаются на 200%+.
Обещанный чек-лист можете запросить в WhatsApp или в личных сообщениях площадки, как вам удобнее. Просто напишите: «Здравствуйте, хочу чек-лист для мобайла». Или что-то в таком духе.
Что за чек-лист? Он поможет вам определить нужный подход к разработке вашего сайта, чтобы:
- запланировать бюджет на разработку
- вести более конкретные переговоры с подрядчиками
- разбираться в подходах и не позволять себя обманывать
Достаточно будет выделить 5 минут и пройтись по основным пунктам чек-листа.
хочу больше мемов в статье
Запрос принят, сделаем)
Ян, это уровень! Даже директор Яндекса тут
Мне теперь тоже мемы надо
нет проблем))
Интересно, можем ли мы прийти к тому, что году этак в 2040 mobile-first разработка будет в 99% первостепенной? 🤔