Начало новой эры адаптивного веб-дизайна

Как это началось — Фиксированные экраны

На рубеже тысячелетий мы начали создавать интерфейсы для популярных в то время экранов с размерами, скорее всего, 640×480. В большинстве случаев мы даже не планировали прокрутку экрана или же имели внутренние полосы прокрутки для перехода к определенным областям или фрагментам текста. Излишне говорить, что большая часть Интернета в то время также была построена либо на Flash, либо на HTML с таблицами для макета. Это было до смартфонов, и по мере развития технологий мы пережили первый фундаментальный переход к адаптивному дизайну. Мы прошли долгий путь, CSS сильно изменился, и в 2010 году — получили специальные инструменты для работы.

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

Что дальше – Component Driven

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

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

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

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

CSS развивается, и на горизонте наступает новая эра адаптивного веб-дизайна. На данный момент, прошло чуть более 10 лет с тех пор, как мы впервые познакомились с RWD, и экосистема готова к некоторым довольно большим изменениям, которые произойдут с CSS.

Давайте разберемся, каких типов изменений мы можем ожидать, как это может изменить наш подход и то, как мы рассматриваем дизайн наших интерфейсов.

Пользователи могут устанавливать медиа-запросы на основе предпочтений

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

Это ни в коем случае не полный список, но чтобы дать вам некоторые идеи, медиа-запросы на основе предпочтений могут включать:

CSS @prefers-reduced-motion @prefers-contrast @prefers-reduced-transparency @prefers-color-scheme @inverted-colors

12345

@prefers-reduced-motion@prefers-contrast@prefers-reduced-transparency@prefers-color-scheme@inverted-colors

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Другой популярный медиа-запрос — @prefers-color-scheme — позволяет нам переключать дизайн на светлый или темный режим в зависимости от предпочтений пользователя и настроек их операционной системы. Он не зависит от переключателя пользовательского интерфейса, который пользователь должен использовать для перехода в темный режим, переключение произойдет автоматически.

Медиа-запросы на основе предпочтений позволят нам адаптировать пользовательский интерфейс к конкретному пользователю.

Контейнерные запросы для вдохновления новой жизни в вашу систему дизайна

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

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

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

Даже сам Итан Маркотт объясняет, почему контейнерные запросы имеют такое большое значение, на которое мы должны обратить внимание.

Учитывая различные форм-факторы

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

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

Зачем нам это нужно?

Я знаю, о чем вы думаете, мы разрабатываем над веб-приложениями и используем адаптивный веб-дизайн уже более 10 лет. Мы довольны всем, так почему же мы должны что-то менять? Что ж, мы стремимся к миру, в котором вещи гипер-актуальны для аудитории. Наш веб-опыт должен быть не чем иным, как попыткой адаптироваться к потребностям пользователя. Кроме того: что-то вроде контейнерных запросов имеет большой смысл с развитием систем проектирования и с тем, как мы создаем более портативную сеть.

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

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

Автор: Francois Brill

Источник: webformyself.com