Адаптивный дизайн: стоит ли подстраиваться под экраны?
Издатели стоят на перепутье: нужно ли делать один сайт, который сам сможет подстроиться под любое устройство, или необходимы специальные версии и приложения под каждое из них.
В ноябрьском номере «Журналиста» за прошлый год мы обсуждали с вами мобильные сайты СМИ. Аудитория, читающая новости со своих мобильных устройств, растет день ото дня, и сайты, оптимизированные под просмотр с таких устройств, пользуются все большим спросом. Однако растет и количество устройств, с помощью которых читатели выходят в сеть. Хуже того: у всех этих устройств разные технические характеристики: в первую очередь разрешение экрана, а также поддержка тех или иных веб-технологий. Не стоит забывать и том, что согласно концепции пяти экранов, все больше людей уже начинают получать необходимую информацию не только с ПК/лэптопа/нетбука, планшета и мобильного телефона, но и телевизора, и даже со встроенных в автомобиль устройств. Что же получается: нужно делать разные сайты под все эти гаджеты?
Статья впервые опубликована в журнале "Журналист" №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. Версия для печати. Да, многие люди все еще любят читать статьи в распечатанном виде, даже если они увидели их на сайте. Правильно реализованная версия для печати нечасто встречается даже на сайтах с обычным дизайном, не говоря уже об адаптивном. Необходимо добавить специальные стили, которые будут отвечать за корректный вывод содержимого той или иной страницы на бумагу.
Итак, вы все-таки решили, что вашему сайту и - главное - вашей аудитории непременно нужен адаптивный дизайн. Тогда вам следует отталкиваться от лучших мировых практик в области такого дизайна, которых, кстати говоря, пока еще не так много. Вот несколько простых советов.
- Проверьте контент. Возможно, вам придется отказаться от того или иного типа контента или переформатировать его, чтобы он лучше отображался в адаптивном дизайне. Например, у вас есть «карикатура дня», которая всегда отображается в верхнем правом углу сайта. В адаптивном дизайне на экране мобильного телефона вы не сможете показать ее на таком же выгодном месте, но можно будет сделать удобную кнопку для доступа к карикатуре дня, которая все-таки окажется в рамках первого экрана на телефоне.
- Начинайте с малого. Многие сайты с адаптивным дизайном были сделаны от «большого к малому», то есть за основу бралась «настольная» версия, а потом ее равномерно ужимали до состояния, способного вместиться в экран мобильного устройства. Вы даже не представляете, с каким количеством трудностей и компромиссов вам придется столкнуться, если вы пойдете по такому пути. С другой стороны, если выбрать дизайн для мобильного телефона в качестве отправной точки создания адаптивного дизайна, вам удастся сократить время разработки и сохранить нервы.
- Ваш главный рабочий инструмент - не фотошоп, а браузер. К сожалению, при разработке адаптивного дизайна не удастся пойти по привычному пути, при котором сначала дизайнер рисует сайт, а программист потом «натягивает» его на программный движок. Выбор в пользу адаптивного дизайна - неизбежный компромисс с красотой в пользу функциональности. Именно поэтому вашей команде куда больше времени придется провозиться с программированием, чем с отрисовкой, и именно IT-ребята будут солирующей скрипкой.
- Делайте сайт из модулей. Адаптивный дизайн предполагает четкую иерархию, в которой одной информации отводится более важная роль, чем другой, и согласно этим правилам, происходит перестроение модулей на разных экранах. При этом единица информации должна быть как можно меньшей, чтобы сайт был более гибким и интуитивно понятным. Именно поэтому вам надо заложить в его основу систему простых модулей, подобных кубикам лего, и задать необходимые алгоритмы, которые будут переставлять кубики в понятном, удобном и логичном порядке.
- Постоянно оптимизируйте. Интернет-стандарты обновляются каждый день, а поток новых устройств с экзотическими диагоналями экранов на рынок не иссякает. К сожалению, разработав классный «резиновый» сайт вам не удастся почивать на лаврах постоянно. Наоборот: этот подход все равно потребует постоянной проверки работоспособности и необходимой оптимизации. Впрочем, как и любой другой.
Если вы не замечаете, что все большая часть аудитории заходит на ваш сайт с телефонов и планшетов, то возможно проблема в том, что вам нечего им предложить, и они делают выбор в пользу других сайтов СМИ, более приспособленных под их устройства. Вед согласно данным Liveinternet.ru, в настоящее время в российском сегменте интернета на мобильные операционные системы Android, iOS и Symbian приходится уже более 20% трафика. Уже сейчас кто-то из ваших читателей возможно хочет получить доступ к вашему контенту с экрана, встроенного в его беговую дорожку. Ваш сайт и вы должны быть к этому готовы.
Всеволод Пуля, исполнительный директор по онлайновым продуктам Russia Beyond the Headlines (ЗАО «Издательство «Российская газета»)