Post Image

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

Резиновый

Является одним из самых простых в реализации и, одновременно с этим, самых очевидных для пользователя видов представления содержимого. Основные блоки резинового дизайна сжимаются до ширины экрана большинства мобильных устройств, а при невозможности — перестраиваются в одну длинную ленту. Этот макет может быть достаточно просто реализован при помощи адаптивных CSS фреймворков, одним из которых является Twitter Bootstrap.

Перенос блоков

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

Замена макетов

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

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

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

Панельный

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

Представленные выше методы не претендуют на возможность стать универсальными решениями. Особенности конкретного веб проекта диктуют наиболее подходящие адаптивные методы и решения.

Следующий
Классификация шрифтов и особенности их использования в веб дизайне