Многие руководители при подготовке корпоративного сайта упираются в один и тот же вопрос: адаптивная разработка сайта или отдельный мобильный сайт — стоит ли делать их раздельно?
Чем больше я слышу этот вопрос, тем яснее понимаю: людей волнует не сама технология, а три вещи: окупятся ли затраты, не будет ли сложно поддерживать сайт в будущем и не будет ли мобильная версия медленно открываться. В этой статье я без лишних отступлений разберу всё — от стоимости до практической реализации.
Сразу к выводу: большинству корпоративных сайтов не нужно разделять версии
Если у вас нет очень веской причины, адаптивная разработка сайта — более выгодный выбор.
Причина проста: один код, одна админ-панель, один домен. Вы меняете текст — и на компьютере, и на телефоне он обновляется одновременно; загружаете фото товара — оно появляется на обеих версиях. А раздельная разработка означает два набора кода, две админ-панели, два набора контента — в долгосрочной перспективе это двойные затраты на персонал.
Приведу конкретный пример. Одна компания по производству промышленного оборудования при редизайне сайта настаивала на раздельных мобильной и десктопной версиях, аргументируя это так: «мобильная версия должна быть лаконичной, а на компьютере — вся информация». В итоге через три месяца после запуска на десктопной версии шесть раз обновили параметры продукции, а на мобильной синхронизировали только дважды — клиенты на телефонах видели старые цены. Это проблема не техническая, а процессная, и раздельная разработка естественным образом усиливает процессные проблемы.
Поэтому запомните главное: раздельная разработка — не то, что нельзя делать, а то, для чего нужны достаточные ресурсы и процессы для поддержки.
В чём реальные три преимущества адаптивного подхода
1. SEO проще
Baidu и Google сейчас используют mobile-first индексацию. У адаптивного сайта только один URL, вес концентрируется, не нужно настраивать canonical и правила редиректа для мобильной версии. При раздельной разработке придётся разбираться с соответствием m-домена и основного домена — чуть зазеваешься, и появятся дублирующийся контент или неиндексируемые мобильные страницы.
2. Низкие затраты на поддержку
Корпоративный сайт обычно не делается раз и навсегда — нужно постоянно обновлять новости, кейсы, продукты. При адаптивном подходе поддерживается один набор контента, при раздельном — два. Затраты на персонал считаются за год, и разница очень заметна.
3. Меньше рисков при редизайне
Адаптивный редизайн — это изменение одного шаблона, раздельный — двух. Если где-то что-то упустишь, пользователь увидит несогласованный опыт.
В каких случаях действительно стоит делать раздельно
Я не сторонник универсальных решений. В следующих случаях раздельная разработка или отдельная мобильная версия оправдана:
- Бизнес-логика мобильной версии полностью отличается от ПК. Например, на ПК — сложная аналитическая панель, а на мобильном нужно только сканировать QR-код для проверки заказа. Разница в функциональности настолько велика, что втискивать всё в один шаблон неудобно.
- Мобильная версия должна быть мини-программой или App. Здесь речь не о «мобильном сайте», а о том, стоит ли использовать разработку мини-программ или разработку App для мобильного трафика. Возможности мини-программ в экосистеме WeChat — шеринг, оплата, push-уведомления — недоступны для веб-страниц.
- Старый сайт с большим историческим багажом. Некоторые корпоративные сайты имеют архитектуру десятилетней давности, и переделка в адаптивный обойдётся дороже, чем создание нового. В таком случае можно сначала сделать отдельную мобильную версию как переходное решение.
Обратите внимание: все три случая — это не «потому что экран телефона маленький», а потому что бизнес-модель другая.
Три самые частые ошибки при адаптивной разработке
Ошибка первая: думать, что добавил viewport — и уже адаптивный
Настоящая адаптивность требует работы с контрольными точками, адаптивными изображениями, горизонтальной прокруткой таблиц, размерами сенсорных зон. Если написать только meta viewport, на телефоне будет уменьшенная версия компьютерной страницы с текстом, по которому невозможно попасть пальцем.
Ошибка вторая: изображения не сжаты, мобильная версия загружается медленно
Баннер весом 2 МБ для ПК всё равно будет скачиваться и на телефоне. Правильный подход — использовать srcset или загружать изображения разных размеров в зависимости от контрольной точки. Это нужно закладывать на этапе разработки сайта, потом добавлять будет очень хлопотно.
Ошибка третья: тестирование только на популярных моделях
Не стоит просто пару раз ткнуть на своём телефоне и запускать. Нужно охватить минимум по два-три популярных размера iOS и Android, особое внимание уделить формам, навигации и всплывающим окнам.
Как выбрать для корпоративного сайта: чек-лист для принятия решения
Задайте себе эти вопросы:
1. Контент на мобильной и ПК-версиях — один и тот же?
2. Есть ли у команды ресурсы для долгосрочной поддержки двух наборов контента?
3. Есть ли на мобильной версии нативные потребности — оплата, сканирование QR, push-уведомления?
4. Бюджет — разовое вложение или желание минимальной поддержки в долгосрочной перспективе?
Если на 1 — «один и тот же», на 2 — «нет», на 4 — «минимальная поддержка», выбирайте адаптивный подход. Если на 3 — «есть», то вам нужно думать не о раздельном сайте, а о разработке мини-программ или разработке App.
В каких случаях стоит обратиться в MIC Studio
MIC Studio занимается разработкой и редизайном корпоративных сайтов, а также разработкой мини-программ, разработкой App, разработкой скриптов, а кроме того — тестированием безопасности сайтов и обратным тестированием.
Если вы столкнулись с одной из этих ситуаций, можно с нами обсудить:
- Сайт нужно переделать, но вы не уверены — адаптивный или раздельный, нужна помощь в оценке;
- Мобильная версия должна быть интегрирована в экосистему WeChat, нужно связать сайт и мини-программу;
- После запуска сайта есть беспокойство о безопасности, нужно провести тестирование;
- Есть API или данные, требующие обратного анализа для проверки осуществимости.
Мы не навязываем решения сразу — обычно сначала смотрим на вашу текущую структуру контента, источники трафика и команду, а потом даём рекомендации.
В завершение: три совета, которые можно применить сразу
1. Сначала определите контентную стратегию, потом — техническое решение. Один набор контента — адаптивный подход, два набора — тогда говорим о раздельной разработке.
2. На мобильной версии в первую очередь убирайте лишнее. Независимо от выбранного подхода, оставьте на телефоне только три самых частых действия пользователя, остальное уберите в меню.
3. Перед запуском проведите тестирование на реальных устройствах. Возьмите три телефона разных размеров и пройдите формы, навигацию и всплывающие окна — это гораздо полезнее, чем смотреть на макеты.
Адаптивная разработка сайта или отдельный мобильный сайт — по сути, это не выбор технологии, а выбор контента и возможностей поддержки. Разберитесь с этим — и ответ обычно находится сам собой.