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

HT21 - DA106A - Responsiv webbutveckling

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 21, 2021

HT21 - DA106A - Responsiv webbutveckling

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 21, 2021
Tweet

Transcript

  1. Responsiv webbdesign Genom media queries

  2. Dagens föreläsning Dagens agenda •Repetition: layout •Vad är responsiv design?

    •Media queries •Att designa för olika enheter
  3. None
  4. None
  5. Layout

  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. <header> <main> <aside> <nav> <footer> <section> <article>

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

    kolumner)
  15. None
  16. Sidhuvud Huvudinnehåll Nyheter Övrigt

  17. Sidhuvud Huvudinnehåll Nyheter Övrigt

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

  19. None
  20. 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.
  21. Exempel på användning av flexbox

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. Responsiv webbutveckling

  29. Vilken enhet använder ni när ni surfar på webben? Vilken

    enhet använder ni när ni surfar på webben?
  30. 67 34 36 0 www.menti.com https://www.wooclap.com/EMSHKQ

  31. https://goo.gl/J8ouB6 • Bra? • Dåligt? • Förbättringar?

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

  33. None
  34. None
  35. None
  36. None
  37. None
  38. 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
  39. Reponsiv webbdesign? http://alistapart.com/article/responsive-web-design

  40. None
  41. Responsive design vs. Adaptive design

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

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

  44. 1. Allt fler surfar med mobiler/surfplattor

  45. 2. Ger oss möjlighet anpassa innehållet efter det medium som

    användaren användare
  46. 3. Många webbsidor hittas genom social media, vilket används mest

    på mobiler
  47. 4. Responsiva webbplatser prioriteras av Google vid sökningar

  48. 5. Snabbar upp webbsidorna

  49. 6. Vi använder mer och mer olika enheter, för att

    utföra, eller fortsätta utföra en uppgift
  50. Med andra ord – tänk responsivt!

  51. Fler argument!

  52. Once your page loads, users form an opinion in .05

    seconds. — Kinesis Inc.
  53. 40% of people will choose a different search result if

    the first is not mobile friendly. –Skillcrush
  54. 40% of people will leave a website if it takes

    more than 3 seconds to load. — Econsultancy
  55. You have 10 seconds to leave an impression and tell

    them what they’ll get out of your website and company. After this time (and oftentimes before), they’ll leave. — NN Group
  56. Vad krävs för att bli responsiv? 1. En flexibel, ”grid”-baserad

    layout (boxar…) 2. Flexibla bilder, media, och 3. Media queries
  57. None
  58. None
  59. ia.webbintro.se

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

  61. http://alistapart.com/article/responsive-web-design

  62. http://www.abookapart.com/products/responsive-web-design

  63. 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
  64. Nyckelord för responsiv webbdesign •CSS 3 Media Queries •Flexible layout

    •Flexible media •Breakpoints •Mobile viewport sizes •Compatibility
  65. http://www.w3.org/TR/css3-mediaqueries/

  66. Att formge olika medier Print & Screen

  67. 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">
  68. Att styla för olika mål

  69. Att styla för olika upplösningar

  70. Att styla för olika upplösningar

  71. None
  72. Att jobba med media queries DEMO - media print &

    media screen
  73. Enheter i CSS

  74. Enheter i CSS

  75. Flexibel layout & media

  76. None
  77. None
  78. Att jobba med dynamisk bredd % istället för pixlar Auto

  79. Brytpunkter? Hur var när?

  80. None
  81. Exempel på brytpunkter http://lawrencestewart.ca/popular-media-queries-for-responsive-web-design/

  82. None
  83. "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
  84. None
  85. Att jobba med brytpunkter Vilka enheter ska vi anpassa oss

    till?
  86. None
  87. Mobile Viewport Sizes Är en pixel alltid en pixel? https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

  88. None
  89. alert(document.documentElement.clientWidth);

  90. Anpassa storlek efter skärmstorlek Hmm, det blev ju ganska litet…

    hur löser vi detta?
  91. shorturl.at/gBCK1 https://webshare.mah.se/tsanti/da156a/nonresponsiv/

  92. Olika viewports <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/
  93. Gör vår webbsida responsiv! =)

  94. “that’s what responsive web design is: a possible solution, a

    way to more fully design for the web’s inherent flexibility”
  95. None