Introduktion till webbutveckling HT13: Responsive

Transcript

1. Media Queries och Responsive Design Fredrik Ohlin
2. http://www.flickr.com/photos/69797234@N06/7203485148
8. http://mediaqueri.es/
9. “repsonsive web design”
10. http://www.alistapart.com/articles/responsive-web-design/
11. http://www.abookapart.com/products/responsive-web-design
12. The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. —John Allsopp, 2000 http://www.alistapart.com/articles/dao/
13. simple.html: HTML utan egen stil är flexibel
14. CSS 3 Media Queries Flexible layout Flexible media Breakpoints Mobile viewport sizes Compatibility
15. Media Queries http://www.w3.org/TR/css3-mediaqueries/
16. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
17. @media screen { body { font-family: sans-serif; } }
18. @media screen and (max-width:500px) { … } @media (min-width:300px) { … } @media screen and (min-device-width: 480px) and (orientation: landscape){ … }
19. Enkla media queries i simple.html. (1. print) 2. enkla baserat på bredd
20. Flexible layout & media
21. %
22. Exempel-case -> dynamisk bredd
23. Which Breakpoints? . . .
24. Device-based vs. Content-based
25. RWD, s.114
27. http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/
28. Rekommendation: Skapa brytpunkter baserat på egna layoten och innehållet.
29. ?
30. Exempeldokument -> +1 breakpoint, smalare
31. Mobile Viewport Sizes
33. alert(document.documentElement.clientWidth);
34. <meta name="viewport" content="initial-scale=1.0, width=device-width"> -> Exempeldokument
35. Compatibility
36. 1.No media queries? No problem. Tänk igenom basfallet. 2.css3-mediaqueries.js eller respond.js Kanske…
37. “that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility” —RWD, s. 139