Адаптивный дизайн

Показатель отказов

Соображения скорости
Повторяющие (Repetitive Now)
Скучающие (Bored Now)
Срочные (Urgent Now)

Где люди используют моб.устройства?
84% дома
80% в свободное время в течение дня
76% в очередях и в процессе ожидания
69% в процессе шоппинга
64% на работе
62% во время просмотра ТВ-программ (альтернативные исследования дают цифру в 84%)
47% во время подготовки к работе

Отличие адаптивного сайта от мобильной версии (приложения) сайта
Под каждый тип операционной системы нужно свое приложение / версия сайта.
Необходимость загрузки приложения.
Разделение траффика.
Необходимость интеграции материалов сайта.

Как сообщить браузеру про адаптированность сайта?

Метатег

Преимущества адаптивного дизайна
Пользователям удобнее делиться вашим контентом, если для него используется единый URL.
Поисковики точнее индексируют параметры страницы, а не регистрируют разные версии одной страницы.
Создание одной адаптивной страницы занимает меньше времени, чем создание нескольких вариантов одного содержания.
Снижается вероятность типичных ошибок, характерных для мобильных сайтов.
Не требует переадресации, что сокращает время загрузки. Кроме того, при переадресации с применением агентов пользователя часто возникают ошибки, что вряд ли понравится посетителям.

Типы адаптивных макетов. Резиновый

Типы адаптивных макетов. Перенос блоков

Типы адаптивных макетов. Переключение макетов

Типы адаптивных макетов. Адаптивность «малой кровью»

Типы адаптивных макетов.
Панели

Примеры
http://mediaqueri.es

Стоит избегать
Загрузка и сокрытие
Загрузка и урезание
Избыточный DOM

Ленивая загрузка

Установка бюджета производительности
Оптимизация существующей функции или элемента
Удаление существующей функции или элемента
Избегание добавления новой функции или элемента

Техника работы с изображениями

Основные принципы
Адаптивный дизайн состоит из трёх главных принципов:
Резиновый макет
Резиновые изображения
Медиазапросы

Гибкий макет
Для создания гибкого макета мы должны использовать только относительные единицы измерения: em для размера шрифтов и % для размеров элементов.

Как перевести px в %
target / context = result
Ширину (размер шрифта) нужного элемента в px разделить на ширину (размер шрифта) родительского элемента в px = искомый результат в % (или em)

Гибкие изображения
Необходимо указывать максимальную ширину изображений, равную 100%.

Медиазапросы
@media (max-width:1150px){
CSS код
}

Синтаксис правила @media