Адаптивный, фиксированный, резиновый или отзывчивый дизайн landing page. В чем отличия?

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

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

Так что, если хотите помочь или просто о чем-то почитать на блоге, пишите туда, буду стараться рассматривать ваши вопросы на блоге  :)

Фиксированная верстка

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

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

Резиновая верстка

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

Здесь просто пропорционально уменьшается контент, а структура не меняется. У меня на картинке с пропорциями проблемы, но думаю суть понять можно:

Адаптивная верстка и Отзывчивая верстка

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

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

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

Например, максимальная ширина экрана была 1170px, тогда мы просто начинаем уменьшать окно браузера и смотреть, в какой момент наш дизайн начинает рушится, тогда добавляем медиа запрос с нужным разрешением, прописываем нужные стили и двигаемся дальше, вплоть до 320px. Ничего сложного... Вопрос мотивации :)

Если попытаться как-то обобщить, то я бы сделал это так:

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

Но на практике часто приходится использовать смешанную верстку. Так как придерживаться одного стиля (Адаптивного или отзывчивого) достаточно тяжело. Но при необходимости можно. Важно понимать, что при использовании исключительно отзывчивого дизайна, придется использовать svg графику, так как на разрешении свыше 2000 пикселей ваши png иконки будут смотреться плачевно. Да и глупо грузить изображения, которые готовились под большое разрешение, на устройствах с экраном 800 пикселей.

Мне никогда не приходилось делать сайт используя исключительно отзывчивую верстку, считаю это очень трудоемким процессом, с множеством нюансов. В большинстве же случаев в ТЗ присылают макет ограниченной ширины (1170 - 1200 px), от которого и "пляшем". Постепенно подстраивая дизайн под меньшие разрешения. Я обычно использую медиа запросы+%+ когда нужно - px;

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