• Save
Ida Aalen, Thord Veseth Foss og Wilhelm Joys Andersen: Responsive design Liten vs. stor (Webdagene 2012)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ida Aalen, Thord Veseth Foss og Wilhelm Joys Andersen: Responsive design Liten vs. stor (Webdagene 2012)

on

  • 738 views

 

Statistics

Views

Total Views
738
Views on SlideShare
738
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ida Aalen, Thord Veseth Foss og Wilhelm Joys Andersen: Responsive design Liten vs. stor (Webdagene 2012) Presentation Transcript

  • 1. Hvordan strukturerenoe som flyter Ida Aalen Wilhelm Joys Andersen Thord Veseth Foss
  • 2. Folk liker rammer, fordirammer gir dem kontroll.
  • 3. Rammer er viktigfor fotografen.
  • 4. Når vi skriver lagervi noen rammer.
  • 5. Hva tar du med i tekstenog i hvilken rekkefølge?
  • 6. Rammer er viktigfor designeren.
  • 7. 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 ganskeParken. 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å ogsamme 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 omMod 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 Dagenom noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellersdesuden 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å. JegHistorien; 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, somfor 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 blusserKants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af etbegynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille TankeBlyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendespen; 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 kundeog 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ændelsenomkring, 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 havdedygtig 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 enArtikel 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 ogjeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hendegik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og mødervilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og serspadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrigsom afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøsmåske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg migtil mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:
  • 8. 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 ganskeParken. 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å ogsamme 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 omMod 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 Dagenom noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellersdesuden 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å. JegHistorien; 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, somfor 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 blusserKants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af etbegynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille TankeBlyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendespen; 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 kundeog 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ændelsenomkring, 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 havdedygtig 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 enArtikel 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 ogjeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hendegik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og mødervilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og serspadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrigsom afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøsmåske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg migtil mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:37 38
  • 9. Interaksjonsdesignerehar tenkt i rammer.
  • 10. 7681024
  • 11. Ingenting viktig under her
  • 12. men... nettet er ikkeslik lenger.
  • 13. 80% Kilde: TNS Gallup70% Smarttelefon 66 Nettbrett60% 57 5150%40% 3030%20% 16 1510% 7 40%2. kv 2010 4. kv 2010 2. kv 2011 4. kv 2011 2. kv 2012
  • 14. 50% Kilde: TNS Gallup Ukentlig Daglig40%30%20%10%0% 2005 2006 2007 2008 2009 2010 2011
  • 15. Foto: Flickr-bruker C.Bry@nt CC-BY-NC-ND
  • 16. Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.
  • 17. En iPhones hverdag3000200010000 Kilde: A-pressen, 2011
  • 18. En iPads hverdag11257503750 Kilde: A-pressen, 2011
  • 19. Vi må lage nettsted somogså fungerer påtelefoner og nettbrett.
  • 20. Det kan gjøres slik: touch.db.no db.no ipad.db.no
  • 21. 1. Mer vedlikehold touch.db.no Nyhet! Nyeht!Nyhet!Nyeht! db.no Nyhet! Nyeht! ipad.db.no
  • 22. 2. Duplisering av innhold Nyhet? no o . .n db db . ch no u b. to .d ad ip
  • 23. 3. Dårlig på deling touch.db.no db.no ipad.db.no
  • 24. 4. Like dårlig andre veien touch.db.no ? db.no ipad.db.no
  • 25. Eller det kan gjøres slik: db.no
  • 26. Media queries@media screen and (max-width: 1023px) { html { background: orange; }}@media screen and (min-width: 1024px) { html { background: navy; }}
  • 27. Så hva gjør mannår alt flyter?
  • 28. a) Finner ut hvasom er fast.
  • 29. Toppoppgaver
  • 30. kjernen
  • 31. Moduler
  • 32. TITTEL OM OSS TJENESTER BLOGG ACTION123
  • 33. b) Finner ut rekkefølgenpå modulene.
  • 34. TITTEL123
  • 35. c) Finner ut hvordanmoduler skal distribuerespå større skjermer
  • 36. Player 1: WilhelmLines: 4Points: 2367
  • 37. Hvem sa at størreskjermer er bedre? WarzauWynn
  • 38. heipei
  • 39. 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 ganskeParken. 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å ogsamme 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 omMod 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 Dagenom noget så enkelt og ligetil som Fremtidens Forbrydelser, som og dukked frem igen endog i mine glade Stunder, når jeg ellersdesuden 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å. JegHistorien; 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, somfor 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 blusserKants Sofismer . . . . Da jeg vilde tage mine Skrivesager frem og hun og blir forunderlig skøn, jeg ved ikke hvorfor, måske af etbegynde Arbejdet, opdaged jeg, at jeg ikke længer havde nogen Ord, hun hører af en forbigående, måske blot af en stille TankeBlyant hos mig; jeg havde glemt den efter mig i Pantelånersjap- hos hende selv. Eller skulde det være fordi jeg berørte hendespen; 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 kundeog 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ændelsenomkring, 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 havdedygtig 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 enArtikel 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 ogjeg ikke havde et Stykke ti Øres Blyant i Lommen! Hvad om jeg fortrædige hende på en eller anden Måde. Jeg indhenter hendegik ned i Pilestrædet igen og fik min Blyant tilbageleveret? Der atter og går hende forbi, vender mig pludselig om og mødervilde endda blive Tid til at få et godt Stykke færdigt, inden de hende Ansigt til Ansigt, forat iagttage hende. Jeg står og serspadserende begyndte at fylde Parken. Der var også så meget, hende ind i Øjnené og hitter på Stedet et Navn, som jeg aldrigsom afhang af denne Afhandling om denfilosofiske Erkendelse, havde hørt, et Navn med en glidende, nervøsmåske flere Menneskers Lykke, ingen kunde vide det. Jeg sagde Lyd: Ylajali. Da hun var kommet mig ganske nær, retter jeg migtil mig selv, at den kanske vilde blive til stor Hjælp for mange ivejret og siger indtrængende:37 38
  • 40. Tre vanlige løsninger
  • 41. Tre vanlige løsninger1. Lange linjer
  • 42. Tre vanlige løsninger1. Lange linjer2. Oppblåst tekst
  • 43. Tre vanlige løsninger1. Lange linjer2. Oppblåst tekst3. Distraksjoner
  • 44. Hvordan vi har løst det:
  • 45. Kjernen Relatert Meny
  • 46. Ta utgangspunkt ivanlige skjermstr nårdu lager gridet.
  • 47. Moduler
  • 48. Fast grid og moduler?Nettet er jo flytende. Hvasynes Wilhelm om det?
  • 49. <1280px 1024-1280px 1023-600px < 600 px
  • 50. Pixler eller prosent?Fixed eller fluid?
  • 51. Hva må man passepå underveis?
  • 52. Lasting & datatrafikk
  • 53. 10 ms
  • 54. 190 ms
  • 55. • Komprimer filene dinehva du må • Begrens antallet filer • Unngå unødvendigegjøre for å rundturer til tjeneren • Ikke last ressurser fragjøre ting andre kontinenterraskt:
  • 56. Det er ikke de minsteskjermene som trengerde minste bildene...
  • 57. Vanlig oppløsning Retinaoppløsning
  • 58. Piksler Vektor
  • 59. Folden lever!
  • 60. Men hva gjør vi med menyen?Forside Tjenester Karriere Meny Kontakt oss Om oss
  • 61. 1.Ankerlenke Menyi 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-
  • 62. 2.Menyenkommerinn frasiden medjavascript
  • 63. 3.Innholdetskyves nedmedjavascript
  • 64. Pølsefingre ogmusepekere
  • 65. Hva bør jeg tenkepå hvis jeg vil gjørenettstedet mittresponsivt?
  • 66. 1) Husk at du får ikke 4nettsted til prisen av 1
  • 67. 2) Det er lettest å gjøreresponsivt design frabunnen
  • 68. 3) Nye, prioritertenettsteder er enklere ågjøre responsive
  • 69. Brukteknologimed godstøtte iOSog Android
  • 70. Følgmoderneweb-standarder
  • 71. Sørg for atsidenlastes raskt
  • 72. Tørr åprioritereinnholdetditt
  • 73. Vil responsive designløse alle mineproblemer?
  • 74. Nei
  • 75. Takk for oss