Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VT22 - Responsive web design

VT22 - Responsive web design

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

April 11, 2022
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

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

    effektivt och kvalitativt
  2. Frågor om kursen?

  3. None
  4. None
  5. None
  6. None
  7. None
  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
  9. None
  10. None
  11. Layout

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. <header> <main> <aside> <nav> <footer> <section> <article>

  20. CSS - Grid Designa webbsidor enligt ett rutnät (rader &

    kolumner)
  21. None
  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

  28. None
  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.
  30. None
  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

  39. None
  40. None
  41. None
  42. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  43. Låt oss testa CSS Flexbox!

  44. CSS Flexbox

  45. None
  46. None
  47. None
  48. Responsiv webbutveckling

  49. None
  50. None
  51. None
  52. None
  53. None
  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
  65. None
  66. None
  67. http://mah-dv.github.io/

  68. None
  69. None
  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

  79. None
  80. Flexibel layout & media

  81. None
  82. None
  83. Att jobba med dynamisk bredd % istället för pixlar Auto

  84. Brytpunkter? Hur var när?

  85. None
  86. None
  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!"
  88. None
  89. None
  90. None
  91. None
  92. Dags för demo!

  93. Visa korrekt layout på mobiler

  94. None