$30 off During Our Annual Pro Sale. View Details »

HT22 - DA106A - Responsiv webbutveckling

Anton Tibblin
September 20, 2022

HT22 - DA106A - Responsiv webbutveckling

Anton Tibblin

September 20, 2022
Tweet

More Decks by Anton Tibblin

Other Decks in Education

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. None
  31. http://www.activatedesign.co.nz/blog/wp-content/uploads/2014/04/responsive-web-design.jpg

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

  39. None
  40. Responsive design vs. Adaptive design

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

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

  43. 1. Allt fler surfar med mobiler/surfplattor

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

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

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

  47. 5. Snabbar upp webbsidorna

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

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

  50. Fler argument!

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

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

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

    more than 3 seconds to load. — Econsultancy
  54. 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
  55. Vad krävs för att bli responsiv? 1. En flexibel, ”grid”-baserad

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

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

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

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

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

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

  65. Att formge olika medier Print & Screen

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

  68. Att styla för olika upplösningar

  69. Att styla för olika upplösningar

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

    media screen
  72. Enheter i CSS

  73. Enheter i CSS

  74. Flexibel layout & media

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

  78. Brytpunkter? Hur var när?

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

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

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

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

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

    hur löser vi detta?
  90. 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/
  91. Gör vår webbsida responsiv! =)

  92. None