веб-дизайн, UX
Юзабилити

Адаптивный дизайн как обязательная составляющая успешного проекта

Автор: Денис Давыдов27.07.2015

В отличие от ситуации 15-летней давности, современным веб-разработчикам необходимо учитывать в процессе работы огромное количество разнообразных нюансов. Много усилий и ресурсов приходится тратить на обеспечение совместимости проекта с целым рядом платформ и браузеров, в каждом из которых сайт должен функционировать если не идеально, то хотя бы максимально корректно и полноценно. Для обеспечения совместимости такого уровня разработчики используют различные подходы, позволяющие в той или иной степени унифицировать сайт, делая его доступным и корректно функционирующим в различных браузерах. Обобщая методы достижения подобной унификации, можно выделить две разные, но во многом похожие концепции –Adaptive design (Адаптивный дизайн) и Responsive design (Отзывчивый дизайн). Разница между этими двумя понятиями во многом достаточно расплывчата и трактуются они по-разному, однако два этих подхода все же обладают характерными особенностями, о которых мы и поговорим в нашей сегодняшней статье.

Адаптивный и отзывчивый дизайн. Есть ли разница?

веб-дизайн, UX

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

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

веб-дизайн, UX

Макеты, с которыми работают дизайнеры и разработчики, делятся на четыре категории – фиксированные, резиновые, адаптивные и отзывчивые.

веб-дизайн, UX

Способ отображения сайта с фиксированным макетом на различных типах устройств – неудобно и архаично.

Фиксированные макеты представляют собой самый архаичный и малопригодный для современной разработки тип макетов. Их свойства очень просты – мы изначально задаем определенную ширину в пикселях, руководствуясь тем разрешением экрана, которое имеет наибольшее распространение в данный момент времени. 15-20 лет назад такой подход был вполне разумным, однако учитывая то электронное изобилие с самыми неожиданными разрешениями экранов, которое мы имеем сегодня, представить серьезную работу с фиксированным макетом в нынешних реалиях крайне затруднительно.

веб-дизайн, UX

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

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

веб-дизайн, UX

Способ отображения сайта, использующего адаптивный макет.

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

веб-дизайн, UX

Отзывчивый макет плавно растягивает контент в зависимости от разрешения устройства.

Отзывчивые макеты сочетают принципы резинового и адаптивного типов. Растягивая контент по экрану, они учитывают также и данные медиа-запросов, благодаря чему макет точно и плавно адаптируется к конкретному разрешению.

Адаптивный дизайн

Как мы уже говорили, споры о том, что представляет собой адаптивный дизайн, ведутся до сих пор. Действительно, разные разработчики и специалисты дают адаптивному дизайну разные определения, но, тем не менее, этому подходу присущи вполне определенные, характерные черты. В первую очередь, говоря об адаптивном дизайне, мы подразумеваем под этим понятием универсальный сайт, одинаково хорошо (насколько это возможно) работающий как в браузере смартфона, так и на настольной системе. Создатели сайта, использующие технику адаптивного дизайна, сталкиваются с необходимостью находить компромисс практически во всем – с этим же связана и та трудоемкость, которая характерна для создания, поддержки и последующего развития адаптивного сайта. Прорабатывая каждый элемент, дизайнеры и верстальщики должны помнить о том, что он должен безупречно выполнять свои функции на целом ряде самых разнообразных платформ.

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

Адаптивный дизайн это отзывчивый макет, progressive enhancement («прогрессивное улучшение») и mobile first («сначала мобильные»).

Из этих трех техник и складывается вся сущность метода, который мы называем адаптивным дизайном. И если с отзывчивыми макетами все более-менее ясно, то о прогрессивном улучшении и mobile first стоит поговорить подробнее.

веб-дизайн, UX

Концепция прогрессивного улучшения заключается в предоставлении пользователю полноценной функциональности сайта вне зависимости от того, насколько устаревшим или урезанным программным обеспечением он пользуется. При использовании подхода progressive enhancement, сайт должен корректно и полностью функционировать даже на сильно устаревшем браузере с отключенными CSS и javascript. Таким образом, мы охватываем максимально широкую аудиторию, а различные новые «фишки», с которыми могут взаимодействовать наиболее современные браузеры, реализуются только при условии обратной совместимости с более старым программным обеспечением. Точно также, CSS и javascript применяются исключительно для улучшения внешнего вида и удобства сайта, когда HTML является обязательной основой сайта, созданного по технологии прогрессивного улучшения.

Кстати, подход, противоположный progressive enhancement, называется graceful degradation («постепенная деградация») и заключается он в том, что при разработке сайта приоритет отдается самым новым платформам и последним версиям браузеров, максимально используя все их новейшие и мощные возможности. Поддержка же функциональности сайта в устаревших браузерах осуществляется в последнюю очередь. В некоторых случаях веб-разработчики предпочитают graceful degradation прогрессивному улучшению, и связано это с разработкой тех проектов, которые не продуманы «от и до» и функциональность которых формируется непосредственно в процессе создания сайта. Особенно это актуально для проектов со сложной структурой и функциями, реализуемыми «на ходу» в процессе разработки. Как правило, graceful degradation означает разработку для десктопов, оснащенных самыми свежими версиями браузеров, обладающих соответствующими широкими возможностями.

Подытоживая рассуждения на тему progressive enhancement vs graceful degradation, можно сделать следующий вывод: продуманный до деталей и утвержденный проект, который должен быть доступен как можно более широкой аудитории, следует разрабатывать, используя технику progressive enhancement, в то время как создаваемый и продумываемый в процессе разработки и\или сложный, насыщенный проект требует использования техники graceful degradation.

веб-дизайн, UX

Что касается третьей составной части адаптивного дизайна, а именно mobile first («сначала мобильные»), то к этой концепции обращаются все больше и больше разработчиков. Причины этой тенденции совершенно очевидные ¬¬– с каждым годом мобильный интернет становится все более доступным и быстрым, равно как и увеличивается количество пользователей, выходящих в Сеть с помощью различных мобильных гаджетов. И, несмотря на то, что большая часть пользователей по-прежнему отдает предпочтение серфингу из дома или рабочего места, общее направление движения очевидно – мы входим в эпоху повсеместного доступа к Сети с помощью разнообразных мобильных гаджетов. По этой причине концепция mobile first является, пожалуй, одной из самых актуальных для современной веб-разработки.

С использованием подхода mobile first связано множество положительных моментов. Во-первых, ориентируясь на небольшие экраны мобильных устройств, вы сосредотачиваетесь на наиболее важных и полезных функциях, не отвлекаясь на лишнее. Во-вторых, вы изначально делаете мобильную версию сайта полноценной и абсолютно функциональной, не уступающей впоследствии десктопной версии. Благодаря этому ваши пользователи не столкнутся с раздражающей урезанностью мобильной версии сайта, что в высшей степени положительно скажется на их опыте и на вашей конверсии. Кроме того, зачастую мобильная версия сайта оказывается весьма пригодной для использования на десктопе.

Разработчики небезызвестной компании ZURB по поводу концепции mobile first заявляют следующее:

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

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

Отзывчивый дизайн

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

Подробнее о принципах и полезных техниках адаптивного дизайна

Content Out

веб-дизайн, UX

Казалось бы, весьма очевидная мысль – при создании адаптивного, как в принципе и любого другого сайта, следует в первую очередь руководствоваться контентом и отталкиваться при проектировании непосредственно от него. Однако, зачастую веб-разработчики забывают об этом, фокусируясь на второстепенных вещах. Применительно к адаптивным сайтам, такой подход называют content out и подразумевает он не только проектирование сайта исходя из особенностей и данностей контента, которым мы располагаем, но и стратегию грамотного и последовательного предоставления контента конечному пользователю. А это, как вы уже, вероятно, догадались, возможно только при проведении всесторонних исследований этого самого конечно пользователя, его предпочтений и наклонностей.

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

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

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

Фреймворки

веб-дизайн, UX

Узнаваемый маскот знаменитого фреймворка Foundation.

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

Разрабатывая адаптивный сайт и придерживаясь идеологии mobile first, вы должны будете выбрать соответствующий фреймворк – это будет залогом успешной и удобной работы. В последнее время популярность набирает фреймворк Foundation от упомянутых выше разработчиков ZURB. Согласно официальному заявлению, Foundation это «The most advanced responsive front-end framework in the world/Самый продвинутый отзывчивый фреймворк в мире». С этим претенциозным заявлением, конечно, можно поспорить, однако, действительно, значительное количество разработчиков отдают свое предпочтение фреймворку Foundation. Работа с Foundation на самом деле очень удобна и относительно проста. Кроме того, что этот фреймворк избавляет вас сразу от ряда неприятных проблем, он, как и положено адаптивному фреймворку, полностью соответствует концепции mobile first.

И да, если вы еще не слишком хорошо разбираетесь в CSS фреймворках, но при этом обладаете сильным желанием продолжать заниматься веб-разработкой, то вы просто обязаны потратить время и силы на осваивание таких фреймворков, как Foundation.

Метод работы с Media Queries

веб-дизайн, UX

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

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

Замечательный способ, позволяющий создать сайт, который еще долго будет оставаться актуальным и хорошо функционирующим на любых новых гаджетах, заключается в постепенном движении от наименьшего разрешения к большему. Начинать тестирование разрабатываемого сайта следует с гаджета, обладающего наименьшим разрешением, постепенно увеличивая размер рабочего пространства и браузера. При таком подходе, означающем движение от mobile first к десктопу, вы постепенно будете сталкиваться с проблемами адаптации, и, при первой такой проблеме вы будете решать ее с помощью соответствующей точки контроля. Пройдя такой путь от самого небольшого экрана к полноценным расширениям, используемым в формате десктопа, вы сможете при помощи точек прерывания и media queries устранить все ошибки и недочеты, связанные с увеличением рабочего пространства.

Техника скетчинга

веб-дизайн, UX

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

В том случае, если вы находите бумагу с карандашом все-таки достаточно архаичным инструментарием, то вам может очень понравится работать со специальными сервисами и приложениями, позволяющими быстро и эффективно создавать набор необходимых набросков. В качестве примера можно привести такие сервисы как Sneakpeekit и Interface Sketch. Что касается приложений, то их огромное множество, особенно для iPad.

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

Изображения и их масштабирование

веб-дизайн, UX

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

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

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

Пара слов о необходимости делать код лаконичным

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

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

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

P.S. Сервисы для тестирования адаптивных сайтов

В заключение статьи хотелось бы упомянуть о наиболее удобных и практичных сервисах, позволяющих без использования физических гаджетов увидеть, как ваш адаптивный сайт будет работать на различных разрешениях и устройствах.
1. Responsive Web Design Testing Tool. Примечательно, что сервис доступен не только в онлайн-формате, но и в виде кода;
2. resizeMyBrowser. Сервис позволяет делать ресайз окна браузера в соответствии с различными разрешениями и моделями устройств. В открывшемся окне необходимого разрешения можно загружать любой сайт и анализировать степень его адаптивности.

Реакция на статью
поделюсь
200%
интересно
200%
полезно
100%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

You must log in to post a comment