web-design-chameleopn

Веб-дизайн — хамелеон

Теория и практика -
Share Button

Замечательным свойством этих животных, является адаптация под цвет окружающей среды, но какое это имеет отношение к веб-дизайну и проектированию интерфейсов, спросите вы? А речь пойдет о «Responsive web design» — адаптивном веб-дизайне (дословно отзывчивый веб-дизайн) — технология создания веб-страниц, удобно просматриваемых с различных устройств, с которых есть возможность выхода в интернет (по материалам Wikipedia).

Beyond the mobile web...

 Скриншот презентации «Beyond the mobile web…»

Основные предпосылки возникновения

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

То, что потребность в планшетных компьютерах уже осознал массовый потребитель, наглядно проиллюстрировано исследованием «Top 10 Mobile Internet Trends» компании KPCB (мировой лидер в области венчурных инвестиций).

 Top 10 Mobile Internet Trends

К сожалению, сейчас большинство сайтов СНГ не приспособлено к новым реалиям  (исключение — webmark.com.ua), они отображаются неправильно или крайне неудобно на устройствах, отличных от ноутбука или домашнего компьютера. Для проверки сайта на соответствие адаптивному дизайну, достаточно изменить размер окна браузера и посмотреть на отображения контента в нем.
Некоторые компании пытаются решить эту проблему внедрением отдельных сайтов для каждого популярного устройства, но это крайне невыгодно финансово и требует дополнительных ресурсов для поддержки.

Принципы RWD

— Использование резинового типа макета и изображений, т.е. проектирование и создание дизайна сайта с учетом работы на всем спектре разрешений: от мобильных устройств до широкоформатных дисплеев.

— Программирование как на стороне клиента с помощью javascript для добавления эластичности видеороликам с youtube, так и на стороне сервера для передачи мобильным устройствам изображений меньшего объёма и разрешения

— Необходимо думать о мобильных устройствах с самых ранних этапов проектирования.

— Верстка с использование Media Queries.

Изображение из статьи «Responsive Web Design: What It Is and How To Use It»

 

Подводные камни при разработке сайтов

Даже при решении проблемы с определением разрешения экрана, возникает вопрос, как оптимизировать контент – порядок блоков информации, медиа, сторонних виджетов, ссылок, дизайна в целом – исходя из принципов RWD. Джейсон Григсби описывая, почему метод RWD не дает решения большинства проблем верстки, называет такие проблемы:

— Рост объема кода, губительный для слабых мобильных устройств.

— Низкую скорость загрузки по сравнению со специальной «мобильной» версией.

— Неоправданные затраты траффика и ресурсов при уменьшении изображений браузером.

— Неувязки Media Queries в отношении отображения разных вариантов изображения, особенно фонового.

Более того, часто страдает эстетическая составляющая дизайна, принесенная в жертву практичности и универсальности.


RWD и наше будущее

 Изображение из статьи «Responsive Web Design Is Our Future»

Мы с вами сейчас живем в переходный период, когда формируются новые подходы и выявляются новые проблемы. Так что будьте готовы к постоянным изменениям и возвратам к хорошо забытому старому – но на новом уровне. Это восхищает и пугает одновременно, но никуда нам не деться (перевод futurefriend.ly).

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

13 февраля Якоб Нильсен опубликовал в своем блоге статью «Mobile Sites vs. Apps: The Coming Strategy Shift» в которой утверждает что в ближайшем будущем веб-приложения вытеснят нативные. Объясняя это тем, что создание сайта по технологии RWD потребует от разработчиков проектирования всего несколько интерфейсов, в то время как для создания приложений для различных платформ потребуется их великое множество. Другими причинами он называет удобство интеграции в интернете и отсутствие ограничений со стороны площадок по продаже приложений (App Store, Android Market и прочих).


Список литературы

Для более глубокого изучения технологии, советую ознакомиться с двумя на данный момент вышедшими книгами:

1. Итан Маркотт «Отзывчивый веб-дизайн». Итан является основоположником понятия RWD, занимался написанием книги в процессе работы над адаптивным сайтом «The Boston Globe». В ней собрано большое количество полезной информации, как теоретического, так и практические характера.

2. Аарон Густавсон «Adaptive Web Design». Обязательная книга для веб-дизайнеров, которые стремятся создавать сайты, эффективно работающие во всех браузерах и на всех платформах, идут в ногу с передовыми технологиями. Книга рассказывает об истории, механизмах и практике применения прогрессивных улучшений.

Джеффри Зельдман, основатель «Happy Cog», о книге Густафсона:
«Благодаря прогрессивным улучшениям, мы перестаем проектировать для браузеров и начинаем проектировать для людей…»

Примеры сайтов с использованием RWD:
http://mediaqueri.es
http://www.smashingmagazine.com
http://earthhour.fr

Технические аспекты реализации:
«Effective Design for Multiple Screen Sizes» by Bryan Rieger
«CSS Media Query for Mobile is Fool’s Gold» by Jason Grigsby
«RESS: Responsive Design + Server Side Components» by Luke Wroblewski

Share Button