→ Мобильная версия сайта или адаптивный дизайн?

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

С каждым днем люди используют интернет через свои девайсы с маленьким экраном и вся веб индустрия должна под это подстраивается. Каждый это делает по-своему, в этой статье рассмотрим все способы адаптации под мобильный сегмент.

На данный момент существует 3 способа подстроить сайт под мобильные устройства:

1
Мобильная версия сайта.
2
Адаптивный дизайн.
3
RESS.

У всех способов есть свои плюсы и минусы постараемся рассмотреть их все:

Мобильная версия сайта.

Чтобы сделать удобным для всех видов устройств создают его отдельную версию — предназначающеюся для пользователя со смартфоном/планшетом. Чаще всего для этого используют отдельный поддомен (m.site.ru, mobile.site.ru и т.п.). Зачастую, мобильная версия является урезанной версией основного сайта, содержащей лишь тот функционал, который, по мнению разработчиков нужен для пользователей различных девайсов.

Плюсы мобильной версии:

1
Легче вносить изменения на сайт, каждая версия живет своей жизнью и не повредить случайно все версии сайта разом.
2
Хорошая адаптация, нет ничего лишнего, только самое необходимое для «миниатюрной версии» сайта и не грузиться контент для полной версии сайта на фоне.
3
Из-за отсутствия фоновой загрузки полной версии сайта, мобильная версия грузиться быстрее.
4
Возможность переключиться на полную версию сайта. Если что то не устраивает в мобильной.

Минусы мобильной версии:

1
Сложности с поддоменами: При заходе на сайт через конкретную ссылку на страничку и переадресации на эту страничку в мобильной версии, её может не оказаться. Также проблемы с SEO. Чтобы избежать дублирование контента приходится в поисковике использовать мета-теги rel=«alternative» и rel=«canonical».
2
Пользователю приходиться помнить поддомен а то и два.
3
При заходе на сайт с смартфона, пользователя переадресовывает на мобильную версию сайта, на что тратиться время.

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

Суть адаптивного дизайна в том, что при разных расширениях экрана пользователь видит разную комбинацию расположения блоков, более выгодную для данного экрана. Обычно используют CSS3 Media Queries.

Плюсы адаптивного дизайн:

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

Минусы адаптивного дизайна:

1
С разных устройств люди заходят за разной информацией, а при адаптивной верстке зачастую делают миниатюрную версию сайта, поэтому будет отображаться информация нужная 2-5 людям из 100, заходящим на сайт с смартфона, что не целесообразно и создаст неудобство большинству пользователей.
2
Лишние мегабайты трафика у пользователей смартфонов. Из-за того, что при таком подходе меняетсяся лишь отображение сайта на устройстве, а загружается весь контент, даже тот, который скрыт.
3
Невозможность пользователей при необходимости перейти на полную версию сайта.

RESS

ResponsiveDesign + ServerSide – принцип при котором в зависимости от User-Agent’а пользователем отдаются разные (!!!) странички. Например, компания Google использует RESS, в этом можно легко убедиться, зайдя на сайт с разными User-Agent’ами, и увидеть различный код странички для различных устройств. При всем при этом Googleза использование сайтами адаптивной верстки, нежели мобильной версии сайта. Примерный вид RESS кода страницы:

$DS = DIRECTORY_SEPARATOR;
require_once( dirname(__FILE__) . $DS . 'libraries' . $DS . 'browser.php');
$device = BBrowser::detectDevice();
if($device == DEVICE_TYPE_MPHONE){
$tmpl = 'template.m.php';
}
else if(
$device == DEVICE_TYPE_TABLET){
$tmpl = 'template.t.php';
}
else{
$tmpl = 'template.php';}
include( dirname(__FILE__) . $DS . 'templates' . $DS . $tmpl);

Плюсы RESS:

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

Минусы RESS:

Сложность в разработке. Во-первых, необходимо точно настроить сервер, для чего необходимы настоящие специалисты в своем деле. во-вторых, необходимость сделать несколько вариантов сайта и всех их поддерживать. Да и до сих пор механизмы определения устройства далеки от идеала и не редко возникает ситуация, что не определяется какой-нибудь редкий телефон, конечно можно использовать и определение по ip: принадлежит ли ip к мобильному оператору, но тут сразу возникнет проблема если человек подключился через wi-fi, поэтому нужна очень качественная настройка сервера.

Подводя итоги, хочется сказать, что нет способа, который можно рекомендовать всем. Но, по нашему мнению, неплохим способом будет RESS, хоть он и требует очень много ресурсов при разработке, в том числе и человеческих. На втором месте мы бы поставили адаптивную верстку, так как с ней уходит много проблем, например, связанных с SEO. При относительной простоте разработки. Ну и на третьем месте мобильная версия сайта, хоть её и используют крупные сайты, по нашему мнению, это устаревающая технология.

Теги: адаптивная верстка верстка мобильная версия сайта ress

Читайте также по теме статьи «Мобильная версия сайта или адаптивный дизайн?»:


Вам будет интересно