Меню Еще

Отзывчивый веб-дизайн

29.11.2012

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


Отзывчивый веб-дизайн (Responsive Web Design) — подход к веб-разработке, при котором на основе изменяющегося «резинового» макета и элементов создается универсальный дизайн, способный адекватно воспроизводиться на любых устройствах.

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

Принципы работы отзывчивого дизайна одновременно просты и эффективны. Во-первых, вместо ограниченной по ширине страницы используется «резиновый» макет на пропорциональной основе.

Интересно, что если в свое время фиксированная блочная верстка сменила «резиновую» табличную, то теперь на почве отзывчивого дизайна происходит обратный процесс.

Ключевой момент — способность макета изменять размеры и положение своих элементов в зависимости от определенного современными средствами CSS3 разрешения экрана (или размера окна браузера). Формирование оптимального макета страницы осуществляется с помощью Media Queries.

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

Вместе с идеями практичности и универсальности отзывчивый дизайн приносит совершенно новый принцип разработки — «Mobile First» — предлагающий в проектировании веб-сайта отталкиваться в первую очередь от самых небольших и наиболее ограниченных мобильных устройств, впоследствии наращивая возможности для устройств с лучшими характеристиками.

До появления этих принципов основным средством адаптивного дизайна было создание отдельной «мобильной» версии сайта. Но в в последнее время распространение получили устройства, одинаково далекие как от десктопа, так и от телефона. Сегодня веб-страницы можно увидеть и на миниатюрных мониторах автомобильных GPS-навигаторов, и на экранах домашних кинотеатров с поддержкой Full HD. Разрешение экрана интернет-аудитории перестало колебаться между двумя «основными» показателями и отправилось в свободное плавание.

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

Отзывчивый дизайн уже несколько лет является предметом широкого обсуждения и споров. С одной стороны, он действительно стал своевременным ответом на острую необходимость, назревшую вместе с технологическим прогрессом и стремительным ростом «мобильной» интернет-аудитории. Но, с другой стороны, это не избавляет его от существенных недостатков.

Средства, позволяющие изменять структуру макета страницы и размеры медиа-элементов «на ходу» требуют большого объема программного кода, способного сделать невозможной работу с сайтом со «слабых» мобильных устройств.

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

К числу недостатков относится и несовершенство Media Queries, нестабильно работающего с некоторыми браузерами и устройствами и не всегда успешно справляющегося со своими задачами, особенно при «отзывчивом» отображении фонового изображения.

Помимо этого, универсальность накладывает а графический дизайн страниц определенные ограничения, с которыми многие дизайнеры не хотят мириться.

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

Учитывая скорость и непредсказуемость развития мобильного интернета и соответствующих технологий, на данный момент трудно судить о путях развития адаптивного дизайна, но уже сейчас стоит сделать ставку на универсальность и практичность, принесенные в современную «адаптивную» веб-разработку принципами отзывчивого дизайна.


Вернуться назад