Мобильный сайт: отзывчивый или нет?

Сегодня мобильный интернет становится все более распространённым и важным. Например, eBay считает, что мобильные покупатели в 3–4 раза ценнее обычных клиентов:

Mobile shoppers and mobile payers are three to four times more valuable than Web only.

Влияние мобильного интернета будет расти и дальше — в этом нет сомнений. Но что лучше использовать с точки зрения веб-технологий: новомодный отзывчивый дизайн или отдельную мобильную версию?

Отзывчивый дизайн

Одним из последних трендов веб-разработки стал «отзывчивый» (responsive) дизайн. Даже гугл рекомендует его для мобильной версии. Чтобы ваш сайт можно было назвать отзывчивым, он должен «отзываться» на работу с различными устройствами: от телевизоров и настольных компьютеров с огромными мониторами до планшетов и смартфонов. При этом, в отличие от отдельной мобильной версии, отзывчивый дизайн работает с единой разметкой и, часто, единым набором стилей и скриптов.

В основе «отзывчивости» обычно лежат media queries, которые позволяют менять оформление различных элементов в зависимости от разрешения экрана и других параметров клиента (например, от плотности пикселей экрана). Теоретически, такой подход может облегчить поддержку сайта, так как вместо двух (и более) версий вы поддерживаете одну-единственную. Этот же подход избавляет от проблем множественных адресов, неправильных переадресаций и необходимости определения клиентских возможностей. А кроме того — это модно. Настолько модно, что буквально каждый день появляются всё новые CSS-фреймворки, многие из которых сделаны с учетом последних тенденций. Взять те же Zurb Foundation или Twitter Bootstrap — они «из коробки» предлагают готовые решения для разных размеров экрана.

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

Мобильный интернет характеризуется не только малым размером экрана, но и низкой скоростью передачи данных. Конечно, часто мы подключаемся через вай-фай или у нас ловит 3G, но нередко приём оставляет желать лучшего, да и далеко не у всех подключён безлимитный тариф на мобильный интернет. Средний размеры страницы вместе со всей «обвеской» сейчас превысил один мегабайт. И вся эта куча кода часто загружается для любых типов устройств, несмотря на то, что потом может даже не использоваться.

Чтобы этого избежать вы должны изначально спланировать работу сайта в различных условиях. Например, скрипты и стили загружать не напрямую, а через специальные загрузчики типа modernizr или require.js — по требованию. Такой подход позволит загружать лишь самые необходимые библиотеки и компоненты: скажем, jQuery для основной версии сайта и zepto.js для мобильной. Например, один из самых известных сайтов, перешедших на отзывчивый дизайн — Бостон Глоуб, — загружает скрипты в зависимости от возможностей клиента. Очевидно, что данный подход сложнее, чем простое использование готового фреймворка: он требует от разработчика определённой квалификации и продуманной архитектуры веб-приложения.

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

Второй подход — более традиционный: для мобильных устройств делается отдельная версия, которая часто располагается на отдельном домене (например, m.example.com), хотя иногда домен остается тем же, а отдаваемый контент подменяется.

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

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

Большинство современных сайтов работают на основе CMS, формируя страницы по шаблонам. Таким образом, вопрос с поддержкой двух разных версий сайта практически отпадает: для мобильной версии один раз делается свой шаблон, а затем на всех версиях используется один и тот же контент. Конечно, определённые тонкости есть и здесь, но обычно задача разработки мобильной версии особых трудностей не вызывает. Это можно сделать без особого планирования и на любой платформе, которая поддерживает шаблоны.

Что же выбрать?

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

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