Что такое гибкий дизайн и как он используется на сайтах?

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

«Почему бы просто не уменьшить его?» – могла бы спросить более молодая, более наивная версия меня. «Просто возьмите настольную версию и сделайте ее меньше. Задача решена!" Если бы это было так просто …

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

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

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

Что такое гибкий веб-дизайн?

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

Представим себе веб-сайт с тремя соседними элементами: один с шириной 50% и два меньших элемента с шириной 20% (для этой демонстрации высота не имеет значения). Также сделаем между ними поля.

При отображении в окне браузера шириной 1000 пикселей веб-сайт выглядит так:

Ширина каждого элемента в пикселях основана на ширине области просмотра 1000 пикселей.

Когда мы уменьшаем окно браузера до 600 пикселей, гибкий дизайн пропорционально масштабирует эти элементы:

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

Гибкие сетки в веб-дизайне

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

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

Источник изображения

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

Однако гибкий дизайн – не единственный подход – давайте сравним его с тремя другими распространенными макетами: фиксированным, адаптивным и адаптивным.

Фиксированный дизайн против жидкого дизайна

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

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

Адаптивный дизайн против гибкого дизайна

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

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

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

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

Адаптивный дизайн против гибкого дизайна

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

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

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

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

Возьмем, к примеру, адаптивный веб-сайт бренда одежды Kotn. Его контрольные точки установлены на 960 пикселей и 560 пикселей. Обратите внимание на эффект этих точек останова, когда я сжимаю окно браузера.

Источник изображения

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

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

Когда следует использовать плавный дизайн?

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

Рассматривая плавный дизайн, вы должны подумать о:

• Показатели аудитории: инструменты отслеживания, такие как Google Analytics, могут сегментировать ваш трафик по компьютерам, планшетам и мобильным устройствам. Используйте метрики, чтобы сообщить, куда вы вкладываете свои дизайнерские ресурсы.
• Контент сайта: если на вашем сайте относительно мало текста, мультимедиа и интерактивных функций, вы можете обойтись простым плавным дизайном на некоторых или всех страницах. В противном случае лучше использовать адаптивные и отзывчивые принципы. На этом этапе полезно отображать макет с помощью каркасов.
• Ресурсы: из-за своей относительной простоты гибкие конструкции обычно требуют меньше времени, денег и усилий для внедрения с нуля. Тем не менее, конструкторы веб-сайтов с готовыми адаптивными шаблонами страниц сделали сложные адаптивные страницы более доступными для тех, кому не хватает дизайнерских решений.

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

Источник записи: https://blog.hubspot.com