Адаптивный дизайн: стоит ли подстраиваться под экраны?

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

Аудитория, читающая новости со своих мобильных устройств, растет день ото дня, и сайты, оптимизированные под просмотр с таких устройств, пользуются все большим спросом. Однако растет и количество устройств, с помощью которых читатели выходят в сеть. Хуже того: у всех этих устройств разные технические характеристики: в первую очередь разрешение экрана, а также поддержка тех или иных веб-технологий. Не стоит забывать и том, что согласно концепции пяти экранов, все больше людей уже начинают получать необходимую информацию не только с ПК/лэптопа/нетбука, планшета и мобильного телефона, но и телевизора, и даже со встроенных в автомобиль устройств. Что же получается: нужно делать разные сайты под все эти гаджеты?

Статья впервые опубликована в журнале «Журналист» №1/2013

Такой вопрос давно крутится в голове у издателей и программистов, и ответ на него не так очевиден как кажется. Родоначальником адаптивного дизайна называют Итана Маркотта (Ethan Marcotte), впервые употребившего этот термин в одноименной статье в 2009 году. Ему наконец-то удалось придумать модель сайта, которую можно будет посмотреть на любом из существующих устройств. Более того: читателю это будет удобно и интуитивно понятно.

Так в интернете появилась концепция адаптивного дизайна (responsive web design, RWD), который подстраивается под любой размер экрана. Вместо того, чтобы долго объяснять, как это выглядит, я предлагаю вам прямо сейчас набрать в браузере вашего настольного компьютера адре http://bostonglobe.com работа в том числе того самого Итана Маркотта) или РИА «Новостей» http://ria.ru, уменьшить размер окна и потаскать его мышкой вправо-влево, наблюдая за тем, как меняется внешний вид сайта.

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

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

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

1. Время и деньги.  Если у вас уже есть хороший современный сайт для настольных компьютеров, то разработать для него мобильную версию может оказаться дешевле и быстрее, чем с нуля создавать адаптивный дизайн. С другой стороны, согласнопросу руководителей более 500 веб-агентств, проведенного компанией NetCat совместно с порталом CMS Magazine осенью 2012 года, в общем случае разработка адаптивного сайта у сторонней студии будет дешевле чем разработка пары основной сайт плюс мобильный.

2. Поддержка браузеров.  Если аудитория вашего сайта консервативна и не пользуется современными браузерами (данные можно почерпнуть в какой-нибудь системе веб-аналитики, вроде Google Analytics), возможно переходить на адаптивный дизайн рановато. Делать поддержку корректного отображения в старых браузерах для сайтов с адаптивным дизайном – это огромные траты времени, сил и в конечном итоге денег, которые могут и не окупиться.

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

4. Реклама Если переделать отображение анонса для статьи или даже определенной фотографии под адаптивную верстку не составит большого труда, то с рекламными форматами сложнее. Правильно встроить фреймы баннерообменных сетей и контекстной рекламы получится не сразу. Скорее всего, вам придется придумывать собственные форматы рекламы, которые впишутся в новую среду. Про различные схлопывающиеся-разъезжающиеся картинки и прочие сложносочиненные конструкции, которые должны вызывать у потребителя wow-эффект, но чаще вызывают раздражение, тоже придется забыть, что может нанести удар как по существующим, так и по потенциальным рекламодателям. Последним тоже придется непросто: вряд ли пользователь будет рад, если, кликнув по баннеру на адаптивном сайте с мобильника, перейдет на настольную версию сайта рекламодателя. Придется заранее просчитывать такие моменты.

5. Контент.  Насколько хорошо ваш контент ложится в «адаптивный» дизайн? Если вы часто экспериментируете с форматами материалов, размещаете крупные фотографии в качестве захода в статью или публикуете исключительно статьи журнального формата без новостей, возможно, адаптивный дизайн – это не то, что нужно вам и вашей аудитории. Кроме того, возможно вы хотите, чтобы читатели вашей настольной версии получали отличный от планшетной или мобильной контент или выполняли на сайте другие действия. Тогда, конечно, адаптивный дизайн – не ваш выбор.

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

7. Web-app.  У вашего сайта может быть множество сервисов, а из-за адаптивного дизайна на мобильных устройствах они будут погребены где-то в нижнем конце длиннющей главной колонки. Или вы хотите, чтобы пользователи, читающие вас с планшетных или мобильных устройств получали какую-то добавленную стоимость по сравнению с обычными интернет-посетителями. Тогда вам стоит подумать над тем, чтобы разработать web-приложение (web-app), которое будет отличаться от специально написанного приложения под iOS и Android только возможностью запускаться в браузере и отсутствием привязки к определенной мобильной операционной системе.

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

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

  1. Проверьте контент.  Возможно, вам придется отказаться от того или иного типа контента или переформатировать его, чтобы он лучше отображался в адаптивном дизайне. Например, у вас есть «карикатура дня», которая всегда отображается в верхнем правом углу сайта. В адаптивном дизайне на экране мобильного телефона вы не сможете показать ее на таком же выгодном месте, но можно будет сделать удобную кнопку для доступа к карикатуре дня, которая все-таки окажется в рамках первого экрана на телефоне.
  2. Начинайте с малого.  Многие сайты с адаптивным дизайном были сделаны от «большого к малому», то есть за основу бралась «настольная» версия, а потом ее равномерно ужимали до состояния, способного вместиться в экран мобильного устройства. Вы даже не представляете, с каким количеством трудностей и компромиссов вам придется столкнуться, если вы пойдете по такому пути. С другой стороны, если выбрать дизайн для мобильного телефона в качестве отправной точки создания адаптивного дизайна, вам удастся сократить время разработки и сохранить нервы.
  3. Ваш главный рабочий инструмент – не фотошоп, а браузер.  К сожалению, при разработке адаптивного дизайна не удастся пойти по привычному пути, при котором сначала дизайнер рисует сайт, а программист потом «натягивает» его на программный движок. Выбор в пользу адаптивного дизайна – неизбежный компромисс с красотой в пользу функциональности. Именно поэтому вашей команде куда больше времени придется провозиться с программированием, чем с отрисовкой, и именно IT-ребята будут солирующей скрипкой.
  4. Делайте сайт из модулей.  Адаптивный дизайн предполагает четкую иерархию, в которой одной информации отводится более важная роль, чем другой, и согласно этим правилам, происходит перестроение модулей на разных экранах. При этом единица информации должна быть как можно меньшей, чтобы сайт был более гибким и интуитивно понятным. Именно поэтому вам надо заложить в его основу систему простых модулей, подобных кубикам лего, и задать необходимые алгоритмы, которые будут переставлять кубики в понятном, удобном и логичном порядке.
  5. Постоянно оптимизируйте.  Интернет-стандарты обновляются каждый день, а поток новых устройств с экзотическими диагоналями экранов на рынок не иссякает. К сожалению, разработав классный «резиновый» сайт вам не удастся почивать на лаврах постоянно. Наоборот: этот подход все равно потребует постоянной проверки работоспособности и необходимой оптимизации. Впрочем, как и любой другой.

Если вы не замечаете, что все большая часть аудитории заходит на ваш сайт с телефонов и планшетов, то возможно проблема в том, что вам нечего им предложить, и они делают выбор в пользу других сайтов СМИ, более приспособленных под их устройства. Ведь, согласно данным Liveinternet.ru, в настоящее время в российском сегменте интернета на мобильные операционные системы Android, iOS и Symbian приходится уже более 20% трафика. Уже сейчас кто-то из ваших читателей возможно хочет получить доступ к вашему контенту с экрана, встроенного в его беговую дорожку. Ваш сайт и вы должны быть к этому готовы.