Какая разница между Статическим, Жидким, Адаптивным и Отзывчивым дизайном?

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

 

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

 

Статический макет веб-страницы

Статический макет страницы (иногда его называют «фиксированным» или «с фиксированной шириной») использует заданный размер страницы и не изменяется в зависимости от ширины браузера. Другими словами, такой макет страницы имеет постоянную и не изменяющуюся ширину (очень популярной была ширина в 960 пикселей). Именно на таком макете традиционно строились все веб-сайты в Интернете до начала 2010-х годов, когда стали появляться современные CSS медиа-запросы.

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

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

 

Жидкий (liquid, fluid) макет страницы

Жидкий макет страницы (иногда называемый «подвижным» или «с относительной шириной») использует в CSS-стилях относительные единицы измерения вместо фиксированных. Обычно в «жидких» макетах шаблона используются проценты вместо пикселей, но также набирают популярности такие относительные единицы измерения, как например em (пропорции для шрифта), vm (1% ширины окна), vh (1% высоты окна).

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

 

Адаптивный макет страницы

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

Медиа-запрос – это логическое выражение в CSS. Если перевести медиа-запрос с машинного на человеческий язык, инструкции стилей могут звучать приблизительно так: «Если ширина браузера равна 1280 пикселям, установить блок с основным контентом страницы шириной в 850 пикселей. Если браузер имеет ширину 1920 пикселей, установить блок с основным контентом страницы шириной в 1450 пикселей».

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

 

Отзывчивый макет страницы

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

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

Share

Последние посты

Сомерсет Моэм

Когда вы станете старше, вы поймете, что в мире можно хоть как-нибудь жить только при… Читать далее

27/03/2024

Михаил Грушевский

Все учатся своему родному языку, а наша беда такова, что нужно учить его больше, чем… Читать далее

26/03/2024

ТОП-5 надежных покерных обменников

Профессиональный покер – это многочисленные турниры и крупные суммы, что требует правильной настройки финансовых инструментов.… Читать далее

25/03/2024

Гай Юлий Цезарь

Все вокруг стремятся истребить врагов, но не объединиться с друзьями Гай Юлий Цезарь   Читать далее

24/03/2024

Как выбрать оптимальный смартфон для ребенка?

Сегодняшние дети сталкиваются с технологиями с самого раннего возраста, и смартфон уже давно перестал быть… Читать далее

22/03/2024

Выбираем электроскутер: важные критерии и характеристики

Лет 20 назад наблюдался пик популярности скутеров с двигателем внутреннего сгорания (ДВС). Маленькие, юркие, с… Читать далее

21/03/2024