Что лучше: мобильный или адаптивный дизайн сайта?
Сайт – отличный инструмент для развития бизнеса, он позволяет выйти в online-продажи и конвертировать новых клиентов. Еще до начала разработки проекта возникает большое количество вопросов, одним из которых является «С десктопной версией все понятно, а что лучше – мобильная версия или адаптивная?».
Мы – команда DIGIMATIX – считаем, что все зависит от целей и задач клиента. И ответ на этот вопрос у каждого будет разный. В этой статье мы расскажем о том, что такое мобильная версия и адаптивный дизайн, какие ключевые преимущества и недостатки есть у той и другой версии сайта.
Почему важно делать акцент на мобильных устройствах?
По данным аналитиков SlickJump, доля мобильного трафика в российском сегменте интернета достигла рекордных 80% в 2020 году. Эксперты считают, что показатель 80% – далеко не максимальный. «Если темпы прироста мобильного трафика сохранятся, то в 2021 году его доля может составить 88–92%», – говорится в исследовании.
Соответственно, стоит сделать вывод, что мобильный трафик преобладает над десктопным и на российском рынке стоит обращать внимание на трафик со смартфонов и делать акцент на удобстве мобильных версий.
Что лучше?
Для начала разберемся, что из себя представляют адаптивный дизайн и мобильная версия сайта, в чем их преимущества и недостатки.
Адаптивный дизайн
Адаптивный дизайн – это такой вид верстки, который обеспечивает корректное отображение сайта на различных устройствах: компьютере, планшете, смартфоне. Это достигается путем динамического подстраивания всех элементов сайта под необходимый формат экрана, при этом функционал сайта полностью сохраняется. В данном случае разрабатывается только одна версия сайта, и, соответственно, URL-адрес тоже будет один, а значит, будет одна база данных, из которой берется наполнение, что значительно упрощает работу.
Преимущества адаптивного дизайна:
- Использование одного домена для всех устройств, что значительно упрощает работу над SEO-продвижением.
- Корректное отображение всех страниц сайта и его элементов на любых устройствах.
Недостатки адаптивного дизайна:
- Большой вес страниц и, как следствие, долгая загрузка сайта. Если на десктопе есть «тяжелые» элементы, в мобильной версии они могут тормозить загрузку страниц сайта. Чтобы не допускать этого, необходимо дополнительными действиями решать данную задачу.
- Различные цели сайта для десктопной и мобильной версии. При посещении сайта со смартфона иногда приходится долго искать информацию, так как весь функционал и все блоки остаются теми же, что и на десктопной версии. Это может вызвать дополнительное неудобство и раздражение у пользователей.
- Ограничения по добавлению нового функционала. Как мы и говорили выше, адаптивная верстка – это адаптация десктопной версии сайта, поэтому придется делать новый функционал на всех страницах сайта.
Адаптивный дизайн, несомненно, является универсальным вариантом. Если выбор пал на него, перед началом работ обязательно стоит планировать структуру и функционал сайта таким образом, чтобы они были удобны при просмотре с разных устройств и не было необходимости скрывать часть функционала.
Мобильная версия
Мобильная версия сайта – это отдельная версия сайта, которая разработана исключительно для пользователей смартфонов. В зависимости от того, с какого устройства заходит пользователь, автоматически происходит определение экрана устройства и запускается переадресация на мобильную или на десктопную версию сайта.
Портфолио по данному проекту можно посмотреть на Behance.
Преимущества мобильной версии:
- Проработанный UX-дизайн. Поскольку мобильная версия создается как отдельный сайт, то на этапе дизайна можно корректировать логику взаимодействия и перегруженность страниц, сократив при этом время на совершение целевого действия.
- Быстрая загрузка страниц из-за отсутствия чрезмерного для смартфонов функционала.
- Возможность в любой момент переключиться на десктопную версию сайта, если возникнут какие-либо проблемы.
- Создание полноценного мобильного контента. Контент в таком случае можно публиковать, не оглядываясь на десктопную версию.
Недостаток мобильной версии: увеличение затрат на разработку и SEO-продвижение, так как разрабатывать и продвигать необходимо будет две версии сайта.
Как выбрать, какую версию реализовывать в вашем проекте?
Мы рекомендуем разработать мобильную версию, если:
- Вам нужно сделать разную бизнес-логику для пользователей мобильной и десктопной версий.
- Вы ориентируетесь на плотное привлечение органического трафика из поисковых систем Yandex и Google.
- Посещаемость текущей версии с мобильных устройств > 50%.
- Вы планируете создать мобильное приложение с помощью технологии создания PWA-приложений.
- Бюджет позволяет сделать две версии.
В остальных случаях достаточно будет адаптивной версии.
Простите, но статья тупейшая. Вы же создаёте сайты, могли бы спросить у ваших дизайнеров и фронтендеров, как это всё корректно преподнести. Для примера:
Недостатки адаптивного дизайна:
1. "Большой вес страниц и, как следствие, долгая загрузка сайта. Если на десктопе есть «тяжелые» элементы, в мобильной версии они могут тормозить загрузку страниц сайта".
Конечно это не так, зачем вообще показывать "тяжёлые" элементы на мобильных устройствах? просто отключите их видимость и загрузку при помощи css.
2. "При посещении сайта со смартфона иногда приходится долго искать информацию, так как весь функционал и все блоки остаются теми же, что и на десктопной версии".
Тоже нет! Можете менять местами блоки, можете какие-то отображать, какие-то отключать, в зависимости от того, на каком устройстве просматривается сайт.
3. "Ограничения по добавлению нового функционала".
Какие вообще ограничения? Не могу представить такой функционал, который можно сделать на десктопе, но нельзя на планшете, например.
Здравствуйте, отвечая на Ваш комментарий:
1. Представьте, что вся изюминка проекта проекта состоит из таких "тяжёлых” элементов, и если их просто отключить мы не получим такого же опыта и вау эффекта. В пример можно привести сайт студии dogstudio.co. Мы думаем, что если посмотреть на этот прекрасный сайт и с десктопа и с мобильного телефона комментарии не потребуются.
2. Да, действительно, вы правы. Но как правило при разработке адаптивной версии, структура проекта в большинстве случаев повторяет десктопную версию. Если при разработке сайта важен акцент на мобильных устройствах, то стоит разрабатывать мобильную версию.
3. Например, размеры экранов и могут быть препятствием. Допустим, существует бизнес-требование отображать на мобильных устройствах столько же информации, сколько и на десктопной версии. Или в какой-то момент времени потребуется экранная клавиатура для ввода данных, а проект подразумевает WYSIWYG-редактирование. Или сделать такой же детализированный и функциональный слайдер как на десктопной версии.
Неужели сложно сделать функцию по типу WordPress "wp_is_mobile()" и от этого разделить CSS и JS? Да даже картинки можно давать меньшего размера для телефонов.
Здравствуйте!
Фактически примерно так и работает, но на уровне шаблонов. Для различных типов устройств они подключаются разные. Но с точки зрения трудоемкости сделать адаптивную верстку и ее подключить в проект проще, чем подключение, верстка и интеграция мобильной версии.
-
Если мобильный контент так важен то нужно пилить приложение для мобильных.
Это дороже Но получается эффективнее.
Во всех остальных случаях достаточно адаптивного дизайна