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

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

2 ETHAN MARCOTTE

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

4

5 ЭТО - ДА

6 А ТАК?

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

8

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

10 Fluid Grid

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

12 Flexible media

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

14 @media

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

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

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

18

19 + КОНТЕНТ

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

21 БЕЗ MEDIA QUERY

22 ДОПОЛНЯЕМ

23 И ЕЩЕ РАЗ

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

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

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

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

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

29 Фиксируем viewport

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

31 КАК ВАРИАНТ

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

33 JS, flexible images

34

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

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