Эффективность x3, а ROMI 300% благодаря мобильной версии дизайна (если разработаете ее первой)

Стоит ли начинать разработку проекта с мобильной версии и платить +15% $$$: разбираем 4 ключевых подхода — desktop only / first, desktop+adaptive, desktop+responsive и mobile-first, рассчитываем затраты, смотрим окупаемость.

Дисклеймер: вас ожидает лонгрид, поэтому добавлю сюда самое важное вкратце. 

1. Разберем разницу подходов в разработке.
2. Рассчитаем ROMI вложений в качественный мобайл и поймем смысл подхода, когда первой разрабатывается мобильная версия сайта, а не для ПК — как все привыкли. 
3. Отдадим чек-лист, который поможет вам самостоятельно определить нужный подход к разработке вашего сайта, спланировать бюджет и провести более конкретные переговоры с заказчиком. Достаточно будет выделить 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 для мобильных пользователей. Актуально, учитывая последние данные статистики, правда?

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 12249 тендеров
проведено за восемь лет работы нашего сайта.

Плюсы 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 требует множества итераций тестирования на реальных устройствах, на всех типах экранов и операционных системах. + часы работы тестировщиков.
• Тестирование на всех устройствах. Об этом мы уже говорили, но повторим: тестирование проводится на множестве разных устройств и экранов, отличающихся на пару дюймов и пару версий ОС.

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

А за что я плачу?

• Принципиально новый вектор предпроектной аналитики. Маркетологи рассматривают 1000+ мобильных версий, ищут особенности разработки в вашей нише, разрабатывают стратегию. Эта работа абсолютно отличающаяся от предпроектной аналитики для десктопа.
• Дополнительные часы работы копирайтеров и дизайнеров. Чтобы сделать мобильный интерфейс удобным, копирайтерам приходится считать каждое слово по буквам, а дизайнерам — учитывать множество ограничений мобильного экрана.
• Дополнительные разработки и оптимизация. Разработчикам приходится больше работать над оптимизацией загрузки контента, кода и адаптацией интерфейсов под разные устройства. Для мобильных версий необходимо сжать изображения, минимизировать скрипты и сделать сайт максимально легким.
• Тестирование на всех устройствах. Об этом мы уже говорили, но повторим: тестирование проводится на множестве разных устройств и экранов, отличающихся на пару дюймов и пару версий ОС.

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

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

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

• Стоимость разработки desktop-first: $30,000
• Стоимость разработки mobile-first: $42,000
• 15% разработчикам = $4,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 дополнительной выручки в месяц
• Дополнительная выручка в месяц: $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 актуален:

1. Мобильная версия вторична. Если мобильная версия сайта не является ключевой для бизнеса, а основное использование происходит через десктопные устройства. Типично для компаний, где мобильный доступ носит скорее вспомогательный характер — например, когда пользователи проверяют статус задач, но не выполняют сложные операции с мобильных устройств.
2. Работа с большими объемами данных. Системы, которые обрабатывают и визуализируют большие объемы информации, лучше функционируют на настольных компьютерах с их большими экранами и высокой производительностью. В таких случаях desktop only / first позволяет создать удобные интерфейсы для работы с отчетами, диаграммами и аналитикой, которые сложно представить на маленьких экранах мобильных устройств.
3. Сложные системы и интерфейсы. Если проект включает сложные интерфейсы с множеством элементов управления (например, аналитические платформы, финансовые системы, системы управления производством), desktop only / first может быть наиболее оптимальным решением. Мобильные версии таких проектов требуют упрощений, что часто недопустимо для полноценного функционала.
4. Основной упор на аналитику и сложные процессы. Если ваша система ориентирована на аналитические инструменты, сложные процессы или работу с большими объемами данных, desktop only / first позволяет разработчикам сосредоточиться на создании полноценного функционала для десктопных пользователей, не жертвуя удобством и скоростью работы.
5. Оперативность. Когда важно быстро сделать работающий сайт, быстро его протестировать и пустить в релиз, а только потом масштабировать и развивать — без проблем, десктоп-фёрст!

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

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

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

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

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

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

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

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

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