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

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

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

С каждым годом мобильный интернет дешевел и ускорялся. Теперь и в Калуге, и в других городах работает 4G - и устаревший 3G тоже выдает немалые скорости для загрузки средней руки сайта. Таким образом, проблема свелась к размеру дисплея - на маленьком дисплее смартфона сайты выглядят совсем иначе, чем на обычном мониторе. А на планшете - и вовсе иначе.

Как же оптимально решить эту проблему?

Есть два традиционных пути: создать мобильную версию сайта или применить адаптивный дизайн, меняющийся в зависимости от размера монитора пользователя (или характеристик его браузера).

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

Специалисты SStudio однозначно высказываются за адаптивный дизайн. Давайте объясним, почему.

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

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

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

Как это работает?

Движок берет от браузера данные о размере экрана пользователя, и срабатывает согласно установкам. Например, можно сделать разную выдачу для экранов шириной до 480 пикселей, до 1120 пикселей и больших экранов. Технология идентификации точно такая же, как и в случаях для многоязычных версий сайта, - однако меняется не язык контента, а форма его выдачи. Удобно поставить, например, для мобильного пользователя на видное место баннер с предложением подписаться на мобильное приложение сайта в AppleStore или Google Play, а для пользователей с обычного компьютера эту информацию подать в более компактном виде.

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

Отдельно стоит сказать о попытках создать удобство пользователям только через замену блоков, - скажем, выстраивание для любого мобильного пользователя всего контента в одну колонку. Этот подход может использоваться, однако непременно стоит учесть сопутствующие факторы - без подмены CSS на мобильную придется на всем сайте делать размер изображений 100%, ширину макета 100% и прочие нюансы. Для нового сайта это допустимо предусмотреть заранее, а если сайт существует уже с готовым наполнением, - эффективнее перевести его все-таки на адаптивный дизайн.