Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Fremtidsvennlige
nettsider
Fredrik Jensen
Designer / Frontend-utvikler
En nettside som «brekker»
ned til mobil.
Er det nok?
Jaja, holder
i massevis!!!

MIKAEL FLØYSAND
Æh!? Men hva med alle de
responsive nettsidene som er
helt like. Stacket innholdet
under hverandre og slenge
på hamburgere...
Joa… Men
det er vel bra?
Web’en har bare
blitt mer moden.

MIKAEL FLØYSAND
Kanskje det. Men hva med
lastetid da? Laste inn store bilder
på mobil, er det så lurt?
Responsive bilder har jo vært
tilgj...
Siste måned på netliferesearch.com
34 %
26 %
40 % Tablet
Mobil
Desktop
129 ulike devicer
147 skjermstørrelser
Bilde Brad Frost
har tatt.
Joa..enig i det.
Men er ikke det
meste sagt
allerede da?

MIKAEL FLØYSAND
Old news…

MIKAEL FLØYSAND
Hva med smartklokkene
da, Fløysand?
Watch FirstThe Next Big Thing
Eksperiment:
Designe en nettside som
funker bra på en
smartklokke.
Eksperiment:
Redesigne en av Norges
mest brukte sider.
Moto360
320x290px
205ppi
210x190px
72ppi
1,56’’
Sånn ca.
Aha! Den er ikke
godt nok
prioritert.
Vi kjører 

Netlife prosess!
Designe
kjernesidene
først
Kjernemodellen
Brukeren
skal bare utføre
en oppgave
på nettsiden
Veier inn Veier vidareKjerneinnhald
Kjerne:
Mål (oppnå minst et) Brukaroppgaver
Besvare
informasjonsbehov, der
det oppstår...
Veier inn Veier vidareKjerneinnhald
Kjerne:
Mål (oppnå minst ett) Brukeroppgaver
Besvare
informasjonsbehov, der
det oppstå...
Veier inn Veier videreKjerneinnhald
Kjerne:
Mål (oppnå minst ett) Brukeroppgaver


Sticky er dumt.Logo må være liten.
Envt. fjernes helt.
Alt som ikke er
kjerneinnhold bør
fjernes
Tittel på bilde kanskje?
...
Tekst trenger en
del marg
Fontstørrelse ser
ok ut (16px)
Rask prototype
Mobil?
Mobile First Watch First
Desktop?
Watch First.
Helt uten media queries.
Moduler
Header
Contact
Typography
Hero
Gallery
Details
Navigation
Button
Secure
CSS arkitektur
BEM
Dette lærte jeg
• Det er veldlig liten plass på klokker.
• Netlifes metoder fungerer også på klokker.
• Navigasjon må nest...
Men den er litt treig…
2.4 MB / 1,31s
Bilder…
Bilder…
2,5 mb / 2,93s
Responsive bilder
857,9 KB / 771ms
Lazyloading
300 KB / 375 ms
Fonter
147 ms
Flyttet til server
53 ms
Lagt til webfontloader
Test på 2G
Lagt til placeholder
Lagt til fastclick
Dette lærte jeg
• Responsive bilder er viktig
• Vurder fonter og hvordan de skal lastes
• Test på dårlige nettforbindelser...
Dette var vel
fremtidsvennlig, Fløysand?
Fremtidsvennlige nettsider
• Prioritert og fokusert innhold
• Designet for de minste små skjermene
• Modulært designet og ...
Om du vil se enda 

mer på Jaguaren
fredjens.github.io/jaguar


Følg meg gjerne på Twitter @fredjens
Ja.
Kommer folk til 

å surfe på klokker?
Men ikke veldig mye tror jeg..
Takk!
Fredrik Jensen
Designer / Frontend-utvikler
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Fremtidsvennlige nettsider
Upcoming SlideShare
Loading in …5
×

Fremtidsvennlige nettsider

548 views

Published on

Wordpress Meetup 24.08.15

Published in: Design

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

×