Responsiv webbdesign

1. Responsiv webbdesign
Media Queries

2. Dagens föreläsing
• Vad innebär responsiv design?
• Exempel på responsiv design
• Att ”tänka” responsivt
• CSS: Media queries
• Att tänka på vi responsiv utveckling utav webbplatser
• Demo – Att bygga responsivt

3. Vad är viktigt vid
responsiv design?
Fokus på mobiler & tablets.

4. Tillbaka till 2009…
• Webbplatser hade fasta bredder, så var det.
• Vad hände sedan?
 Våra skärmar blev större och större
 Användare med mobiltelefoner började alltmer besöka våra
webbplatser
• Resan från 960px breda webbplatser, till responsiva

5. Reponsiv webbdesign?

6. Vad krävs för att bli
responsiv?
1. En flexibel, ”grid”-baserad layout (boxar…)
2. Flexibla bilder, media, och
3. Media queries

7. Varför responsiv?
• För att öka effektiviteten
 Spara tid & pengar
• För att designa bättre webbplatser
 Vi designar tillgängliga och användbara gränssnitt

8. Olika sätt att ”mobilanpassa”
1. Inte alls
1. Ovanligt nu! =)
2. Två separata webbplatser
1. T.ex. metro.se & dn.se
3. Responsiv webbdesign
1. T.ex. svd.se

9. http://www.activatedesign.co.nz/blog/wp-content/uploads/2014/04/responsive-web-design.jpg

12. http://mah-dv.github.io/

13. Inspiration för responsiv
design?
• http://mediaqueri.es/

14. Hur ska vår layout se ut
vid olika upplösningar?

15. 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)

16. 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

17. Nyckelord för responsiv webbdesign
• Media Queries
• Flexible layout
• Flexible media
• Breakpoints
• Mobile viewport sizes
• Compatibility

18. 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">

19. Att styla för olika mål
@media screen {
body { font-family: sans-serif; }
}
@media print {
body { font-family: serif }
}

20. Ex. Print

21. Att styla för olika
upplösningar
@media screen and (max-width:300px) {
…
}
@media (min-width:480px) {
…
}
@media screen
and (min-device-width: 480px)
and (orientation: landscape){
…
}

22. W3C - Standarder
http://www.w3.org/TR/css3-mediaqueries/

24. Flexibel layout & media

25. Enheter i CSS

26. Enheter i CSS

27. Exempel på layout

28. Men detta har vi ju gjort
innan =)
• … men hur bra var det egentligen nu med tanke på
responsiv design?
 Exempel 1
• Vi använder % istället! Då löser sig väl alla problem?
 Exempel 2

29. Brytpunkter? Hur var när?

30. Exempel på brytpunkter
http://lawrencestewart.ca/popular-media-queries-for-responsive-web-design/
Ännu fler: http://viewportsizes.com/

33. http://www.peachpit.com/articles/article.aspx?p=1945831
"Start with the small screen first,
then expand until it looks like
*crap*. Time to insert a breakpoint!"

34. Att jobba med brytpunkter
• För olika enheter
• Tankeverkstad!

37. Ex. Responsiv

38. Om vi surfar in till en mobil?

39. Vi testar!
http://webshare.mah.se/tsanti/responsiv.html

40. Vilken upplösning har era mobiler?

41. Vilken bredd har er skärm?
http://webshare.mah.se/tsanti/screensize.html

42. <meta name=“viewport”>
Är en pixel alltid en pixel?
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

43. Olika viewport-egenskaper
<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/

44. <meta name="viewport" content="initial-scale=1.0, width=device-width">
http://webshare.mah.se/tsanti/viewport.html

45. Kompabilitet?
1.No media queries? No problem.
Tänk igenom basfallet.
2.css3-mediaqueries.js eller
respond.js
Kanske…

46. Andra saker som man bör
tänka på?
• Designa för mobila enheter!
 Vi har stora fingrar jämfört med skärmens storlek, gör saker
enkla att klicka på!
 Undvik – om det går – textinmatning, klickar är enklare
• Bandbredd…
 Olika bilder för olika enheter?
 Optimera JS och CSS

47. CSS: reset?
http://meyerweb.com/eric/tools/css/reset/

48. Vi borde prata om grids

49. Grids inom webbdesign

50. Ramverk?
• http://getbootstrap.com/
• http://foundation.zurb.com/
• http://materializecss.com/
• … och många fler

51. Utvecklingsmiljö?
• Utvecklingskonsoler i t.ex. Chrome är bra hjälp

52. Exempel
Att göra en layout responsiv