Мы работаем не только в Моcкве, но и в других городах России:

Продвижение по трафику от 50 копеек за переход. Заказать

Адаптивный дизайн против мобильной версии сайта: драка за трафик с гаджетов

Подписаться
Больше интересностей из блога студии SEMANTICA
Получайте эффективные советы по интернет-рекламе и SEO-оптимизации вашего сайта
ВКонтакте:
Facebook:
Twitter:

Как сделать так, чтобы на сайте было удобно всем: и скучающим на парах студентам, и вечно занятым бизнесменам, везде таскающим с собой ноутбук? Правильный ответ: адаптировать его под все типы и разрешения экранов. Сделать это можно несколькими путями: сделать сайт с адаптивной версткой или отдельную страничку для мобильных устройств. И у первого, и у второго решения есть свои плюсы и минусы. В левом углу ринга – адаптивный дизайн, в правом – мобильные версии. Разберемся, кто тут фаворит и на кого стоит поставить.

 

Какие есть варианты?

Как мы уже сказали, сделать сайт удобным для пользователей смартфонов и планшетов можно двумя способами:

  • Адаптировать существующую страницу под разные размеры экрана.
  • Разработать отдельную мобильную версию.

В первом случае внешний вид страничек не меняется. а просто «ужимается» до нужных габаритов, а во втором условный владелец «Айфона» видит совершенно другую версию портала, которая располагается на отдельном поддомене (обычно это http://m.yourcoolsite.ru/).

И что лучше?

Оба варианта имеют право на существование, но не лишены недостатков. Разбираемся, какой вариант создания мобильной версии сайта лучше подходит в разных ситуациях.

Мобильная версия сайта с адаптивной версткой

Наименее затратный способ адаптировать сайт под «Айфоны», «Айпэды» и прочие классные девайсы. У него есть и преимущества, и недостатки – разберемся в них.

Плюсы:

  • Универсальность. Элементы сайта почти всегда выглядят одинаково на всех устройствах – меняется только их размер и расположение на странице. Если «обычная» версия состоит из трех колонок, то владелец «айпэда» увидит две, а пользователь телефона вообще одну, но длиннющую.
  • Можно не заморачиваться с настройкой метрик. Дополнительных настроек вносить не нужно, поэтому анализировать данные из «Яндекс.Метрики» и Google Analytics проще.
  • Просто сделать. Адаптивный дизайн сайта для мобильных устройств помогает сократить расходы на разработку ресурса и временные затраты на его поддержку.
  • Никаких редиректов и дублей страниц. Весь контент располагается по тому же адресу, что и основная версия страницы.
  • Просто управлять. Достаточно один раз сверстать страницу, а всю остальную работу сделает сам сайт.

Кажется. что все прекрасно и хорошо. Но недостатки у адаптивной верстки сайтов для мобильных тоже есть:

  • Все под одну гребенку. Нужды и потребности пользователей десктопов и мобильных девайсов – это две большие разницы. Им нужны разные функции и разный контент, да и оформление страницы с разных экранов воспринимается по-разному. Мобильным пользователям нужны иконки, крупные кнопки, и всякие другие штуки, удобные исключительно им. На больших экранах все это смотрится немного странно.
  • Тяжеловато. Страница в любом случае весит одинаково. Одинаково много. Поэтому загрузка в браузере смартфона занимает больше времени – программа сначала загружает весь код и графические элементы страницы (которые сделаны под десктоп) и только потом адаптирует под конкретный размер дисплея. Поэтому просмотр мобильной версии сайта с адаптивной версткой через 3/4G превращается в жутко неудобный ритуал. Пока смартфон или планшет загрузит всю эту красоту можно забыть, зачем вообще открывал страницу.
  • Нельзя переключиться на полную версию сайта. Потому что то, что видит пользователь – это и есть полная версия. Для владельцев смартфонов это не так актуально, а для пользователей планшетов с большими экранами – весьма.

Пример:

Сайт «Медузы». Все аккуратно растягивается и стягивается обратно.

 

 

Создание мобильной версии сайта – панацея?

В этом случае разрабатывается два отдельных ресурса. Один – для пользователей стационарных ПК, а другой – для мобильных пользователей. С какого устройства вы заходите на сайт определяет сервер.

Плюсы:

  • Разделяй и публикуй. Можно адаптировать контент специально под мобильных пользователей. То же самое с дизайном и навигацией – они разрабатываются с учетом потребностей владельцев смартфонов и планшетов.
  • Оптимизация под «железо» гаджетов. Мобильные версии сайта не так сильно загружают ресурсы устройства, а значит с сайтом проще и быстрее работать. Объем страницы тоже сокращается, а значит пользователю не нужно загружать громоздкую полную версию.

Создание отдельной мобильной версии сайта помогает сделать ресурс удобнее и учесть все потребности пользователей смартфонов и планшетов. Но и она не лишена недостатков:

  • Проблемы на больших экранах. Большинство мобильных версий сайта очень плохо смотрятся на экранах планшетов: крупные кегли шрифтов, кнопки и элементы дизайна мешают воспринимать информацию – чтобы добраться до нужной информации приходиться скроллить. Много скроллить.
  • Отдельный сайт – отдельные проблемы. Время на публикацию контента увеличивается минимум вдвое – это в том случае, если информация на странице полностью совпадает с основной версией сайта. А если специально адаптировать контент под смартфоны, то времени уйдет еще больше. Кроме того, придется настраивать редиректы, разбираться с доменами и поддерживать обе версии ресурса.
  • Урезанный функционал. Обычно из мобильной версии выкидывается все, что не нужно пользователям гаджетов. Но иногда им требуется как раз полный функционал сайта и чтобы он стал доступен нужно зайти на ресурс и потратить время на включение полной версии сайта. При этом вожделенная кнопка чаще всего находится в футере, а после нажатия нужно еще загрузить основную страницу. Очень. Долго.

Пример:

На экране смартфона мобильная версия mail.ru выглядит нормально...



335ca46a9e[1]

... а на более крупном дисплее – не очень.

 

А есть ли золотая середина?

Да и он называется RESS (Responsive Design + Server Side). В этом случае сервер сам определяет размер экрана вашего устройства и загружает нужную версию сайта: с подходящим объемом страницы, элементами дизайна, и всем остальным.

К недостаткам RESS относят трудоемкость. Чтобы сервер определил, что вы пользуетесь «Айфоном», а не Samsung, информация об обоих устройствах (и версиях браузера) должна быть на сервере. Необязательно загружать все вручную, для этого есть специальные сервисы вроде NetBiscuits, но они все равно стоят денег.  К тому же придется разбираться с версткой сайта для владельцев разных гаджетов и повышенной нагрузкой на сервер.

Пример:

Сайт «Тинькофф Банка». RESS в действии –сервер думает, что я зашел с Android-устройства и сразу предлагает скачать приложение в Google Play. Наивный.

 

Что выбрать: адаптивную верстку или создание мобильной версии сайта

Выбор конкретной модели зависит от типа ресурса и целей пользователей. Если вы хозяин интернет-магазина и продаете часы/смартфоны/кроссовки, то нужно максимально упростить покупку и сравнения цен на разные модели. Для этого лучше подойдет отдельная мобильная версия. А если люди заходят на ваш сайт чтобы просто узнать контактный телефон или оставить заявку на обратный звонок, то достаточно будет и обычного адаптивного дизайна – пользователи мобильных устройств не сильно пострадают.

 

Задать вопрос по статье
Подпишись на нашу группу в VK и получай экспертные статьи прямо в ленту!

Мы работаем не только в Моcкве, но и в других городах России: