Как сделать сайт адаптивным: полезные советы [TemplateMonster] (fb2) читать постранично, страница - 2


 [Настройки текста]  [Cбросить фильтры]

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий

правильное отображение сайта на различных устройствах, подключенных к интернету и дина-

мически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта

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

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

создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать

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

устройств.”

Гибкие сетки. Расположение контента, у которого нет фиксированной ширины, осуществляется на

основе горизонтальных и вертикальных линий. Сетка используется для организации контента - это

лучший способ регулировать размер и положение элементов.

Адаптивные изображения. Любой элемент, который подстраивается под размер экрана. Обычно

это визуальные эффекты, размещенные в сетке со 100% максимальной шириной. Таким образом, изображения не могут быть больше, чем сетка, в которой они размещены. Можно менять размер

4

картинок без потери их пропорций. Чтобы избежать медленной загрузки, такие изображения могут

быть сжаты при отображении на меньших экранах. Существует еще один метод - установка ширины

в процентном соотношении относительно страницы. Таким образом, существует дифференциация

между размером картинкии размером страницы, другими словами - независимо от того, как

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

ширины.

Медиа-запросы. Это модуль CSS3, который управляет стилями в атрибуте media. Различные стили

применяются на основе свойств устройства (ширина экрана, высота, ориентация и т.д.).

Адаптивные макеты

Люк Вроблевски, директор по продуктам Google, описывает 5 адаптивных макетов:

• Гибкий макет на основе сетки (Mostly Fluid);

• Макет Shifter;

• Колонка Drop;

• Off Canvas;

• Твики.

Каждый из вариантов имеет свои достоинства и их выбор зависит от конечного продукта, который

вы создаете.

Гибкий макет на основе сетки (Mostly Fluid)

В основном mostly fluid паттерн прекрасно работает на сайтах более чем с одним типом

контента - новостные ресурсы, интернет-магазины, маркетинговые сайты и др.

Идея проста - есть многоколоночный макет с большими полями на больших экранах, “резиновые”

сетки и изображения уменьшаются на меньших типах экранов, а колонки располагаются вер-

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

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

5

Макет Shifter

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

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