Отзывчивый дизайн: передовой опыт | иксдф

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

«Отзывчивый дизайн» впервые был придуман веб-дизайнером и разработчиком Итаном Маркоттом в его книге. Отзывчивый веб-дизайн. По умолчанию поддерживается переключение устройств. Пользователи могут начать взаимодействовать с вашим продуктом или услугой на рабочем столе, переключиться на телефон или планшет, а затем вернуться обратно. Давайте внимательно рассмотрим ключевые элементы адаптивного дизайна. Кроме того, в Руководстве по доступности веб-контента (WCAG) веб-отзывчивость (называемая Reflow) определена как один из критериев успеха для доступного контента. Адаптивный сайт также лучше ранжируется в результатах поиска и имеет решающее значение для поисковой оптимизации (SEO).

Что такое адаптивный дизайн?

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

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

3 основных принципа адаптивного дизайна

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

Система жидкостной сетки

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

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

Жидкие изображения

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

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

Медиа-запросы

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

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

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

Лучшие практики и рекомендации по адаптивному дизайну

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

• Отдайте предпочтение масштабируемой векторной графике (SVG). Это формат файла на основе XML для 2D-графики, который поддерживает интерактивность и анимацию.

• Включите три или более контрольные точки (раскладки для трех и более устройств).

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

• Стремиться к минимализм.

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

• Стремиться к доступность.

Забрать

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

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

Ссылки и где узнать больше

Чтобы узнать больше о том, почему адаптивный веб-дизайн важен для доступности, прочтите Руководство WCAG по критерию успеха.
Узнайте больше о мобильный подход предложен Люком Вроблевски.

Главное изображение: © Interaction Design Foundation, CC BY-SA 4.0