Адаптивный дизайн: стоит ли подстраиваться под экраны?
Издатели стоят на перепутье: нужно ли делать один сайт, который сам сможет подстроиться под любое устройство, или необходимы специальные версии и приложения под каждое из них?
Аудитория, читающая новости со своих мобильных устройств, растет день ото дня, и сайты, оптимизированные под просмотр с таких устройств, пользуются все большим спросом. Однако растет и количество устройств, с помощью которых читатели выходят в сеть. Хуже того: у всех этих устройств разные технические характеристики: в первую очередь разрешение экрана, а также поддержка тех или иных веб-технологий. Не стоит забывать и том, что согласно концепции пяти экранов, все больше людей уже начинают получать необходимую информацию не только с ПК/лэптопа/нетбука, планшета и мобильного телефона, но и телевизора, и даже со встроенных в автомобиль устройств. Что же получается: нужно делать разные сайты под все эти гаджеты?
Статья впервые опубликована в журнале «Журналист» №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. Версия для печати. Да, многие люди все еще любят читать статьи в распечатанном виде, даже если они увидели их на сайте. Правильно реализованная версия для печати нечасто встречается даже на сайтах с обычным дизайном, не говоря уже об адаптивном. Необходимо добавить специальные стили, которые будут отвечать за корректный вывод содержимого той или иной страницы на бумагу.
Итак, вы все-таки решили, что вашему сайту и – главное – вашей аудитории непременно нужен адаптивный дизайн. Тогда вам следует отталкиваться от лучших мировых практик в области такого дизайна, которых, кстати говоря, пока еще не так много. Вот несколько простых советов.