Responsive Web design. Что это и как использовать
Download as PPTX, PDF4 likes2,664 views
Документ рассматривает концепцию адаптивного веб-дизайна, который учитывает пользовательское поведение и контекст в зависимости от размера экрана и платформы. Описаны методы реализации, такие как использование гибкой сетки и медиа-запросов, а также важность процесса проектирования для оптимизации интерфейсов. Приведены ссылки на ресурсы и инструменты для поддержки адаптивного дизайна.
Responsive Web design. Что это и как использовать
- 1. Responsive web design. Что это и как использоватьНикита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk
- 5. ЭТО - ДА
- 6. А ТАК?
- 7. Что:подходПроектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера экрана, платформы и ориентации.
- 9. Как:адаптацияГибкая сетка и разметкаМедиаРазумное использование CSS
- 11. target ÷ context = resultmax-width: 61.75em; /* 988px / 16px = 61.75em */
- 12. Flexible media
- 13. Flexible Mediaimg,embed,object,video {max-width: 100%;} overflow: hiddenJS для загрузки подходящего контента
- 15. Media queries
- 16. ПроцессСоздание идеальных макетов(px) делает тяжелымневозможным рассуждения об «отзывчивости» интерфейса.
- 19. + КОНТЕНТ
- 20. “The absence of a media queryis in fact, the first media query.Bryan Rieger, Rethinking the Mobile Web
- 21. БЕЗ MEDIA QUERY
- 22. ДОПОЛНЯЕМ
- 23. И ЕЩЕ РАЗ
- 24. УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ
- 25. УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕГЛАВНОЕРАЗБИЕНИЕВТОРОСТЕПЕННОЕРАЗБИЕНИЕ
- 29. Фиксируем viewport<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
- 31. КАК ВАРИАНТ
- 33. JS, flexible imageshttp://filamentgroup.com/examples/responsive-images/<imgsrc="small.r.jpg" data-fullsrc="large.jpg">
- 35. Поддержка старых браузеровcss3-mediaqueries.js илиrespond.js
- 36. Вопросы?Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk
Editor's Notes
- #8: 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.
- #10: 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.
- #30: 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.