Как сделать сайт адаптивным: полезные советы - "TemplateMonster"
5
Макет Shifter
Этот тип макета отлично зарекомендовал себя при работе над визуально-тяжелыми проектами
(сайты агентств, портфолио, проекты об искусстве и фотогалереи).
Различные макеты используются для маленьких, средних и больших типов экранов. Вы должны
создать дизайн для каждого из них. Как правило, маленькие экраны имеют сложный макет, более
широкие типы экранов - более сложный дизайн. Здесь у дизайнера появляется много работы.
Колонка Drop
Идеально подходит для сайтов, страницы которых пользователи просматривают на широких
экранах. Этот макет может быть как многоколоночным, так и иметь всего одну колонку при
отображении на самых узких экранах. В отличие от большинства “резиновых” макетов, этот
паттерн имеет элементы, которые остаются неизменными, но при этом имеют свойство прекрасно
адаптироваться к различным размерам экранов. Независимо от размера, доступен видовой экран
для заполнения собой пространства.
6
Off Canvas
Если у вас есть блог и вам необходимо сосредоточить читателя на большом объеме информации,
off canvas паттерн - ваш выбор. Это скрытая навигация на сайте, которая размещается совсем
близко от основного контента и при нажатии на ссылку в ней, выдвигается из экрана. Реализуется
эффект при помощи JavaScript.
Твики
Этот простой и незатратный метод отлично подходит для одноколоночных сайтов. Контент, поля, отступы слегка увеличиваются при использовании определенного размера экрана, в то время как
сам макет остается прежним.
Адаптивная навигация
Свободного пространства на мобильных устройствах очень мало, поэтому при разработке
навигации вы должны не забывать о мобильных пользователях. Навигация должна быть интуитивно
понятной, легкой, ненавязчивой и доступной. Эти характеристики являются обязательными, их
нельзя упускать из внимания. Итак, каковы же наиболее удачные схемы навигации для адаптивного
дизайна?
Фиксированная панель или “ничего не делай” подход
С помощью этого паттерна панель навигации фиксируется в верхней части экрана, центрируется
и сжимается по мере уменьшения размера окна просмотра. Это самый простой паттерн для
7
реализации, однако он имеет свои недостатки. Если объем вашего контента увеличивается (а со
временем это не избежать), вам придется расширять навигацию.
Футер
Это простая кнопка, которая зафиксирована в хедере со ссылкой на список навигации, размещенный
в футере. Навигация в футере очень удобна (ее легко реализовать и она позволяет высвободить
много места на странице сайта), однако она имеет свойство дезориентировать.
Off-canvas навигация
Этот метод навигации появился в Facebook. Работает он так: пользователь прокручивает страницу
вниз, при достижении определенной точки навигационное меню исчезает, а вместо него появляется
кнопка меню. При нажатии на эту кнопку, открывается меню (обычно слева), а остальная часть
страницы сдвигается вправо.
Складывается впечатление, что большое меню просто невозможно уместить в off-canvas паттерне,
однако это довольно легко решить путем добавления прокрутки.
Адаптивные паттерны навигации можно найти здесь (с CSS сниппетами) и здесь (с примерами).
Адаптивная типографика
При разработке адаптивного сайта типографика должна быть на вершине ваших приоритетов.
Слово - это то, на что мы полагаемся, когда хотим сообщить своим пользователям важную
информацию (цели, предложения, действия и т.д.). Естественно, читаемость и четкость влияют на
восприятие и понимание контента.
8
Вот несколько моментов, которые вы должны понять:
• Типографика основывается на структуре и общем представлении контента. Вы должны
быть абсолютно уверенными, что ваша типографика выглядит корректно на разных
размерах экранов, в противном случае рискуете потерять целостность своего дизайна.
• Высота, размер текста должны корректироваться относительно пропорций экрана. Здесь
полезно использовать относительные единицы измерения (ems и rems).
• Если ваш текст соотносится с размером экрана, вы получите естественный и аутентичный
дизайн. Адаптивная типографика, как правило, подкрепляет эту аутентичность.
Используйте адаптивную типографику, проведите тщательный анализ поведения пользователей.
Спросите у тебя, какой сайт вы хотите. Как должен быть размещен контент. Ответы на эти вопросы
определят контрольные точки и размер текстов. Используйте rems для определения размера
