Мобильная версия сайта VS Адаптивный дизайн VS RESS: Инфографика

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

 

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

 

— Отдельная мобильная версия

— Адаптивный дизайн

— RESS (Responsive Design + Server Side)

 

Каждый способ имеет свои недостатки и преимущества, их и рассмотрим в этой статье.

 

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

 

В этом случае для мобильных устройств (телефоны, планшеты, смартфоны) создается отдельная версия сайта (чаще всего на поддомене вида m.site.ru). В 99% случаев — она является урезанной и оптимизированной копией основного сайта. Пользователь, зашедший с мобильного устройства, перенаправляется на этот поддомен, где пользуется лишь необходимым функционалом в удобном виде.

 

Преимущества мобильной версии

 

• — Легкость изменений для владельца/разработчиков сайта
• — Удобство для пользователя — отсутствует ненужный функционал
• — Скорость загрузки и работы за счет оптимизации кода, текста, изображений
• — Выбор — при желании, пользователь может перейти на полную версию

 

Недостатки мобильной версии

 

• — Несколько адресов — каждая страница будет дублироваться (два адреса — мобильный и десктопный), что негативно скажется на продвижении сайта в поисковых системах. Этот недостаток частично решается с помощью грамотной оптимизации SEO-специалистом.
• — Неудобство для пользователя — запоминать два адреса посетитель не любит (даже если это всего лишь приставка буквы m к адресу).
• — Ограниченность — мобильный сайт лишается части функционала. К тому же, при использовании двух разных версий контента существует опасность нарушить общее информационное сообщение.

 

В целом, подводя небольшой итог — этот способ вполне оправдывает себя. Не зря именно отдельную мобильную версию использует такой гигант как Amazon.

 

2 способ: Адаптивный дизайн

 

С приходом CSS3 и HTML5 разработчики получили более гибкие инструменты для работы со стилями. Реализуется адаптивный дизайн с помощью CSS3 Media Queries. Суть его работы проста: в зависимости от размеров экрана устройства пользователя, сайт растягивается или сжимается для удобного просмотра. Пример стилей для экранов с шириной до 1024, 1280 и 1600 пикселей:

 

@media screen and (max-width: 1600px) {

div.for-example {width: 1500px;}

}

@media screen and (max-width: 1280px) {

div.for-example {width: 1100px;}

}

@media screen and (max-width: 1024px) {

div.for-example {width: 980px;}

}

 

Преимущества адаптивного дизайна

 

• — Удобство разработки — при использовании модели MVC (Model-view-controller, «модель-представление-контроллер») разработчики могут вносить правки достаточно просто и удобно. Вся структура сайта изменяет вид автоматически при внесении правок в шаблон всего один раз.
• — Единые URL-адреса страниц — что положительно сказывается на удобстве пользования сайтом и индексации поисковыми системами.

 

Недостатки адаптивного дизайна

 

• — Нет возможности заточить сайт под задачи пользователей, посещающих его именно с мобильных устройств.
• — Сложность сохранения юзабилити — пожертвовать функционалом в пользу мобильных пользователей или перегрузить для десктопов?
• — Медленная загрузка сайта — помимо основного веса десктопной версии, пользователь мобильного устройства загружает — дополнительный код для мобильного ,что несомнено сказывается на скорости работы сайта.
• — Выхода нет — пользователь не может переключиться на другую версию сайта, так как она отсутствует. Что называется — пользуйтесь тем, что есть, без вариантов.

 

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

 

3 способ: Responsive Design + Server Side (RESS)

 

RESS можно назвать высшим пилотажем в разработке. Как понятно из названия, RESS совмещает в себе адаптивный дизайн и обработку запросов сервером. Работает этот способ на основе данных User-Agent — в зависимости от типа устройства пользователя, сервер сам выбирает что показывать: мобильную версию с определенным функционалом, полнофункциональную адаптивную версию или даже мобильное приложение (при наличии на устройстве или страницу для его загрузки).

 

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

 

Преимущества RESS

 

• — Минимизация трафика — не только за счет сжатия данных, но и полного удаления из кода ненужных скриптов.
• — Таргетирование — можно делить пользователей не только по размеру экрана, но и по мобильной операционной системы (например: для владельцев Android и владельцев iOS можно отобразить разные данные).

 

Недостатки RESS

 

• — Сложность разработки — очевидно что способ требует дополнительной серьезной подготовки и дополнительных часов работы программистов.
• — Несовершенство определения устройств — несмотря на активное развитие технологий сервер до сих пор может принять мобильный телефон за компьютер или планшет.

 

Подводя общий итог: идеального варианта нет. Для серьезных проектов лучшим решением будет RESS. Для некрупных проектов — стоит выбирать исходя из возможностей и, главное, из потребностей пользователей. Обратитесь в Ribbla digital, чтобы наши специалисты помогли определить лучший вариант для ваших задач.