Все услуги
Кинетическая ракета
Москва, ул. Бауманская, 7+7 (495) 792-29-50
Барнаул, ул. Балтийская, 248 800 700-02-07
Оставить заявку
Нажимая на кнопку, вы соглашаетесь с условиями политики конфиденциальности
или напишите нам:

Обязательно ли создавать мобильную версию сайта?

Артем Первухин
Продакшн-директор

Здравствуйте. Нужно ли выносить мобильную версию сайта на поддомен типа m.site.ru? Что посоветуете?

Олег

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

1. Отдельной версией на поддомене.

2. С помощью адаптивной верстки.

3. И динамического показа — RESS.

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

СпособыПлюсыМинусы
Мобильная версияCкорость загрузки, экономия батареи и ресурсов устройстваДвойные затраты на разработку, поддержку, оптимизацию и продвижение
АдаптивНе требует больших затрат при разработке, поддержке и в поисковой оптимизацииГрузится дольше
Динамический показСкорость загрузки выше выше мобильной версииДорого разрабатывать и поддерживать
Мобильная версия
ПлюсыМинусы
Cкорость загрузки, экономия батареи и ресурсов устройстваДвойные затраты на разработку, поддержку, оптимизацию и продвижение
Адаптив
ПлюсыМинусы
Не требует больших затрат при разработке, поддержке и в поисковой оптимизацииГрузится дольше
Динамический показ
ПлюсыМинусы
Скорость загрузки выше выше мобильной версииДорого разрабатывать и поддерживать

Когда мобильный интернет был медленный и дорогой, сайты использовали отдельный поддомен для мобильных устройств. Сейчас чаще используется адаптивная верстка — интернет в последние годы стал быстрым, а устройства пользователей мощнее. Адаптив проще реализовать, особенно на этапе разработки сайта с нуля.

Что выбрать

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

Решение о внедрении адаптива должно исходить из задач пользователей — нужны ли им полные функции сайта или только ограниченные:

  • ориентируйтесь на ситуацию: ваш пользователь будет сидеть в кафе с бесплатным wi-fi или посреди леса вызывать эвакуатор с GPRS на мобильном;

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

Также обратите внимание на реализацию конкурентов: возможно, стоит дополнительно внедрить amp, турбо-страницы или сделать отдельное мобильное приложение. Но эти способы полностью не заменят сайт, пригодный для мобильных устройств.

Реализация отдельной мобильной версии на поддомене оправдано, если:

  • основная версия сайта содержит много лишних библиотек JS и CSS-стилей, которые сильно замедляют скорость и плавность работы;

  • пользователи приходят на сайт, используя мобильный интернет — есть ограничения по скорости загрузки и объему трафика;

  • для посетителя актуальны только некоторые функции полной версии сайта: например, фильтры товаров без галереи и интерактива, завязанного на скроллинге;

  • либо функции, которые реализуются только на мобильных версиях: например, поддержка жестов.

Мобильная версия сайта на отдельном поддомене требует отдельных затрат на оптимизацию и продвижение, так как целевые страницы имеют разные url

Для мобильной версии необходимы собственный robots.txt и xml-карта сайта, а также настройка целей для отслеживания эффективности.

Обратите внимание, чтобы контент мобильной и десктопной версий был максимально схож между собой по содержанию и по объему. Сервер должен обязательно возвращать облегченную версию HTML с минимальным количеством узлов и вложенности блоков, чтобы не нагружать рендер браузера.

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

Несколько слов о RESS. Аббревиатура расшифровывается как Responsive Design & Server Side. Подход комбинирует методы разработки серверной части и адаптивного дизайна, что улучшает взаимодействие с каждым типом пользовательского устройства. Для ПК, планшетов, смартфонов сервер будет возвращать разный HTML и CSS.

Сравнивая RESS и мобильную версию сайта на отдельном поддомене, выделим следующие пункты:

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

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

Техническая реализация мобильной версии

Если вы все-таки решили сделать мобильную версию основного сайта, учтите ряд технических требований:

    • Реализуйте редирект в зависимости от User Agent пользовательского устройства на мобильную версию.

    • Свяжите между собой страницы мобильной и десктопной версий с помощью атрибутов rel="alternate" и rel="canonical".

    • Настройте сохранение передачи UTM-меток при автоматическом редиректе с одной версии на другую: они должны корректно и в полной мере передавать информацию с одного поддомена на другой.

    • В контенте используйте относительные ссылки.

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

  • Реализуйте на стороне сервера передачу разных версий HTML-разметки для мобильной и десктопной версий.

  • Настройте разные варианты сборки и объединения статических ресурсов (JS и CSS) для каждой версии сайта. В большинстве современных сайтов для экономии количества одновременных запросов все ресурсы объединяются и минифицируются с помощью специальных сборщиков: webpack, gulp и др.

  • Реализуйте подгрузку изображений нужного размера для каждой версии сайта либо использовать HTML-элемент <picture> с набором вариантов изображений под разную ширину экрана устройства пользователя.

Brand / Icon / Simple / SimpleIcon@3x Created with Sketch.