1. Hvordan strukturere
noe som flyter
Ida Aalen
Wilhelm Joys Andersen
Thord Veseth Foss

2. Folk liker rammer, fordi
rammer gir dem kontroll.

3. Rammer er viktig
for fotografen.

5. Når vi skriver lager
vi noen rammer.

6. Hva tar du med i teksten
og i hvilken rekkefølge?

7. Rammer er viktig
for designeren.

9. Jeg fik mine Sager, sagde yderst høfligt Godmorgen til den gamle, unge Mennesker. Ret betænkt vilde jeg ikke forgribe mig på
fede Kone og begav mig sporenstrængs opad Slotsbakken til Kant; jeg kunde jo undgå det, jeg behøved blot at gøre en ganske
Parken. Jeg fandt mig en Bænk for mig selv og begyndte at gnave umærkelig Bøjning, når jeg kom til Spørgsmålet Tid og Rum;
grådigt af min Niste. Det gjorde godt; det var længe siden jeg men Renan vilde jeg ikke svare for, gamle Sognepræst Renan . . . .
havde fået et så rundeligt Måltid, og jeg følte lidt efter lidt den Under alle Omstændigheder galdt det at gøre en Artikel på så og
samme mætte Ro i mig, som én føler efter en lang Gråd. Mit så mange Spalter; den ubetalte Husleje, Værtindens lange Blik om
Mod steg stærkt; det var mig ikke længer nok at skrive en Artikel Morgenen, når jeg traf hende i Trapperne, pinte mig hele Dagen
om noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellers
desuden hvemsomhelst kunde gætte sig til, ligefrem læse sig til i ikke havde en mørk Tanke. Dette måtte jeg have en Ende på. Jeg
Historien; jeg følte mig istand til en større Anstrængelse, jeg var i gik hurtigt ud af Parken,forat hente min Blyant hos Pantelåneren.
Stemning til at overvinde Vanskeligheder, og jeg bestemte mig Da jeg kom ned i Slotsbakken, indhented jeg to Damer, som
for en Afhandling i tre Afsnit om den filosofiske Erkendelse. jeg gik forbi. Idet jeg passered dem, strejfed jeg den enes Ærme,
Naturligvis vilde jeg få Lejlighed til at knække ynkeligt nogle af jeg så op, hun havde et fyldigt, lidt blegt Ansigt. Med ét blusser
Kants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af et
begynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille Tanke
Blyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendes
pen; min Blyant lå i Vestelommen. Arm? Det høje Bryst bølger heftigt nogle Gange, og hun klem-
Herregud hvor dog alting havde Lyst til at gå forkært for mig! mer Hånden hårdt om Parasolskaftet. Hvad gik der af hende?
Jeg banded nogle Gange, rejste mig op fra Bænken og drev frem Jeg standsed og lod hende komme foran mig igen, jeg kunde
og tilbage i Gangene. Det var meget stille overalt; langt borte, ved ikke i Øjeblikket gå videre, det hele forekom mig så besynderligt.
Dronningens Lysthus, rulled et Par Barnepiger sine Vogne Jeg var i et pirreligt Lune, ærgerlig på mig selv for Hændelsen
omkring, ellers var der ikke et Menneske at se noget Sted. Jeg var med Blyanten og i høj Grad ophidset af al den Mad, jeg havde
dygtig forbittret i Sind og spadsered som en rasende foran min nydt på tom Mave. Med en Gang tager min Tanke ved et lune-
Bænk, Hvor mærkelig vrangt gik det dog ikke på alle Kanter! En fuldt Indfald en mærkelig Retning, jeg føler mig greben af en
Artikel i tre Afsnit skulde ligefrem strande på den simple Ting, at sælsom Lyst til at gøre denne Dame bange, følge efter hende og
jeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hende
gik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og møder
vilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og ser
spadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrig
som afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøs
måske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg mig
til mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:

10. Jeg fik mine Sager, sagde yderst høfligt Godmorgen til den gamle, unge Mennesker. Ret betænkt vilde jeg ikke forgribe mig på
fede Kone og begav mig sporenstrængs opad Slotsbakken til Kant; jeg kunde jo undgå det, jeg behøved blot at gøre en ganske
Parken. Jeg fandt mig en Bænk for mig selv og begyndte at gnave umærkelig Bøjning, når jeg kom til Spørgsmålet Tid og Rum;
grådigt af min Niste. Det gjorde godt; det var længe siden jeg men Renan vilde jeg ikke svare for, gamle Sognepræst Renan . . . .
havde fået et så rundeligt Måltid, og jeg følte lidt efter lidt den Under alle Omstændigheder galdt det at gøre en Artikel på så og
samme mætte Ro i mig, som én føler efter en lang Gråd. Mit så mange Spalter; den ubetalte Husleje, Værtindens lange Blik om
Mod steg stærkt; det var mig ikke længer nok at skrive en Artikel Morgenen, når jeg traf hende i Trapperne, pinte mig hele Dagen
om noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellers
desuden hvemsomhelst kunde gætte sig til, ligefrem læse sig til i ikke havde en mørk Tanke. Dette måtte jeg have en Ende på. Jeg
Historien; jeg følte mig istand til en større Anstrængelse, jeg var i gik hurtigt ud af Parken,forat hente min Blyant hos Pantelåneren.
Stemning til at overvinde Vanskeligheder, og jeg bestemte mig Da jeg kom ned i Slotsbakken, indhented jeg to Damer, som
for en Afhandling i tre Afsnit om den filosofiske Erkendelse. jeg gik forbi. Idet jeg passered dem, strejfed jeg den enes Ærme,
Naturligvis vilde jeg få Lejlighed til at knække ynkeligt nogle af jeg så op, hun havde et fyldigt, lidt blegt Ansigt. Med ét blusser
Kants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af et
begynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille Tanke
Blyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendes
pen; min Blyant lå i Vestelommen. Arm? Det høje Bryst bølger heftigt nogle Gange, og hun klem-
Herregud hvor dog alting havde Lyst til at gå forkært for mig! mer Hånden hårdt om Parasolskaftet. Hvad gik der af hende?
Jeg banded nogle Gange, rejste mig op fra Bænken og drev frem Jeg standsed og lod hende komme foran mig igen, jeg kunde
og tilbage i Gangene. Det var meget stille overalt; langt borte, ved ikke i Øjeblikket gå videre, det hele forekom mig så besynderligt.
Dronningens Lysthus, rulled et Par Barnepiger sine Vogne Jeg var i et pirreligt Lune, ærgerlig på mig selv for Hændelsen
omkring, ellers var der ikke et Menneske at se noget Sted. Jeg var med Blyanten og i høj Grad ophidset af al den Mad, jeg havde
dygtig forbittret i Sind og spadsered som en rasende foran min nydt på tom Mave. Med en Gang tager min Tanke ved et lune-
Bænk, Hvor mærkelig vrangt gik det dog ikke på alle Kanter! En fuldt Indfald en mærkelig Retning, jeg føler mig greben af en
Artikel i tre Afsnit skulde ligefrem strande på den simple Ting, at sælsom Lyst til at gøre denne Dame bange, følge efter hende og
jeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hende
gik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og møder
vilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og ser
spadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrig
som afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøs
måske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg mig
til mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:
37 38

11. Interaksjonsdesignere
har tenkt i rammer.

12. 768
1024

14. Ingenting viktig under her

15. men... nettet er ikke
slik lenger.

17. 80%
Kilde: TNS Gallup
70% Smarttelefon 66
Nettbrett
60% 57
51
50%
40%
30
30%
20% 16
15
10% 7
4
0%
2. kv 2010 4. kv 2010 2. kv 2011 4. kv 2011 2. kv 2012

18. 50%
Kilde: TNS Gallup
Ukentlig
Daglig
40%
30%
20%
10%
0%
2005 2006 2007 2008 2009 2010 2011

19. Foto: Flickr-bruker C.Bry@nt CC-BY-NC-ND

21. Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.

22. En iPhones hverdag
3000
2000
1000
0
Kilde: A-pressen, 2011

23. En iPads hverdag
1125
750
375
0
Kilde: A-pressen, 2011

24. Vi må lage nettsted som
også fungerer på
telefoner og nettbrett.

25. Det kan gjøres slik:
touch.db.no
db.no
ipad.db.no

26. 1. Mer vedlikehold
touch.db.no
Nyhet!
Nyeht!
Nyhet!
Nyeht! db.no Nyhet!
Nyeht!
ipad.db.no

27. 2. Duplisering av innhold
Nyhet?
no
o
.
.n
db
db
.
ch
no
u
b.
to
.d
ad
ip

28. 3. Dårlig på deling
touch.db.no
db.no
ipad.db.no

29. 4. Like dårlig andre veien
touch.db.no
?
db.no
ipad.db.no

30. Eller det kan gjøres slik:
db.no

31. Media queries
@media screen and (max-width: 1023px) {
html { background: orange; }
}
@media screen and (min-width: 1024px) {
html { background: navy; }
}

32. Så hva gjør man
når alt flyter?

33. a) Finner ut hva
som er fast.

34. Toppoppgaver

35. kjernen

36. Moduler

37. TITTEL
OM OSS TJENESTER BLOGG
ACTION
1
2
3

40. b) Finner ut rekkefølgen
på modulene.

42. TITTEL
1
2
3

43. c) Finner ut hvordan
moduler skal distribueres
på større skjermer

44. Player 1: Wilhelm
Lines: 4
Points: 2367

45. Hvem sa at større
skjermer er bedre?
WarzauWynn

46. heipei

47. Jeg fik mine Sager, sagde yderst høfligt Godmorgen til den gamle, unge Mennesker. Ret betænkt vilde jeg ikke forgribe mig på
fede Kone og begav mig sporenstrængs opad Slotsbakken til Kant; jeg kunde jo undgå det, jeg behøved blot at gøre en ganske
Parken. Jeg fandt mig en Bænk for mig selv og begyndte at gnave umærkelig Bøjning, når jeg kom til Spørgsmålet Tid og Rum;
grådigt af min Niste. Det gjorde godt; det var længe siden jeg men Renan vilde jeg ikke svare for, gamle Sognepræst Renan . . . .
havde fået et så rundeligt Måltid, og jeg følte lidt efter lidt den Under alle Omstændigheder galdt det at gøre en Artikel på så og
samme mætte Ro i mig, som én føler efter en lang Gråd. Mit så mange Spalter; den ubetalte Husleje, Værtindens lange Blik om
Mod steg stærkt; det var mig ikke længer nok at skrive en Artikel Morgenen, når jeg traf hende i Trapperne, pinte mig hele Dagen
om noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellers
desuden hvemsomhelst kunde gætte sig til, ligefrem læse sig til i ikke havde en mørk Tanke. Dette måtte jeg have en Ende på. Jeg
Historien; jeg følte mig istand til en større Anstrængelse, jeg var i gik hurtigt ud af Parken,forat hente min Blyant hos Pantelåneren.
Stemning til at overvinde Vanskeligheder, og jeg bestemte mig Da jeg kom ned i Slotsbakken, indhented jeg to Damer, som
for en Afhandling i tre Afsnit om den filosofiske Erkendelse. jeg gik forbi. Idet jeg passered dem, strejfed jeg den enes Ærme,
Naturligvis vilde jeg få Lejlighed til at knække ynkeligt nogle af jeg så op, hun havde et fyldigt, lidt blegt Ansigt. Med ét blusser
Kants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af et
begynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille Tanke
Blyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendes
pen; min Blyant lå i Vestelommen. Arm? Det høje Bryst bølger heftigt nogle Gange, og hun klem-
Herregud hvor dog alting havde Lyst til at gå forkært for mig! mer Hånden hårdt om Parasolskaftet. Hvad gik der af hende?
Jeg banded nogle Gange, rejste mig op fra Bænken og drev frem Jeg standsed og lod hende komme foran mig igen, jeg kunde
og tilbage i Gangene. Det var meget stille overalt; langt borte, ved ikke i Øjeblikket gå videre, det hele forekom mig så besynderligt.
Dronningens Lysthus, rulled et Par Barnepiger sine Vogne Jeg var i et pirreligt Lune, ærgerlig på mig selv for Hændelsen
omkring, ellers var der ikke et Menneske at se noget Sted. Jeg var med Blyanten og i høj Grad ophidset af al den Mad, jeg havde
dygtig forbittret i Sind og spadsered som en rasende foran min nydt på tom Mave. Med en Gang tager min Tanke ved et lune-
Bænk, Hvor mærkelig vrangt gik det dog ikke på alle Kanter! En fuldt Indfald en mærkelig Retning, jeg føler mig greben af en
Artikel i tre Afsnit skulde ligefrem strande på den simple Ting, at sælsom Lyst til at gøre denne Dame bange, følge efter hende og
jeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hende
gik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og møder
vilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og ser
spadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrig
som afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøs
måske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg mig
til mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:
37 38

49. Tre vanlige løsninger

50. Tre vanlige løsninger
1. Lange linjer

56. Tre vanlige løsninger
1. Lange linjer
2. Oppblåst tekst

60. Tre vanlige løsninger
1. Lange linjer
2. Oppblåst tekst
3. Distraksjoner

62. Hvordan vi har løst det:

68. Kjernen Relatert Meny

72. Ta utgangspunkt i
vanlige skjermstr når
du lager gridet.

75. Moduler

76. Fast grid og moduler?
Nettet er jo flytende. Hva
synes Wilhelm om det?

79. <1280px 1024-1280px 1023-600px < 600 px

80. Pixler eller prosent?
Fixed eller fluid?

82. Hva må man passe
på underveis?

83. Lasting & datatrafikk

86. 10 ms

88. 190 ms

89. • Komprimer filene dine
hva du må • Begrens antallet filer
• Unngå unødvendige
gjøre for å rundturer til tjeneren
• Ikke last ressurser fra
gjøre ting andre kontinenter
raskt:

90. Det er ikke de minste
skjermene som trenger
de minste bildene...

91. Vanlig oppløsning Retinaoppløsning

92. Piksler Vektor

94. Folden lever!

97. Men hva gjør vi med
menyen?
Forside Tjenester Karriere
Meny Kontakt oss Om oss

98. 1.
Ankerlenke Meny
i footer Til forsiden
Tilskudd til utvikling av
miljøteknologi
Utvikler din bedrift teknologi som
forbedrer miljøet, og skal dere
bygge demonstrasjonsanlegg i
Norge? Da kan Miljøteknologi-
ordningen være aktuell.
Vi har egne ordninger for
landbruk og sjømat.
Tilskuddsordningen gjelder utvikling og
investeringer i Norge. Bedrifter i alle stør-

99. 2.
Menyen
kommer
inn fra
siden med
javascript

100. 3.
Innholdet
skyves ned
med
javascript

104. Pølsefingre og
musepekere

109. Hva bør jeg tenke
på hvis jeg vil gjøre
nettstedet mitt
responsivt?

110. 1) Husk at du får ikke 4
nettsted til prisen av 1

111. 2) Det er lettest å gjøre
responsivt design fra
bunnen

112. 3) Nye, prioriterte
nettsteder er enklere å
gjøre responsive

113. Bruk
teknologi
med god
støtte iOS
og Android

114. Følg
moderne
web-
standarder

115. Sørg for at
siden
lastes raskt

116. Tørr å
prioritere
innholdet
ditt

119. Vil responsive design
løse alle mine
problemer?

120. Nei

121. Takk for oss