Колонка Drop

Идеально подходит для сайтов, страницы которых пользователи просматривают на широких

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

отображении на самых узких экранах. В отличие от большинства “резиновых” макетов, этот

паттерн имеет элементы, которые остаются неизменными, но при этом имеют свойство прекрасно

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

для заполнения собой пространства.

6

Off Canvas

Если у вас есть блог и вам необходимо сосредоточить читателя на большом объеме информации,

off canvas паттерн - ваш выбор. Это скрытая навигация на сайте, которая размещается совсем

близко от основного контента и при нажатии на ссылку в ней, выдвигается из экрана. Реализуется

эффект при помощи JavaScript.

Твики

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

сам макет остается прежним.

Адаптивная навигация

Свободного пространства на мобильных устройствах очень мало, поэтому при разработке

навигации вы должны не забывать о мобильных пользователях. Навигация должна быть интуитивно

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

нельзя упускать из внимания. Итак, каковы же наиболее удачные схемы навигации для адаптивного

дизайна?

Фиксированная панель или “ничего не делай” подход

С помощью этого паттерна панель навигации фиксируется в верхней части экрана, центрируется

и сжимается по мере уменьшения размера окна просмотра. Это самый простой паттерн для

7

реализации, однако он имеет свои недостатки. Если объем вашего контента увеличивается (а со

временем это не избежать), вам придется расширять навигацию.

Футер

Это простая кнопка, которая зафиксирована в хедере со ссылкой на список навигации, размещенный

в футере. Навигация в футере очень удобна (ее легко реализовать и она позволяет высвободить

много места на странице сайта), однако она имеет свойство дезориентировать.

Off-canvas навигация

Этот метод навигации появился в Facebook. Работает он так: пользователь прокручивает страницу

вниз, при достижении определенной точки навигационное меню исчезает, а вместо него появляется

кнопка меню. При нажатии на эту кнопку, открывается меню (обычно слева), а остальная часть

страницы сдвигается вправо.

Складывается впечатление, что большое меню просто невозможно уместить в off-canvas паттерне,

однако это довольно легко решить путем добавления прокрутки.

Адаптивные паттерны навигации можно найти здесь (с CSS сниппетами) и здесь (с примерами).

Адаптивная типографика

При разработке адаптивного сайта типографика должна быть на вершине ваших приоритетов.

Слово - это то, на что мы полагаемся, когда хотим сообщить своим пользователям важную

информацию (цели, предложения, действия и т.д.). Естественно, читаемость и четкость влияют на

восприятие и понимание контента.