Responsive web design. Что это и как использовать<br />Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk<br />
ETHAN<br />MARCOTTE<br />
Что почитать<br />http://www.abookapart.com/products/responsive-web-design<br />http://mattkersley.com/responsive/<br />ht...
ЭТО - ДА<br />
А ТАК?<br />
Что:подход<br />Проектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера э...
Как:адаптация<br />Гибкая сетка и разметка<br />Медиа<br />Разумное использование CSS<br />
Fluid Grid<br />http://alistapart.com/articles/fluidgrids<br />
target ÷ context = result<br />max-width: 61.75em;      /* 988px / 16px = 61.75em */<br />
Flexible media<br />
Flexible Media<br />img,embed,object,video {max-width: 100%;} <br />overflow: hidden<br />JS для загрузки подходящего конт...
@media<br />http://w3.org/TR/css3-mediaqueries<br />
Media queries<br />
Процесс<br />Создание идеальных макетов(px) делает тяжелымневозможным рассуждения об «отзывчивости» интерфейса.<br />
ЕСЛИ НЕТ ПРОЦЕССА<br />
+ КОНТЕНТ<br />
“<br />The absence of a media queryis in fact, the first media query.<br />Bryan Rieger, Rethinking the Mobile Web<br />
БЕЗ MEDIA QUERY<br />
ДОПОЛНЯЕМ<br />
И ЕЩЕ РАЗ<br />
УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ<br />
УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ<br />ГЛАВНОЕ<br />РАЗБИЕНИЕ<br />ВТОРОСТЕПЕННОЕ<br />РАЗБИЕНИЕ<br />
Как правильно определить?<br />
 Статистика<br /> Контент<br />
БРАУЗЕРЫ ПРИТВОРЯЮТСЯ<br />
Фиксируем viewport<br /><meta name=”viewport” content=”width=device-width,initial-scale=1.0” /><br />
Пару инструментов<br />
КАК ВАРИАНТ<br />
ПРИМЕРЫ САЙТОВHTTP://MEDIAQUERI.ES<br />
JS, flexible images<br />http://filamentgroup.com/examples/responsive-images/<imgsrc="small.r.jpg" data-fullsrc="large.jpg...
HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/<br />
Поддержка старых браузеров<br />css3-mediaqueries.js или<br />respond.js<br />
Вопросы?<br />Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk<br />
Upcoming SlideShare
Loading in …5
×

Responsive Web design. Что это и как использовать

4,453 views

Published on

Published in: Design

Responsive Web design. Что это и как использовать

  1. 1. Responsive web design. Что это и как использовать<br />Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk<br />
  2. 2. ETHAN<br />MARCOTTE<br />
  3. 3. Что почитать<br />http://www.abookapart.com/products/responsive-web-design<br />http://mattkersley.com/responsive/<br />http://webdesignerwall.com/tutorials/css-elastic-videos<br />http://csswizardry.com/fluid-grids/<br />http://mediaqueri.es/<br />http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/<br />http://css-tricks.com/css-media-queries<br />
  4. 4.
  5. 5. ЭТО - ДА<br />
  6. 6. А ТАК?<br />
  7. 7. Что:подход<br />Проектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера экрана, платформы и ориентации.<br />
  8. 8.
  9. 9. Как:адаптация<br />Гибкая сетка и разметка<br />Медиа<br />Разумное использование CSS<br />
  10. 10. Fluid Grid<br />http://alistapart.com/articles/fluidgrids<br />
  11. 11. target ÷ context = result<br />max-width: 61.75em; /* 988px / 16px = 61.75em */<br />
  12. 12. Flexible media<br />
  13. 13. Flexible Media<br />img,embed,object,video {max-width: 100%;} <br />overflow: hidden<br />JS для загрузки подходящего контента<br />
  14. 14. @media<br />http://w3.org/TR/css3-mediaqueries<br />
  15. 15. Media queries<br />
  16. 16. Процесс<br />Создание идеальных макетов(px) делает тяжелымневозможным рассуждения об «отзывчивости» интерфейса.<br />
  17. 17. ЕСЛИ НЕТ ПРОЦЕССА<br />
  18. 18.
  19. 19. + КОНТЕНТ<br />
  20. 20. “<br />The absence of a media queryis in fact, the first media query.<br />Bryan Rieger, Rethinking the Mobile Web<br />
  21. 21. БЕЗ MEDIA QUERY<br />
  22. 22. ДОПОЛНЯЕМ<br />
  23. 23. И ЕЩЕ РАЗ<br />
  24. 24. УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ<br />
  25. 25. УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ<br />ГЛАВНОЕ<br />РАЗБИЕНИЕ<br />ВТОРОСТЕПЕННОЕ<br />РАЗБИЕНИЕ<br />
  26. 26. Как правильно определить?<br />
  27. 27. Статистика<br /> Контент<br />
  28. 28. БРАУЗЕРЫ ПРИТВОРЯЮТСЯ<br />
  29. 29. Фиксируем viewport<br /><meta name=”viewport” content=”width=device-width,initial-scale=1.0” /><br />
  30. 30. Пару инструментов<br />
  31. 31. КАК ВАРИАНТ<br />
  32. 32. ПРИМЕРЫ САЙТОВHTTP://MEDIAQUERI.ES<br />
  33. 33. JS, flexible images<br />http://filamentgroup.com/examples/responsive-images/<imgsrc="small.r.jpg" data-fullsrc="large.jpg"> <br />
  34. 34. HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/<br />
  35. 35. Поддержка старых браузеров<br />css3-mediaqueries.js или<br />respond.js<br />
  36. 36. Вопросы?<br />Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk<br />

×