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. Что это и как использовать

3,924

Published on

Published in: Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,924
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
41
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • As the user switches from their laptop to slate, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
  • As the user switches from their laptop to slate, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
  • As the user switches from their laptop to slate, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×