VT22 - Responsive web design

Transcript

1. RWD & Ramverk Att bygga webbplatser för olika enheter, snabbt, effektivt och kvalitativt
2. Frågor om kursen?
8. Dagens Agenda • HTML & CSS: Skapa layout • CSS Flexbox • CSS Grid • Responsiv webbdesign • Designa för olika enheter • Dator • Surfplatta • Mobiltelefon • CSS Breakpoints • CSS (och JS) Ramverk • Bootstrap • Layout • Komponenter • + Andra ramverk
11. Layout
19. <header> <main> <aside> <nav> <footer> <section> <article>
20. CSS - Grid Designa webbsidor enligt ett rutnät (rader & kolumner)
22. Sidhuvud Huvudinnehåll Nyheter Övrigt
23. Sidhuvud Huvudinnehåll Nyheter Övrigt
24. Låt oss testa CSS Grid!
25. Övergripande layout
26. https://css-tricks.com/snippets/css/complete-guide-grid/
27. CSS - Flexbox Placera en samling element enligt givna regler
29. Vad är flexbox? • Ett sätt att positionera ut element på en webbsida • Ett alternativ till att använda t.ex. float för att bygga layouter • Flexbox utgår från att positionerna ut barn-element i en ”container” på olika sätt.
31. #container flex-direction: row-reverse; flex-direction: row; flex-direction
32. #container flex-direction flex-direction: column; flex-direction: column-reverse;
33. #container flex-wrap flex-wrap: nowrap; flex-wrap: nowrap; flex-wrap: nowrap-reverse;
34. #container flex-direction: row-reverse; flex-direction: row; justify-content justify-content: flex-start; justify-content: flex-end; justify-content: center;
35. #container flex-direction: row-reverse; flex-direction: row; justify-content justify-content: flex-start; justify-content: space-between; justify-content: center; justify-content: space-around;
36. align-items • align-items: flex-start; • align-items: flex-end; • align-items: flex-end; #container
37. • align-items: baseline; • align-items: stretch; align-items #container
38. Exempel på användning av flexbox
42. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
43. Låt oss testa CSS Flexbox!
44. CSS Flexbox
48. Responsiv webbutveckling
54. Responsive design vs. Adaptive design
55. Responsive v.s adaptive design https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ Mer bra läsning: https://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly
56. Varför är det så viktigt att fokusera på responsiv design?
57. Allt fler surfar med mobiler/surfplattor
58. Ger oss möjlighet anpassa innehållet efter det medium som användaren användare
59. Många webbsidor hittas genom social media, vilket används mest på mobiler
60. Responsiva webbplatser prioriteras av Google vid sökningar
61. Responsiva webbsidor snabbar upp laddningstiderna
62. 6. Vi använder mer och mer olika enheter, för att utföra, eller fortsätta utföra en uppgift
63. Med andra ord – tänk responsivt!
64. Vad krävs för att bli responsiv? 1. En flexibel, ”grid”-baserad layout (boxar…) 2. Flexibla bilder, media, och 3. Media queries
67. http://mah-dv.github.io/
70. Inspiration för responsiv design? http://mediaqueri.es/
71. http://www.w3.org/TR/css3-mediaqueries/
72. 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
73. Att formge olika medier Print & Screen
74. 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">
75. Att styla för olika mål
76. Att styla för olika upplösningar
77. Att styla för olika upplösningar
78. Demo Print & Screen
80. Flexibel layout & media
83. Att jobba med dynamisk bredd % istället för pixlar Auto
84. Brytpunkter? Hur var när?
87. 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!"
92. Dags för demo!
93. Visa korrekt layout på mobiler