HT14 - F9

Transcript

1.  När använder man <br>-element?  Och när använder man dem inte?  http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element Återkoppling från inlämningsuppgifterna
2. { Responsiv webbdesign Media Queries
3.  Responsiv webbdesign?  Media queries?  Att designa för olika enheter Dagens föreläsning
4.  Bra?  Dåligt?  Förbättringar? http://goo.gl/3hSiqn
5. http://www.activatedesign.co.nz/blog/wp-content/uploads/2014/04/responsive-web-design.jpg
8.  Exempel på hur olika webbplatser använder sig utav responsiv design för att anpassa sig efter olika förutsättningar http://mediaqueri.es/
9.  http://alistapart.com/article/responsive-web- design http://alistapart.com/article/responsive-web-design
10. http://www.abookapart.com/products/responsive-web-design
11.  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) Varför responsiv 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://alistapart.com/article/dao
13.  CSS 3 Media Queries  Flexible layout  Flexible media  Breakpoints  Mobile viewport sizes  Compatibility Nyckelord för responsiv webbdesign
14. http://www.w3.org/TR/css3-mediaqueries/ W3C - Standarder
15. <link rel="stylesheet" type="text/css” media="screen" href=”style.css"> <link rel="stylesheet" type="text/css” media="print" href=”print.css"> Olika typer av stilmallar
16. @media screen { body { font-family: sans-serif } } Att styla för olika mål
17. @media screen and (min-width:500px) { … } @media (min-width:300px) { … } @media screen and (min-device-width: 480px) and (orientation: landscape){ … } Att styla för olika upplösningar
18.  Media print  Media screen Att jobba med media queries
19. Flexibel layout & media
20. % istället för pixlar Att jobba med dynamisk bredd
21. Brytpunkter? Hur var när?
22. Exempel på brytpunkter http://lawrencestewart.ca/popular-media-queries-for-responsive-web-design/
24. "Start with the small screen first, then expand until it looks like *crap*. Time to insert a breakpoint!" http://www.peachpit.com/articles/article.aspx?p=1945831
26.  För olika enheter Att jobba med brytpunkter
27.  Är en pixel alltid en pixel? https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag Mobile Viewport Sizes
28. alert(document.documentElement.clientWidth);
29.  Hmm, det blev ju ganska litet… Anpassa storlek efter skärmstorlek
30. <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/ Olika viewports
31. 1. No media queries? No problem. Tänk igenom basfallet. 2. css3-mediaqueries.js eller respond.js Kanske… Kompabilitet?
32. “that’s what responsive web design is: a possible solution, a way to more fully design for the web’s inherent flexibility”