Responsive web design. Что это и как использовать Никита Лукьянец UX evangelist,

ETHAN MARCOTTE

Что почитать design-techniques-tools-and-design-strategies/ design-techniques-tools-and-design-strategies/

ЭТО - ДА

А ТАК?

Что:подход Проектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера экрана, платформы и ориентации.

Как:адаптация – Гибкая сетка и разметка – Медиа – Разумное использование CSS

Fluid Grid

target ÷ context = result max-width: 61.75em; /* 988px / 16px = 61.75em */

Flexible media

Flexible Media 1.img,embed,object,video { max-width: 100%; } 2.overflow: hidden 3. JS для загрузки подходящего контента

@media

Media queries height width device-height device-width orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid

Процесс Создание идеальных макетов(px) делает тяжелым невозможным рассуждения об «отзывчивости» интерфейса.

ЕСЛИ НЕТ ПРОЦЕССА

+ КОНТЕНТ

The absence of a media query is in fact, the first media query. Bryan Rieger, Rethinking the Mobile Web

БЕЗ MEDIA QUERY

ДОПОЛНЯЕМ

И ЕЩЕ РАЗ

УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ

ГЛАВНОЕ РАЗБИЕНИЕ ВТОРОСТЕПЕННОЕ РАЗБИЕНИЕ

Как правильно определить?

1) Статистика 2) Контент

БРАУЗЕРЫ ПРИТВОРЯЮТСЯ

Фиксируем viewport

Пару инструментов

КАК ВАРИАНТ

ПРИМЕРЫ САЙТОВ

JS, flexible images

Поддержка старых браузеров css3-mediaqueries.js или respond.js

Вопросы? Никита Лукьянец UX evangelist,