Responsive web design. Что это и как использовать Никита Лукьянец UX evangelist, nikital@microsoft.com skype:nikiluk

ETHAN
MARCOTTE

Что почитать

http://www.abookapart.com/products/responsive-web-design
http://mattkersley.com/responsive/
http://webdesignerwall.com/tutorials/css-elastic-videos
http://csswizardry.com/fluid-grids/
http://mediaqueri.es/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
http://css-tricks.com/css-media-queries

ЭТО - ДА

А ТАК?

Что:подход

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

Как:адаптация

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

Fluid Grid

http://alistapart.com/articles/fluidgrids

target ÷ context = result

max-width: 61.75em; /* 988px / 16px =

Flexible media

Flexible Media

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

@media

http://w3.org/TR/css3-mediaqueries

Media queries

Процесс

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

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

+ КОНТЕНТ

The absence of a media query is in fact, the first media

БЕЗ MEDIA QUERY

ДОПОЛНЯЕМ

И ЕЩЕ РАЗ

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

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

ГЛАВНОЕ
РАЗБИЕНИЕ

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

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

Статистика
Контент

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

Фиксируем viewport

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

КАК ВАРИАНТ

ПРИМЕРЫ САЙТОВ HTTP://MEDIAQUERI.ES

JS, flexible images

http://filamentgroup.com/examples/responsive-images/

HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/

Поддержка старых браузеров

css3-mediaqueries.js или
respond.js