Как сделать сайт адаптивным: полезные советы
Шрифт:
С помощью этого паттерна панель навигации фиксируется в верхней части экрана, центрируется
и сжимается по мере уменьшения размера окна просмотра. Это самый простой паттерн для
7
реализации,
временем это не избежать), вам придется расширять навигацию.
Футер
Это простая кнопка, которая зафиксирована в хедере со ссылкой на список навигации, размещенный
в футере. Навигация в футере очень удобна (ее легко реализовать и она позволяет высвободить
много места на странице сайта), однако она имеет свойство дезориентировать.
Off-canvas навигация
Этот метод навигации появился в Facebook. Работает он так: пользователь прокручивает страницу
вниз, при достижении определенной точки навигационное меню исчезает, а вместо него появляется
кнопка меню. При нажатии на эту кнопку, открывается меню (обычно слева), а остальная часть
страницы сдвигается вправо.
Складывается впечатление, что большое меню просто невозможно уместить в off-canvas паттерне,
однако это довольно легко решить путем добавления прокрутки.
Адаптивные паттерны навигации можно найти здесь (с CSS сниппетами) и здесь (с примерами).
Адаптивная типографика
При разработке адаптивного сайта типографика должна быть на вершине ваших приоритетов.
Слово - это то, на что мы полагаемся, когда хотим сообщить своим пользователям важную
информацию (цели, предложения, действия и т.д.). Естественно, читаемость и четкость влияют на
восприятие и понимание контента.
8
Вот
• Типографика основывается на структуре и общем представлении контента. Вы должны
быть абсолютно уверенными, что ваша типографика выглядит корректно на разных
размерах экранов, в противном случае рискуете потерять целостность своего дизайна.
• Высота, размер текста должны корректироваться относительно пропорций экрана. Здесь
полезно использовать относительные единицы измерения (ems и rems).
• Если ваш текст соотносится с размером экрана, вы получите естественный и аутентичный
дизайн. Адаптивная типографика, как правило, подкрепляет эту аутентичность.
Используйте адаптивную типографику, проведите тщательный анализ поведения пользователей.
Спросите у тебя, какой сайт вы хотите. Как должен быть размещен контент. Ответы на эти вопросы
определят контрольные точки и размер текстов. Используйте rems для определения размера
текста по отношению к области просмотра.
Раньше мы рассматривали типографику как набор фиксированных решений,
однако теперь мы понимаем ее как составляющую часть пропорциональной логики.
Несколько хороших туториалов по адаптивной типографике:
Основы адаптивной веб-типографики
Подробное руководство по основам типографики
Хинтинг шрифтов. Что это такое и с чем его едят
Гибкие изображения
Когда дело доходит до использования изображений в веб-дизайне, мы должны помнить о
пользователях, которые используют для посещения интернет-страниц мобильные устройства.
Каждая JPEG или GIF картинка, как правило, является довольно объемным файлом. Кроме того, вам стоить помнить о скорости загрузки, которая не должна превышать 5 секунд.
Когда вы создаете привлекательный адаптивный веб-дизайн, который должен прекрасно выглядеть
на разных экранах, вам необходимо продумать стратегию использования изображений еще на
начальном этапе.
9
Задача не из простых. Однако изображения чаще всего более красноречивы, чем любые слова.
Существует несколько решений:
1. max-width: 100%;
2. srcset
3. <picture>
4. Adaptive images от Мэтта Вилкокса
max-width: 100%;
Вышеприведенный код CSS адаптивного изображения работает на IE7 и IE9, но не работает на IE8.