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

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

    View full-size slide

  2. Dagens föreläsning Dagens agenda
    •Repetition: layout
    •Vad är responsiv design?
    •Media queries
    •Att designa för olika
    enheter

    View full-size slide

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

    View full-size slide

  4. Sidhuvud
    Huvudinnehåll Nyheter Övrigt

    View full-size slide

  5. Sidhuvud
    Huvudinnehåll Nyheter Övrigt

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Exempel på
    användning av flexbox

    View full-size slide

  9. Responsiv webbutveckling

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Reponsiv webbdesign?
    http://alistapart.com/article/responsive-web-design

    View full-size slide

  14. Responsive design
    vs.
    Adaptive design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 1. Allt fler surfar med mobiler/surfplattor

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 4. Responsiva webbplatser prioriteras av Google
    vid sökningar

    View full-size slide

  21. 5. Snabbar upp webbsidorna

    View full-size slide

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

    View full-size slide

  23. Med andra ord – tänk responsivt!

    View full-size slide

  24. Fler argument!

    View full-size slide

  25. Once your page loads, users form an
    opinion in .05 seconds.
    — Kinesis Inc.

    View full-size slide

  26. 40% of people will choose a different search
    result if the first is not mobile friendly.
    –Skillcrush

    View full-size slide

  27. 40% of people will leave a website if it
    takes more than 3 seconds to load.
    — Econsultancy

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ia.webbintro.se

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Nyckelord för responsiv webbdesign
    •CSS 3 Media Queries
    •Flexible layout
    •Flexible media
    •Breakpoints
    •Mobile viewport sizes
    •Compatibility

    View full-size slide

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

    View full-size slide

  37. Att formge olika medier Print & Screen

    View full-size slide

  38. Olika typer av stilmallar


    View full-size slide

  39. Att styla för olika mål

    View full-size slide

  40. Att styla för olika upplösningar

    View full-size slide

  41. Att styla för olika upplösningar

    View full-size slide

  42. Att jobba med media queries
    DEMO - media print & media screen

    View full-size slide

  43. Enheter i CSS

    View full-size slide

  44. Enheter i CSS

    View full-size slide

  45. Flexibel layout & media

    View full-size slide

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

    View full-size slide

  47. Brytpunkter? Hur var när?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Att jobba med brytpunkter
    Vilka enheter ska vi anpassa oss till?

    View full-size slide

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

    View full-size slide

  52. alert(document.documentElement.clientWidth);

    View full-size slide

  53. Anpassa storlek efter skärmstorlek
    Hmm, det blev ju ganska litet… hur löser vi detta?

    View full-size slide

  54. Olika viewports

    initial-scale=1
    maximum-scale=1
    minimum-scale=1
    width=500
    user-scalable=no
    http://dev.w3.org/csswg/css-device-adapt/

    View full-size slide

  55. Gör vår webbsida responsiv! =)

    View full-size slide