Your SlideShare is downloading. ×
0
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Responsive Web design. Что это и как использовать
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,880

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

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

    ×