Во времена, когда мобильные устройства не были так распространены, а мобильный просмотр казался чем-то необычным в сфере новых технологий, все что вам было необходимо -убедиться, что ваш сайт выглядит привлекательно на пяти экранах, создать m-dot версию или приложение. Однако последние несколько лет мы наблюдаем значительный подъем мобильных технологий. Новые устройства появляются буквально каждый день. Адаптивный веб-дизайн сейчас стал абсолютной необходимостью. Кроме того, с тех пор как Google объявила о том, что меняет работу поисковой выдачи в пользу мобильных устройств, RWD стал стандартом в веб-дизайне. Есть и другие способы обслуживания мобильных пользователей, такие как вышеупомянутые сайты m-dot и мобильные приложения, однако ни один из них не является экономически выгодным и эффективным в отличие от адаптивного дизайна. В этой книге мы расскажем вам о том, как сделать ваш сайт адаптивным и действительно удобным для конечного пользователя.
2
Содержание
Адаптивный дизайн. Что это такое и почему его нужно использовать
3
Что такое RWD
3
Адаптивные макеты
4
Гибкий макет на основе сетки (Mostly Fluid)
4
Макет Shifter
5
Колонка Drop
5
Off Canvas
6
Твики
6
Адаптивная навигация
6
Фиксированная панель или “ничего не делай” подход
6
Футер
7
Off-canvas навигация
7
Адаптивная типографика
7
Гибкие изображения
8
max-width: 100%;
9
srcset
9
10
Выбор правильного формата
10
JPG или JPEG
10
SVG
10
PNG
11
GIF
11
Медиа-запросы
11
Пример
12
HTML
12
HTML5.js
13
CSS
13
Масштабируемые встроенные видео
15
Сжатие
16
Минификация
16
GZIP
16
3
Адаптивный дизайн. Что это такое и почему его нужно использовать
Если вы считаете, что адаптивность слишком проста, у меня есть для вас новости.
Существует 99 экранов и iPhone только один из них.
— Джош Брюэр, 10 марта 2010
Во времена, когда мобильные устройства не были так распространены, а мобильный просмотр
казался чем-то необычным в сфере новых технологий, все что вам было необходимо - убедиться, что ваш сайт выглядит привлекательно на пяти экранах, создать m-dot версию или приложение.
Однако последние несколько лет мы наблюдаем значительный подъем мобильных технологий.
Новые устройства появляются буквально каждый день. Адаптивный веб-дизайн сейчас стал
абсолютной необходимостью.
Кроме того, с тех пор как Google объявила о том, что меняет работу поисковой выдачи в пользу
мобильных устройств, RWD стал стандартом в веб-дизайне.
Есть и другие способы обслуживания мобильных пользователей, такие как вышеупомянутые сайты
m-dot и мобильные приложения, однако ни один из них не является экономически выгодным и
эффективным в отличие от адаптивного дизайна.
В этой книге мы расскажем вам о том, как сделать ваш сайт адаптивным и действительно удобным
для конечного пользователя.
А теперь, поскольку ставка сделана на RWD, давайте подробнее рассмотрим, что это такое и как
на самом деле с этим работать.
Что такое RWD
Для лучшего понимания этого понятия, обратимся в Википедию:
“Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий
правильное отображение сайта на различных устройствах, подключенных к интернету и дина-
мически подстраивающийся под заданные размеры окна браузера.
Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта
для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств
форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно
создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать
на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре
устройств.”
Гибкие сетки. Расположение контента, у которого нет фиксированной ширины, осуществляется на
основе горизонтальных и вертикальных линий. Сетка используется для организации контента - это
лучший способ регулировать размер и положение элементов.
Адаптивные изображения. Любой элемент, который подстраивается под размер экрана. Обычно
это визуальные эффекты, размещенные в сетке со 100% максимальной шириной. Таким образом, изображения не могут быть больше, чем сетка, в которой они размещены. Можно менять размер
4
картинок без потери их пропорций. Чтобы избежать медленной загрузки, такие изображения могут
быть сжаты при отображении на меньших экранах. Существует еще один метод - установка ширины
в процентном соотношении относительно страницы. Таким образом, существует дифференциация
между размером картинкии размером страницы, другими словами - независимо от того, как
изменяется сама страница, изображение будет отображаться как определенный процент от ее
ширины.
Медиа-запросы. Это модуль CSS3, который управляет стилями в атрибуте media. Различные стили
применяются на основе свойств устройства (ширина экрана, высота, ориентация и т.д.).
Адаптивные макеты
Люк Вроблевски, директор по продуктам Google, описывает 5 адаптивных макетов:
• Гибкий макет на основе сетки (Mostly Fluid);
• Макет Shifter;
• Колонка Drop;
• Off Canvas;
• Твики.
Каждый из вариантов имеет свои достоинства и их выбор зависит от конечного продукта, который
вы создаете.
Гибкий макет на основе сетки (Mostly Fluid)
В основном mostly fluid паттерн прекрасно работает на сайтах более чем с одним типом
контента - новостные ресурсы, интернет-магазины, маркетинговые сайты и др.
Идея проста - есть многоколоночный макет с большими полями на больших экранах, “резиновые”
сетки и изображения уменьшаются на меньших типах экранов, а колонки располагаются вер-
