Інтернет Мастерская

http://webarty.net/index.php?id=1413563459


Адаптивный веб-дизайн (RWD) и практика его использования

| AMY SCHADE | источник: www.nngroup.com

Определение адаптивного дизайна

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

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

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

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

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

 

Это краткое видео (0:37) показывает,  как реагирует вид сайта,  когда окно браузера сужается и расширяется.

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

Сайт «The Boston Globe» хорошо демонстрирует  использование адаптивного дизайна. Полная  3-х колоночная версия сменяется 2-х колоночной для планшета и одной колонкой для смартфона.

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

Создание дружественного интерфейса

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

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

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

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

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

Внимание на контент

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

Учитываем производительность

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

4-дюймовый смартфон получает тот же код, что и 24-дюймовый настольный монитор. Это может снизить производительность смартфона, если используется медленное интернет-подключение. Вот почему, некоторые сайты с адаптивным дизайном используют специальные запросы хостинг сервера для определения устройства, которое сделало запрос и отправляют ему только ту часть HTML кода, которая предназначена именно этому устройству.

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

Заключение

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

вольный перевод от Chronofag

комментарии