VT23 - RWD & Ramverk

1. RWD & Ramverk
Att bygga webbplatser för olika enheter,
snabbt, effektivt och kvalitativt

2. Frågor om kursen?

8. Vanliga fel
Vid inlämningsuppgifter

9. 1. Uppladdning
av
mappstruktur

10. 2. Glömmer att
förhindra att
formular
skickas iväg

12. Dagens
Agenda
• HTML & CSS: Skapa layout
• CSS Flexbox
• CSS Grid
• Responsiv webbdesign
• Designa för olika enheter
• Dator
• Surfplatta
• Mobiltelefon
• CSS Breakpoints
• Video: CSS (och JS) Ramverk
• Bootstrap
• Layout
• Komponenter
• + Andra ramverk

15. Layout

23. <header>
<main>
<aside>
<nav>
<footer>
<section>
<article>

24. CSS - Grid
Designa webbsidor enligt ett rutnät (rader & kolumner)

26. Sidhuvud
Huvudinnehåll Nyheter Övrigt

27. Sidhuvud
Huvudinnehåll Nyheter Övrigt

28. Låt oss testa CSS Grid!

29. Övergripande layout

30. https://css-tricks.com/snippets/css/complete-guide-grid/

31. CSS - Flexbox
Placera en samling element enligt givna regler

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

35. #container
flex-direction: row-reverse;
flex-direction: row;
flex-direction

36. #container flex-direction
flex-direction: column; flex-direction: column-reverse;

37. #container flex-wrap
flex-wrap: nowrap; flex-wrap: nowrap; flex-wrap: nowrap-reverse;

38. #container
flex-direction: row-reverse;
flex-direction: row;
justify-content
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;

39. #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;

40. align-items
• align-items: flex-start;
• align-items: flex-end;
• align-items: flex-end;
#container

41. • align-items: baseline;
• align-items: stretch;
align-items
#container

42. Exempel på
användning av flexbox

46. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

47. Låt oss testa
CSS Flexbox!

48. CSS Flexbox

52. Responsiv webbutveckling

58. Responsive design
vs.
Adaptive design

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

60. Varför är det så viktigt att fokusera på responsiv design?

61. Allt fler surfar med mobiler/surfplattor

62. Ger oss möjlighet anpassa innehållet efter det
medium som användaren användare

63. Många webbsidor hittas genom social media, vilket används mest på mobiler

64. Responsiva webbplatser prioriteras av Google vid
sökningar

65. Responsiva webbsidor snabbar upp laddningstiderna

66. 6. Vi använder mer och mer olika enheter, för
att utföra, eller fortsätta utföra en uppgift

67. Med andra ord – tänk responsivt!

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

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

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

75. http://www.w3.org/TR/css3-mediaqueries/

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

77. Att formge olika medier Print & Screen

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

79. Att styla för olika mål

80. Att styla för olika upplösningar

81. Att styla för olika upplösningar

82. Demo
Print & Screen

84. Flexibel layout & media

87. Att jobba med dynamisk bredd
% istället för pixlar
Auto

88. Brytpunkter? Hur var när?

91. 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!"

96. Dags för demo!

97. Visa korrekt layout på mobiler