DA156A - HT15 - Responsiv design

Transcript

1. Responsiv webbdesign Media Queries
2. Frågor innan vi drar igång?
3. Dagens föreläsning  Responsiv webbdesign?  Media queries?  Att designa för olika enheter
4. http://goo.gl/3hSiqn  Bra?  Dåligt?  Förbättringar?
5. http://goo.gl/dqE0tz  Bra?  Dåligt?  Förbättringar?
6. http://www.activatedesign.co.nz/blog/wp-content/uploads/2014/04/responsive-web- design.jpg
9. ia.webbintro.se
10. http://mediaqueri.es/  Exempel på hur olika webbplatser använder sig utav responsiv design för att anpassa sig efter olika förutsättningar
11. http://alistapart.com/article/responsive-web-design
12. http://www.abookapart.com/products/responsive- web-design
13. Varför responsiv design?  Allt fler surfar med mobila enheter  Underlätta för UX (user experience)  Social media används mest av mobila enheter  Bra för SEO  Snabbar upp webbplatser  Framtidssäkert (för fler eneheter)
14. http://alistapart.com/article /dao 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
15. Nyckelord för responsiv webbdesign  CSS 3 Media Queries  Flexible layout  Flexible media  Breakpoints  Mobile viewport sizes  Compatibility
16. W3C - Standarder http://www.w3.org/TR/css3-mediaqueries/
17. Olika typer av stilmallar <link rel="stylesheet" type="text/css” media="screen" href=”style.css"> <link rel="stylesheet" type="text/css” media="print" href=”print.css">
18. Att styla för olika mål @media screen { body { font-family: sans-serif } }
19. Att styla för olika upplösningar @media screen and (min-width:500px) { … } @media (min-width:300px) { … } @media screen and (min-device-width: 480px) and (orientation: landscape){ … }
20. Att jobba med media queries  Media print  Media screen
21. Flexibel layout & media
22. Att jobba med dynamisk bredd % istället för pixlar
23. Demo! Bygg flexibel layout, och CSS för print goo.gl/PRJH7f
24. Brytpunkter? Hur var när?
25. Exempel på brytpunkter http://lawrencestewart.ca/popular-media-queries-for-responsive-web-design/
27. http://www.peachpit.com/articles/article.aspx?p=1 945831 "Start with the small screen first, then expand until it looks like *crap*. Time to insert a breakpoint!"
29. Att jobba med brytpunkter  För olika enheter  Tankeverkstad!
30. Mobile Viewport Sizes  Är en pixel alltid en pixel? https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
31. alert(document.documentElement.clientWidth);
32. Anpassa storlek efter skärmstorlek  Hmm, det blev ju ganska litet…
33. Olika viewports <meta name="viewport" content="initial-scale=1.0, width=device-width"> initial-scale=1 maximum-scale=1 minimum-scale=1 width=500 user-scalable=no http://dev.w3.org/csswg/css-device-adapt/
34. Gör vår webbsida responsiv! =)
35. Kompabilitet? 1. No media queries? No problem. Tänk igenom basfallet. 2. css3-mediaqueries.js eller respond.js Kanske…
36. “that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility”