С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

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

Адаптивный дизайн;
Отдельная мобильная версия сайта;
RESS (Responsive Design + Server Side).

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

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

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

Чем же обусловлена необходимость в наличии той или иной версии для мобильных устройств.

По последним данным число пользователей интернета, использующих мобильные устройства за год выросло на 90%! Из всех 80 млн. пользователей интернета по всему миру 50 млн. используют мобильные устройства. В русском сегменте мобильный трафик насчитывает 25% и доходит до 40% в некоторых тематиках.

Основная проблема в том, что ранее сайты изначально делались с ориентацией на разрешение мониторов компьютеров, а как оказалось традиционная верстка для мобильных устройств не совсем подходит, поскольку размеры экрана смартфона отличаются от диагонали монитора, из-за чего происходит несоответствие графики и дизайна. Пользоваться такими сайтами с телефонов совершенно не удобно: долго грузятся, мелкий и нечитабельный текст, неудобная навигация, горизонтальная прокрутке, не работают flash и java скрипты. Большинство посетителей такие сайты раздражают, и они их сразу покидают, не совершив целевых действий.

Еще одна причина, по которой следует задуматься о разработке мобильной версии – это наличие мобильного поиска, и если ваш сайт не имеет мобильной версии, то он и не попадает туда. Об этом нам сообщают Google и Яндекс в своих обращениях и рекомендациях, и это понятно, т. к. в десктопном поиске наблюдается своего рода стабильная ситуация, поисковики устремили свой взор на растущий рынок мобильного поиска. Все это и подтолкнуло нас на разработку бесплатной мобильной версии для вашего сайта.

Адаптивный дизайн, его плюсы и минусы

Пожалуй, адаптивный дизайн можно назвать своеобразным трендом последних лет. Множество компаний, которые понимают важность мобильных устройств для пользователей и хотят предоставить им удобство просмотра собственного сайта, воспользовались предложением разработчиков и теперь их ресурсы подстроены под разные разрешения экрана. Однако опыт многих показывает: адаптивный дизайн неплохо срабатывает с блогами и небольшими сайтами, но с крупными проектами дело обстоит гораздо сложнее.
Разберем преимущества и недостатки этой версии, чтобы читатели сделали собственные выводы. Среди преимуществ адаптивной верстки можно выделить, во-первых, удобство разработки. Как уже было сказано, структура сайта автоматически подстраивается под различные разрешения экранов. Для того чтобы получить конечный продукт, нет необходимости писать все «с нуля» — достаточно внести корректировки в CSS и HTML. Реализация не требует больших вложений, а поддержка такого продукта является относительно простой задачей.
Во-вторых, преимуществом является единый URL. Адаптивная верстка избавляет от дополнительных редиректов, а пользователю не нужно запоминать другой электронный адрес мобильной версии. Кроме этого наличие единого URL положительно сказывается на продвижении ресурса, так как поисковым системам проще индексировать такой сайт.
Теперь перейдем к недостаткам адаптивного дизайна. Перечислим их и расскажем о каждом в подробностях. Первый недостаток заключается в том, что задачи пользователей мобильных устройств, как правило, отличаются от тех, которые преследуют пользователи десктопов. Например, клиентов банка будет интересовать ограниченный спектр услуг, если они решили зайти на сайт через смартфон или планшет (адреса банкоматов, ближайших отделений и другое).

В этом варианте страницы вашего сайта имеют на выходе один и тот же HTML/CSS код, ваш сайт имеет один и тот же набор документов (набор страниц сайта), один и тот же единый домен как для обычных пользователей, так и для мобильных. Адаптация подразумевает, что хотя всем пользователям грузится в браузер все то же самое, но вот только в процессе загрузки внешний вид документов «адаптируются» под то устройство, в которое происходит загрузка (адаптация, как правило, осуществляется только в зависимости от размера экрана устройства, тип устройства никакого значения при этом не имеет).

Преимущества адаптивной верстки
Итак, основные преимущества выбора адаптивного дизайна.

1. Низкие трудозатраты. Самый простой вариант.

2. Движок/CMS/бэк-энд сайта остается без изменений, не требует доработок, используется один и тот же для всех пользователей (программисты, в отличие от дизайнеров и верстальщиков, будут счастливы).

3. Единый контент, единое наполнение.

4. Нет никаких проблем с индексацией сайта. Другими словами – специальные мероприятий для продвижения сайта в результатах мобильного поиска предпринимать не нужно.

Как делается такой вариант на практике? Читайте в статье Как сделать адаптивный дизайн сайта.

Недостатки адаптивного дизайна
Для начала нужно принять как данность, что основные задачи мобильных пользователей на сайте могут и наверняка существенно отличаются от основных типовых задач пользователей обычных компьютеров. Отличается не только список задач, но даже если задача одна и та же – также существенно отличается способ (путь) ее решения.

Причина этому – их несколько и они все те же – медленный интернет на мобильном устройстве, маленький размер экрана, нахождение пользователя в общественном месте, транспорте, везде, где есть минутка на «посмотреть» сайт, но нет ни времени, ни желания читать что-то подробно или долго искать что-то на сайте. Это что-то нужно быстро и сейчас. Как можно быстрее! Как можно более «сжато» и по делу. Нужны контакты – вот они! Нужно позвонить – вот нужная кнопка! Нужен маршрут проезда – все под рукой и доступно в один клик!

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

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

Да, адаптивный дизайн предоставляет возможность сделать верстку таким образом, что можно будет для мобильного телефона убрать или переставить местами колонки с информацией, не показывать большие картинки, использовать «слегка» другое оформление для одних и тех же элементов. Все это можно будет сделать через CSS и JavaScript. Но все равно это будут «костыли», не более чем «затыкание дыр», работа с проблемными местами. На это у верстальщика уйдет уйма времени, но все равно еще сайт будет очень неудобным для телефона, скажем так – на «троечку» не больше. Пользователь может не уйти с сайта, как он сделал бы раньше, не имей оный адаптивной верстки, но все равно – неудобств в работе будет предостаточно.

А что делать с размерами документов? Из-за дополнительных элементов адаптивного дизайна размеры страниц станут еще больше и время их загрузки увеличится как на телефонах, так и для пользователей десктопов! Страдать от «перевеса» будут все пользователи!!! И в первую очередь мобильные. А ведь для них мы все и хотели только улучшить, а фактически получается обратное.

Еще один недостаток, о котором редко вспоминают разработчики, но о который часто «наталкиваются» реальные пользователи – если адаптивный дизайн полностью или в какой-то части, на какой-то странице или для какого-то элемента «дает сбой» (что-то плывет, перекрывается, невидно на экране должным образом), то у пользователя нет альтернативы кроме как уходить с сайта. Альтернативы же адаптивный дизайн не предлагает. Хотя альтернатива всегда есть, и в данном случае это, боюсь, будет сайт конкурента, куда и уйдет пользователь за решением своей задачи. Забегая вперед, скажу, что создание отдельной мобильной версии сайта с возможностью перейти на основной сайт полностью решает эту проблему. Но об этом чуть позже.

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

1.    Трудность, а подчас и невозможность реализовать в рамках одного «резинового» варианта дизайн сайта удобный как для обычных, так и для мобильных пользователей. Дизайн сайта на мобильных устройствах при этом смотрится «ущербно».

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

3.    Большой объем загружаемых документов (медленная загрузка сайта на мобильных устройствах), загрузка неотображаемых в мобильной версии, но все же загружаемых элементов сайта.

4.    Большие изображения – большая головная боль! В адаптивном дизайне придется грузить в мобильный телефон клиента большую картинку (и грузить ее долго), после чего неминуемо масштабировать ее под размер экрана телефона или смартфона. Очень неоптимальное решение, обход которого технически возможен, но достаточно непрост в реализации (разработчики предпочтут застрелиться).

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

Так почему же Google все же рекомендует выбирать адаптивный вариант дизайна в качестве основного для «мобилизации» сайтов (хотя при этом честно признается, что ни один из способов не пользуется особым преимуществом при ранжировании сайта и для Google любой вариант, будь он сделан правильно, является приемлемым)? Я нашел для себя такой ответ. Мне кажется, что он очевиден. С точки зрения индексации и всего прочего в плане SEO (и только в этой плоскости) для Google гораздо проще работать с вашим сайтом именно в варианте адаптивного дизайна. Судите сами – набор документов един, никаких дополнительных настроек и сложностей в плане SEO-оптимизации, которые ожидают вас, скажем, в отдельной мобильной версии – их нет и в помине. Проще Google, но, не в нем все же дело, Google сможет разобраться, как индексировать ваш сайт, проще разработчикам сайта, специалистам по поисковой оптимизации – не нужно заморачиваться лишний раз, достаточно большой блок работ по SEO-оптимизации мобильной версии отдельно от основной просто отсутствует (ибо этой отдельной версии и нет в данном решении). При том качестве кода, который имеет рядовой сайт, при тех проблемах индексирования, которые и так не решены на большинстве сайтах, при тех SEO-ляпах и ужасающих ошибках, что существуют тоннами – Google просто не хочет нагружать большинство сайтов лишней работой. Google просто рекомендует не заморачиваться. Им так проще. И это все!

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

А сейчас познакомимся со вторым методом.