на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре
устройств.”
Гибкие сетки. Расположение контента, у которого нет фиксированной ширины, осуществляется на
основе горизонтальных и вертикальных линий. Сетка используется для организации контента - это
лучший способ регулировать размер и положение элементов.
Адаптивные изображения. Любой элемент, который подстраивается под размер экрана. Обычно
это визуальные эффекты, размещенные в сетке со 100% максимальной шириной. Таким образом, изображения не могут быть больше, чем сетка, в которой они размещены. Можно менять размер
4
картинок без потери их пропорций. Чтобы избежать медленной загрузки, такие изображения могут
быть сжаты при отображении на меньших экранах. Существует еще один метод - установка ширины
в процентном соотношении относительно страницы. Таким образом, существует дифференциация
между размером картинкии размером страницы, другими словами - независимо от того, как
изменяется сама страница, изображение будет отображаться как определенный процент от ее
ширины.
Медиа-запросы. Это модуль CSS3, который управляет стилями в атрибуте media. Различные стили
применяются на основе свойств устройства (ширина экрана, высота, ориентация и т.д.).
Адаптивные макеты
Люк Вроблевски, директор по продуктам Google, описывает 5 адаптивных макетов:
• Гибкий макет на основе сетки (Mostly Fluid);
• Макет Shifter;
• Колонка Drop;
• Off Canvas;
• Твики.
Каждый из вариантов имеет свои достоинства и их выбор зависит от конечного продукта, который
вы создаете.
Гибкий макет на основе сетки (Mostly Fluid)
В основном mostly fluid паттерн прекрасно работает на сайтах более чем с одним типом
контента - новостные ресурсы, интернет-магазины, маркетинговые сайты и др.
Идея проста - есть многоколоночный макет с большими полями на больших экранах, “резиновые”
сетки и изображения уменьшаются на меньших типах экранов, а колонки располагаются вер-
тикально. В целом, сам дизайн практически не меняется, пока не будет использован самый
маленький экран, сетка необходима для адаптации к различным размерам экрана.
5
Макет Shifter
Этот тип макета отлично зарекомендовал себя при работе над визуально-тяжелыми проектами
(сайты агентств, портфолио, проекты об искусстве и фотогалереи).
Различные макеты используются для маленьких, средних и больших типов экранов. Вы должны
создать дизайн для каждого из них. Как правило, маленькие экраны имеют сложный макет, более
широкие типы экранов - более сложный дизайн. Здесь у дизайнера появляется много работы.
Колонка Drop
Идеально подходит для сайтов, страницы которых пользователи просматривают на широких
экранах. Этот макет может быть как многоколоночным, так и иметь всего одну колонку при
отображении на самых узких экранах. В отличие от большинства “резиновых” макетов, этот
паттерн имеет элементы, которые остаются неизменными, но при этом имеют свойство прекрасно
адаптироваться к различным размерам экранов. Независимо от размера, доступен видовой экран
для заполнения собой пространства.
6
Off Canvas
Если у вас есть блог и вам необходимо сосредоточить читателя на большом объеме информации,