Жидкий дизайн BAUWEB (3,0,0)(liquid design) технический приём веб разработки современного сайта.

Жидкий дизайн (fluid design) представляет собой технику дизайна, где элементы используют относительные единицы, такие как проценты (%) Вместо фиксированных пикселей. Это позволяет контенту постоянно масштабироваться и адаптироваться в соответствии с любыми размерами окна браузера, исключая горизонтальную прокрутку окна.

Особенности жидкого дизайна

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

Основные идеи жидкого дизайна

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

Преимущества жидкого дизайна

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

Недостатки жидкого дизайна

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

Использование жидкого дизайна в веб разработке

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

bauweb liquid design жидкий дизайн

Свяжитесь со мной

BAUWEB Михаил
+7 906-756-42-01
uks605@mail.ru

https://t.me/BogoyavlenskiyMichael

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

 

Написать мне