Responsive Web design. Что это и как использовать
•Als PPTX, PDF herunterladen•
4 gefällt mir•2,661 views
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Responsive Web design. Что это и как использовать
Ähnlich wie Responsive Web design. Что это и как использовать (20)
Mehr von Департамент Стратегических Технологий
Mehr von Департамент Стратегических Технологий (20)
Responsive Web design. Что это и как использовать
- 1. Responsive web design. Что это и как использовать Никита ЛукьянецUX evangelist, nikital@microsoft.comskype:nikiluk
- 3. Что почитать http://www.abookapart.com/products/responsive-web-design http://mattkersley.com/responsive/ http://webdesignerwall.com/tutorials/css-elastic-videos http://csswizardry.com/fluid-grids/ http://mediaqueri.es/ http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ http://css-tricks.com/css-media-queries
- 5. ЭТО - ДА
- 6. А ТАК?
- 7. Что:подход Проектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера экрана, платформы и ориентации.
- 9. Как:адаптация Гибкая сетка и разметка Медиа Разумное использование CSS
- 11. target ÷ context = result max-width: 61.75em; /* 988px / 16px = 61.75em */
- 12. Flexible media
- 13. Flexible Media img,embed,object,video {max-width: 100%;} overflow: hidden JS для загрузки подходящего контента
- 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. УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ ГЛАВНОЕ РАЗБИЕНИЕ ВТОРОСТЕПЕННОЕ РАЗБИЕНИЕ
- 27. Статистика Контент
- 29. Фиксируем viewport <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
- 31. КАК ВАРИАНТ
- 33. JS, flexible images http://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
Hinweis der Redaktion
- 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.