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

В последнее время редкий владелец сайта не задумывался о том, как именно смотрится его сайт на смартфонах и мобильных телефонах, насколько удобно работать «мобильным» пользователям всевозможных смартфонов и планшетов с сайтом, который разрабатывался несколько лет назад и был спроектирован и создан исключительно для пользователей обычных десктопных (настольных) компьютеров с большим экраном. Но время идет и, вот уже во многих тематиках, доля так называемых мобильных пользователей сайта приближается к доле обычных пользователей, а кое-где уже и начинает их превосходить. Более того, по последним данным, к 2017 году более 90% всего интернет трафика будет приходиться на долю мобильных пользователей!!! Итак, аудитория пользователей сайта с мобильными устройствами растет. И это вызывает ряд проблем (сайт смотрится некрасиво, текст мелкий и неудобных для чтения, проблемы с прокруткой страниц, проблемы при работе с навигацией и пр.), которые нужно рано или поздно решать (кстати, оперативно найти проблемы именно для вашего сайта можно при помощи специального сервиса Google).

Варианты «мобилизации» сайта

Что же делать? Как удовлетворить и посетителей сайта, кто имеет для работы большие мониторы и быстрый интернет, и тех, кто «на бегу», да еще и с «маленьким экраном», да еще и с «медленным интернетом» пытается как-то работать с нашим сайтом? Итак, у нас, по сути, есть только 3 варианта (вариант создания мобильного приложения не рассматривается как потенциальный, так как он явно не подходит большинству сайтов).

Вариант 1. Адаптивный дизайн (адаптивная верстка, отзывчивый веб-дизайн).

Вариант 2. Динамический показ.

Вариант 3. Разные 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 просто рекомендует не заморачиваться. Им так проще. И это все!

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

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

Динамический показ

Динамический показ работает следующим образом. Тут, также как и в адаптивном дизайне, сайт имеет один домен и один и тот же набор документов. Однако, тот код, который грузится пользователям, адаптируется не в браузере после загрузки, а подстраивается под агент пользователя (под его устройство) еще до момента отгрузки ему страницы. Как это возможно? Просто при запросе любой страницы с сайта браузер пользователя сообщает некую информацию о себе, на основании чего движок сайта знает (или предполагает) работает ли данный посетитель с обычным компьютером или с телефоном/смартфоном/планшетом. После чего на основании этого знания/предположения идет выдача уже определенного HTML/CSS кода, оптимального под устройство каждого посетителя. Звучит отлично? Да, неплохое решение. Позволяет уйти от многих недостатков адаптивного варианта.

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

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

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

Мобильная версия сайта (разные URL)

Для этого же варианта характерно, что пользователь в зависимости от его устройства при заходе на наш сайт, предположим, с мобильного телефона «перебрасывается» на специальный вариант сайта (по сути вообще другой сайт, как правило размещаемый на поддомене), адаптированный изначально для мобильных устройств. Другими словами, в дополнение к основному сайту создается еще один специальный сайт для мобильных устройств (и чаще всего размещается такой сайт на поддомен вида m.example.com). На этом сайте все уже сразу «заточено» для мобильных телефонов и смартфонов, да и сами технологии создания сайта чаще используются специальные (о них ниже отдельно). И самое «сложное» в этом способе (хотя по сути это решается на самом деле достаточно просто и однотипно) – это уметь правильно определять устройство пользователя и «на лету» делать ему редирект (перенаправление) на правильный вариант сайта. Кроме этого, придется повозиться с оптимизацией для поисковых систем (тут тоже все достаточно просто и решается на 100%, тут главное – нельзя про это забывать, а многие упускают).

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

1. При создании мобильной версии практически не нужно «трогать» основной сайт, что позволяет сохранить стабильность в его работе и его позициях в поисковых системах. Все работы по созданию мобильного сайта ведутся в отдельном проекте и никак не затрагивают код основного сайта. Нам очень нравится эта особенность, так как позволяет быстро «доделывать» мобильный сайт практически к любому ранее созданному сайту, на чем бы он, как бы хорошо или плохо, а также кем бы и когда не был сделан – как правильно мы делаем мобильную версию в рамках своего стека технологий, а сделан ли основной сайт на Joomla, WordPress или 1C Bitrix – все равно.

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

3. Вы получите существенно более высокую скорость загрузки страниц, так как не будите грузить в мобильный телефон ничего лишнего, и пользователи 3G и пр. мобильных сетей будут вам безумно благодарны.

4. С уверенность можно заявлить, что по сумме факторов (в том числе и по поведенческим метрикам) мобильная версия сайта сможет занять более достойные позиции в результатах мобильного поиска Google и Яндекс, а значит у вашего сайта появятся гораздо больше посетителей, а у вашего бизнеса – потенциальных клиентов.

5. При определенных условиях, при желании и при использовании определенных технологий (Apache Cordova) вы сможете в дальнейшем на основе мобильной версии сайта даже создать свое собственное мобильное приложение для iPhone, Android и Windows Phone и пр. и разместить его в Apple Store, Android Market и т.п.

Недостатки варианта «разные URL»

1. Очевидно, что придется решать определенные задачи, связанные с администрированием серверов (как минимум создание поддомена, прописывания записей в DNS основного домена и пр.)

2. Информацию 2-х уже сайтов (мобильного и основного) нужно как-то синхронизировать. В идеале, этого возможно и не придется делать, если сайты «прикручены» к одному движку, к одной и той же CMS. Или же придется просто стыковаться к одной и той же базе данных с контентом сайта, но уже из разных CMS, каждая из которых обслуживает свой вариант сайта. Сложнее всего, когда варианты сайта размещены вообще на разных серверах (такое случается), но и тут возможна несложная реализация стыковки.

3. Требуется правильная реализация «детекта» (определения) устройства пользователя и реализация редиректов на нужный вариант сайта. Задача решается разными подходами – через HTTP переадресацию или с помощью JavaScript. На наш взгляд, наиболее эффективный способ – Определение типа устройства пользователя и разрешения экрана при помощи JavaScript (/web-tehnologii/opredelenie-tipa-ustroystva-polzovatelya-i-razresheniya-ekrana-pri-pomoschi-javascript).

4. Больше всего работы будет в плане SEO. Ведь как ни крути, а информация мобильного и основного сайта будет в той или иной части дублироваться. Причем изменения для того, чтобы разъяснить поисковым системам где какой сайт и как они связаны между собой, нужно будет вносить в оба варианта сайта, а не только в основной или только в мобильный. Впрочем, задача эта решаема в рамках 1-2 часов трудозатрат специалиста по поисковой оптимизации. Обещаем написать про это отдельный пост.

5. Не забываем про аналитику. Сбор статистики сайта теперь придется вести с 2-х доменов. Как для этого настроить Google Analytics – напишем чуть позже.

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

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

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

Динамический показ мы бы рекомендовали реализовывать в случае, если вы только начинаете разрабатывать сайт и уже точно понимаете, что адаптивный дизайн вас не спасет. Идеальный пример построения мобильного сайта этого типа – использование Variants в Ruby on Rails версии 4.1 (в зависимости от агента пользователя Variants автоматически «выдают» пользователю соответствующий шаблон вида). При этом вы уверены, что почти все страницы сайта будут полезны пользователям мобильных телефонов и основные задачи будут ими решаться на мобильном и обычном сайте одинаково.

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

P.S. В качестве продолжения читайте Рекомендации по созданию мобильной версии сайта.