Wordpress Meetup 24.08.15

1. Fremtidsvennlige
nettsider
Fredrik Jensen
Designer / Frontend-utvikler

2. En nettside som «brekker»
ned til mobil.
Er det nok?

3. Jaja, holder
i massevis!!!
MIKAEL FLØYSAND

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. Joa… Men
det er vel bra?
Web’en har bare
blitt mer moden.
MIKAEL FLØYSAND

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. Siste måned på netliferesearch.com
34 %
26 %
40 % Tablet
Mobil
Desktop
129 ulike devicer
147 skjermstørrelser

8. Bilde Brad Frost
har tatt.

9. Joa..enig i det.
Men er ikke det
meste sagt
allerede da?
MIKAEL FLØYSAND

10. Old news…
MIKAEL FLØYSAND

11. Hva med smartklokkene
da, Fløysand?

12. Watch FirstThe Next Big Thing

13. Eksperiment:
Designe en nettside som
funker bra på en
smartklokke.

14. Eksperiment:
Redesigne en av Norges
mest brukte sider.

18. Moto360
320x290px
205ppi
210x190px
72ppi
1,56’’
Sånn ca.

21. Aha! Den er ikke
godt nok
prioritert.

22. Vi kjører
Netlife prosess!

23. Designe
kjernesidene
først
Kjernemodellen

25. Brukeren
skal bare utføre
en oppgave
på nettsiden

26. Veier inn Veier vidareKjerneinnhald
Kjerne:
Mål (oppnå minst et) Brukaroppgaver
Besvare
informasjonsbehov, der
det oppstår, når det
oppstår

27. Veier inn Veier vidareKjerneinnhald
Kjerne:
Mål (oppnå minst ett) Brukeroppgaver
Besvare
informasjonsbehov, der
det oppstår, når det
oppstår

31. Veier inn Veier videreKjerneinnhald
Kjerne:
Mål (oppnå minst ett) Brukeroppgaver

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

34. Tekst trenger en
del marg
Fontstørrelse ser
ok ut (16px)

39. Rask prototype

41. Mobil?

42. Mobile First Watch First

44. Desktop?

46. Watch First.
Helt uten media queries.

48. Moduler
Header
Contact
Typography
Hero
Gallery
Details
Navigation
Button
Secure

49. CSS arkitektur

50. BEM

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

52. Men den er litt treig…
2.4 MB / 1,31s

53. Bilder…

55. Bilder…
2,5 mb / 2,93s

56. Responsive bilder
857,9 KB / 771ms

57. Lazyloading
300 KB / 375 ms

58. Fonter
147 ms

59. Flyttet til server
53 ms

60. Lagt til webfontloader

61. Test på 2G

62. Lagt til placeholder

63. Lagt til fastclick

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

65. Dette var vel
fremtidsvennlig, Fløysand?

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

67. Om du vil se enda
mer på Jaguaren
fredjens.github.io/jaguar
Følg meg gjerne på Twitter @fredjens

68. Ja.
Kommer folk til
å surfe på klokker?
Men ikke veldig mye tror jeg..

69. Takk!
Fredrik Jensen
Designer / Frontend-utvikler