Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Fremtidsvennlige nettsider

Plus De Contenu Connexe

Fremtidsvennlige nettsider

  1. 1. Fremtidsvennlige nettsider Fredrik Jensen Designer / Frontend-utvikler
  2. 2. En nettside som «brekker» ned til mobil. Er det nok?
  3. 3. Jaja, holder i massevis!!!
 MIKAEL FLØYSAND
  4. 4. Æh!? Men hva med alle de responsive nettsidene som er helt like. Stacket innholdet under hverandre og slenge på hamburgeren? Har ikke vi som designere blitt litt late?
  5. 5. Joa… Men det er vel bra? Web’en har bare blitt mer moden.
 MIKAEL FLØYSAND
  6. 6. Kanskje det. Men hva med lastetid da? Laste inn store bilder på mobil, er det så lurt? Responsive bilder har jo vært tilgjengelig lenge nå? Men få som bruker det… Så en advokatside som var 18 mb her om dagen…
  7. 7. Siste måned på netliferesearch.com 34 % 26 % 40 % Tablet Mobil Desktop 129 ulike devicer 147 skjermstørrelser
  8. 8. Bilde Brad Frost har tatt.
  9. 9. Joa..enig i det. Men er ikke det meste sagt allerede da?
 MIKAEL FLØYSAND
  10. 10. Old news…
 MIKAEL FLØYSAND
  11. 11. Hva med smartklokkene da, Fløysand?
  12. 12. Watch FirstThe Next Big Thing
  13. 13. Eksperiment: Designe en nettside som funker bra på en smartklokke.
  14. 14. Eksperiment: Redesigne en av Norges mest brukte sider.
  15. 15. Moto360 320x290px 205ppi 210x190px 72ppi 1,56’’ Sånn ca.
  16. 16. Aha! Den er ikke godt nok prioritert.
  17. 17. Vi kjører 
 Netlife prosess!
  18. 18. Designe kjernesidene først Kjernemodellen
  19. 19. Brukeren skal bare utføre en oppgave på nettsiden
  20. 20. Veier inn Veier vidareKjerneinnhald Kjerne: Mål (oppnå minst et) Brukaroppgaver Besvare informasjonsbehov, der det oppstår, når det oppstår
  21. 21. Veier inn Veier vidareKjerneinnhald Kjerne: Mål (oppnå minst ett) Brukeroppgaver Besvare informasjonsbehov, der det oppstår, når det oppstår
  22. 22. Veier inn Veier videreKjerneinnhald Kjerne: Mål (oppnå minst ett) Brukeroppgaver 

  23. 23. Sticky er dumt.Logo må være liten. Envt. fjernes helt. Alt som ikke er kjerneinnhold bør fjernes Tittel på bilde kanskje? Send melding bør prioriteres høyere
  24. 24. Tekst trenger en del marg Fontstørrelse ser ok ut (16px)
  25. 25. Rask prototype
  26. 26. Mobil?
  27. 27. Mobile First Watch First
  28. 28. Desktop?
  29. 29. Watch First. Helt uten media queries.
  30. 30. Moduler Header Contact Typography Hero Gallery Details Navigation Button Secure
  31. 31. CSS arkitektur
  32. 32. BEM
  33. 33. Dette lærte jeg • Det er veldlig liten plass på klokker. • Netlifes metoder fungerer også på klokker. • Navigasjon må nesten droppes helt. • Sticky elementer må vurderes nøye. • Mobilversjonen blir brukbar. • Responsiv design handler om mye mer enn 
 media queries.
  34. 34. Men den er litt treig… 2.4 MB / 1,31s
  35. 35. Bilder…
  36. 36. Bilder… 2,5 mb / 2,93s
  37. 37. Responsive bilder 857,9 KB / 771ms
  38. 38. Lazyloading 300 KB / 375 ms
  39. 39. Fonter 147 ms
  40. 40. Flyttet til server 53 ms
  41. 41. Lagt til webfontloader
  42. 42. Test på 2G
  43. 43. Lagt til placeholder
  44. 44. Lagt til fastclick
  45. 45. Dette lærte jeg • Responsive bilder er viktig • Vurder fonter og hvordan de skal lastes • Test på dårlige nettforbindelser • Hastighet er design/brukeropplevelse • Det er viktig å teste
  46. 46. Dette var vel fremtidsvennlig, Fløysand?
  47. 47. Fremtidsvennlige nettsider • Prioritert og fokusert innhold • Designet for de minste små skjermene • Modulært designet og utviklet • Lynrask brukeropplevelse • Semantisk HTML • Open source og API’er
  48. 48. Om du vil se enda 
 mer på Jaguaren fredjens.github.io/jaguar 
 Følg meg gjerne på Twitter @fredjens
  49. 49. Ja. Kommer folk til 
 å surfe på klokker? Men ikke veldig mye tror jeg..
  50. 50. Takk! Fredrik Jensen Designer / Frontend-utvikler

×