Как сделать сайт адаптивным: полезные советы

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

маленький экран, сетка необходима для адаптации к различным размерам экрана.

5

Макет Shifter

Этот тип макета отлично зарекомендовал себя при работе над визуально-тяжелыми проектами

(сайты агентств, портфолио, проекты об искусстве и фотогалереи).

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

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

широкие типы экранов - более сложный дизайн. Здесь у дизайнера появляется много работы.

Колонка Drop

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

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

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

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

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

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

6

Off Canvas

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

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

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

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

Твики

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

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

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

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

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

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

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

дизайна?

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

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

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

7

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

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

Футер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8

Вот несколько моментов, которые вы должны понять:

• Типографика основывается на структуре и общем представлении контента. Вы должны

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

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

• Высота, размер текста должны корректироваться относительно пропорций экрана. Здесь

полезно использовать относительные единицы измерения (ems и rems).

• Если ваш текст соотносится с размером экрана, вы получите естественный и аутентичный

дизайн. Адаптивная типографика, как правило, подкрепляет эту аутентичность.

Используйте адаптивную типографику, проведите тщательный анализ поведения пользователей.

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

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

текста по отношению к области просмотра.

Раньше мы рассматривали типографику как набор фиксированных решений,

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

Несколько хороших туториалов по адаптивной типографике:

Основы адаптивной веб-типографики

Подробное руководство по основам типографики