Адаптивная верстка в войне устройств

  • Дата:19.04.2013
  • Автор:Алина Знайченко

Как это ни смешно звучит, но модные тенденции просматриваются во всем: прически, одежда, машины… веб-дизайн. Если помните, то в один момент многие ресурсы стали выглядеть, как пародии сайта Apple. В какое-то время все сходили с ума от Flash-технологий, а потом так же поголовно убирали их со своих проектов. Сейчас же появляются приверженцы Responsive web design или адаптивной верстки.

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

Пользователей подобные тенденции только радуют: на 52-дюймовом телевизоре можно посмотреть погоду, не вставая с дивана, или же погуглить ответ на возникший спор, используя наручные часы! Но разработчики от подобной ситуации могут рассчитывать только на головную боль. Если в лучшие времена Internet Explorer-а царила война браузеров, то теперь наступает кровопролитное сражение устройств. Вот поэтому и заговорили об адаптивной верстке, которая призвана обеспечить красоту сайта при любом разрешении и размере экрана.

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

Адаптивная верстка ломает отработанный годами сценарий, требуя постоянного взаимодействия дизайнера и фронт-энд разработчика. По сути, проект регулярно дорабатывается, тестируется на дружелюбность интерфейса к пользователю, а затем вновь дорабатывается. Только после нескольких подобных циклов к работе приступает программист и проводится конечное тестирование. Все это значительно мешает определить точные сроки готовности сайта, да и стоимость проекта возрастает. Многие разработчики предпочитают подход к адаптивной верстке под названием «Mobile first». Особенность его в том, чтобы изначально проектировать сайт для устройств с маленькими экранами. Отсутствие большого пространства позволяет избежать перенасыщения интерфейса лишними деталями.

Техники создания адаптивного веб-дизайна 1. Резиновая верстка.
Наиболее простая техника, которая пользуется немалой популярностью. Ее особенность в том, что размеры блоков задаются в процентах. На самых маленьких экранах контентная часть перестраивается в одну колонку. В статье на Хабре приводится несколько практических советов касательно того, как задать относительные размеры для тех или иных объектов. Отличный пример качественной резиновой верстки — сайт отеля 137 Pillars House:

2. Media queries.
Media queries представляет собой новую спецификацию CSS3, которая позволяет назначать блокам параметры для вывода в зависимости от разрешения, ширины и высоты браузера. Эта техника может полностью преобразить страницу, меняя расположение и визуальное представление блоков. Так, вместо строки поиска на телефоне, вы можете увидеть всем знакомую лупу, которая и вызывает поисковое меню. Довольно неплохое описание реализации простого проекта можно посмотреть тут. Хороший пример качественной адаптивной верстки с использованием media queries — сайт-портфолио Брэда Савицки:

3. Адаптивные изображения.
Особенность техники в том, что максимальная ширина для изображения задается в 100%. Картинка всегда находится в пределах родительского блока и отображение зависит от его ширины. Техник для создания responsive images множество — и с каждым днем их становится все больше. Чтобы изображения имели привлекательный внешний вид на любом устройстве, необходимо подготавливать несколько картинок разного разрешения.
550x357 px:


200x130 px:

Преимущества и недостатки адаптивной верстки Адаптивный веб-дизайн становится все более популярным по ряду причин:
— SEO-специалисты явно порадуются тому, что у сайта только один URL. Это упрощает и индексацию, и продвижение сайта, потому как отсутствует дублирование контента.
— Юзабилити остается на высоком уровне, независимо от используемого устройства для выхода в интернет. Изменения интерфейса остаются почти незаметными для пользователя, поэтому не приносят никакого дискомфорта.
— Легкость доступа к контенту. Главная цель адаптивного веб-дизайна состоит в том, чтобы вся информация была доступна с любого устройства. В мобильных версиях сайта нередко грешат отсутствием целых разделов меню, что крайне не нравится многим пользователям.

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

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

P.S. Для желающих кодить адаптивно может пригодиться вот эта статья, где можно найти и техники создания резиновых изображений, и нестандартные взгляды на интерфейс таблиц для маленьких экранов:

Несколько примеров удачного веб-дизайна для вдохновения:

www.anderssonwise.com

www.madebysplendid.com

www.palantir.net

www.orestis.nl