В чем разница между фиксированным, гибким, адаптивным и отзывчивым дизайном

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

Фиксированный дизайн

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

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

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

Гибкий макет

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

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

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

Адаптивный

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

Преимущество – высокий уровень UX. А также высокая скорость загрузки. При загрузке вариантов макета сайта размеры и положение элементов корректируются не сильно. Сервер отправляет только то, что нужно.

Недостатком адаптивного дизайна является сложность его разработки и реализации.

Отзывчивый

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

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

Отзывчивые макеты являются самыми популярными.Современные пользователи ожидают, что не получат «меньший» UX или меньше функций только потому, что они пользуются мобильным устройством.
Недостаток адаптивного дизайна заключается в том, что его реализация требует большего объема времени и усилий, затрачиваемых на проектирование и тестирование, по сравнению с адаптивными макетами.

Адаптивный дизайн вполне подходит для разных диагоналей экранов пользовательских устройств. Неотзывчивый дизайн выигрывает благодаря тому, что позволяет избежать проблемы растянутых и «сплющенных» интерфейсов.