HT20 - DA106A - Responsiv webbutveckling

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 22, 2020

HT20 - DA106A - Responsiv webbutveckling

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 22, 2020
Tweet

Transcript

  1. Responsiv webbdesign Genom media queries

  2. Dagens föreläsning Dagens agenda •Vad är responsiv design? •Media queries

    •Att designa för olika enheter
  3. None
  4. Vilken enhet använder ni när ni surfar på webben? Vilken

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

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

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

  8. None
  9. None
  10. 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
  11. Reponsiv webbdesign? http://alistapart.com/article/responsive-web-design

  12. None
  13. Responsive design vs. Adaptive design

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

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

  16. 1. Allt fler surfar med mobiler/surfplattor

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

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

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

  20. 5. Snabbar upp webbsidorna

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

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

  23. Fler argument!

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

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

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

    more than 3 seconds to load. — Econsultancy
  27. 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
  28. Exempel på responsiva webbsidor

  29. None
  30. None
  31. ia.webbintro.se

  32. http://mediaqueri.es/ • Exempel på hur olika webbplatser använder sig utav

    responsiv design för att anpassa sig efter olika förutsättningar
  33. http://alistapart.com/article/responsive-web-design

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

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

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

  38. None
  39. 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">
  40. Att styla för olika mål

  41. Att styla för olika upplösningar

  42. None
  43. Att jobba med media queries DEMO - media print &

    media screen
  44. Enheter i CSS

  45. Enheter i CSS

  46. Flexibel layout & media

  47. None
  48. None
  49. Att jobba med dynamisk bredd % istället för pixlar Auto

  50. Brytpunkter? Hur var när?

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

  53. None
  54. "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
  55. None
  56. Att jobba med brytpunkter Vilka enheter ska vi anpassa oss

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

  59. None
  60. alert(document.documentElement.clientWidth);

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

    hur löser vi detta?
  62. shorturl.at/cgsP6

  63. 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/
  64. Gör vår webbsida responsiv! =)

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

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