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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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