Адаптивный дизайн(Разработчики)

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

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

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

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

Основные принципы

Отзывчивость (Responsive Web Design (RWD)):

• применение гибкого макета на основе сетки (flexible, grid-based layout);
• использование гибких изображений (flexible images);
• работа с медиа-запросами (media queries);

Адаптивность (Adaptive Web Design (AWD)):

• применение постепенного улучшения;
• проектирование для мобильных устройств с самых ранних этапов («Mobile first»)
• плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)

Адаптивность и отзывчивость (Adaptive + Responsive model)

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

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

Адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе пользовательского агента (user agent) и типа устройства. Основное различие между ними заключается в DOM-структуре.  При отзывчивом дизайне у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как при адаптивном у нас другая структура кода и потенциально разный опыт.

Методы отзывчивого дизайна

При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом:

1. Изменение структуры (Reflow)
2. Изменение размера (Resize)
3. Показать / Скрыть (Show/Hide)

Изменение структуры (Reflow): мы можем изменить структуру макета, чтобы лучше соответствовать области просмотра. В большинстве случаев это приводит к тому, что контент складывается в стек (это не всегда хорошо).

Изменение размера (Resize): некоторые компоненты интерфейса являются текучими, как большинство HTML-элементов. Они заполняют доступное пространство и при необходимости меняют структуру.

Показать / Скрыть (Show/Hide): некоторые части интерфейса скрыты из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.

Метод адаптивного дизайна

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

Breakpoints (контрольная точка)

Breakpoints (переломные/контрольные точки) —  изменение условий с одного на другое, при котором внешний вид сайта (раскладка) изменяется. Часто встречается в адаптивной вёрстке с использованием медиавыражений.

Основные размеры экранов:

0 – 600px: телефон

600 – 900 пикселей: планшет в книжной ориентации

900 – 1200px: планшетный пейзаж

[1200 – 1800] – это то, где применяются наши обычные стили

1800px + : большой рабочий стол

Сначала мобильные («Mobile first»)

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