В чем разница между адаптивным и резиновым дизайном

Адаптивный и резиновый дизайн

В чем разница между адаптивным и резиновым дизайном

08.05.2019
Рейтинг: 5/5 - 2 голосов

Какой дизайн зовется адаптивным, а какой резиновым, в чем разница и где стоит использовать адаптивный или резиновый дизайн.

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

В сети есть такое понятие, как «mobile first», согласно данной концепции, сайты в первую очередь разрабатываются для мобильных устройств, и только после для компьютеров. Ведь не зря!) В мировом интернете, в 2016году,  число пользователей интернета с мобильных устройств впервые переросло пользователей интернета с компьютеров. Это серьезный аргумент, требующий особого внимания!

Покрытие мобильного и компьютерного интернета

 

Кто такой адаптивный дизайн?)

Прародителем этого формата и отличным, гибким инструментом можно назвать bootstrap (https://getbootstrap.com/).

Что же подразумевает под собой адаптивная верстка? В первую очередь это поведение элементов, блоков сайта в зависимости от того, на каком устройстве отображается материал. Скажем иначе. У адаптированного сайта есть точки слома (breakpoint), для широких экранов компьютеров это 1200px, для узких экранов версии 992px, для планшетов 768px, и для мобилок 567px. О чем это говорит? На каждом разрешении верстка сайта должна структурировать блоки под используемое устройство. Концепция говорит о том, что в адаптивном или резиновом сайте не должно использоваться горизонтального скрола, если это не задумано  дизайнером.

Адаптивная верстка

 

А как себя ведет резиновый дизайн

Тут дела обстоят немножко иначе. У резинового дизайна нет breakpoints. Так как же себя ведут элементы? Адаптация блок и элементов дизайна происходит в зависимости от процентного соотношения размера окна экрана. Иначе говоря, элементы верстки могу группироваться начиная с 1920px, изменять свое положение. Резиновая модель в большей степени используется для создания широкоформатных сайтов, в таблицах. Пример такого дизайна – метрика яндекса.

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

 

Что и когда лучше использовать?

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

Комментарии

коммент.

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *


Форматы или расширения изображения для сайта
09.07.2019
Рейтинг: 5/5 - 1 голосов
Уходящие тенденции. Дизайн в стиле Flat
14.05.2019
Рейтинг: 4.5/5 - 2 голосов
Какие бывают иконки для сайтов
27.05.2019
Рейтинг: 5/5 - 1 голосов