Workshop i mobile first og responsive web design. Ett innholdet - vist i alle flater

Størrelse: px

Begynne med side:

Download "Workshop i mobile first og responsive web design. Ett innholdet - vist i alle flater"

Randi Gjertsen
8 år siden
Visninger:

1 Workshop i mobile first og responsive web design Ett innholdet - vist i alle flater

2 Per August Krämer (36) Senior interaksjonsdesigner - Mastergrad i Informatikk (UiO) med fordypning innen MMI. Har jobbet med kunder som: Stortinget Utdanningsdirektoratet Skatteetaten Altinn Schibsted 2

3 Jesper Allermand (45) Senior front-end og grensesnitt utvikler med fokus på semantikk og tilgjengelighet Har jobbet med følgende kunder: Utdanningsdirektoratet Skatteetaten Stortinget Statped Altinn Trafikanten, Norgesgruppen, Schibsted, Veidekke, Weifa og Rottefella 3

kunder: Utdanningsdirektoratet Skatteetaten Stortinget Statped

4 Hvem er dere? 4

5 Agenda Utfordringer med dagens webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

6 I begynnelsen 6

7 7

10 This website is optimized for 800 x 600 and is best viewed in Internet Explorer 4.01 or Netscape

11 1024x768 11

12 Hastighet, båndbredde og enheter 14.4K 28.8K 56K 128K (ISDN) 1Mbit 2Mbit 4Mbit 8 masse Mbit Razr Smartphones Nokia iphone Galaxy BlackBerry Palm Tablet PDA Galaxy ipad 12

13 Tilbake til start.. 13

14 512x x x x600 14

15 240x x x x x x x x x x x x768 15

16 16

17 bredde x høyde 17

18 18

19 19

20 Et nettsted har ikke fast BREDDE x HØYDE Vi kan ikke lage noe som er fordi det ikke finnes noe PIXEL PERFEKT LERRET 20

21 INNHOLD 21

22 Agenda Utfordringer med webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål?

23 En fisk 23

24 Stekt piggvar 24

25 Finn oppskrift 1. forsøk 25

26 Finn oppskrift 2. forsøk 26

27 Finn oppskrift 3. forsøk 27

28 Ett innhold - en flate? Innhold Innhold Innhold Innhold Innhold 28

29 Ett innhold i alle flater? Innhold 29

30 Plasser det viktigste øverst Liten skjerm Større skjerm Størst skjerm 30

31 Agenda Utfordringer med nettet Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

32 Design for mobil først 32

33 33

34 For oss som utvikler løsninger Antallet mobile fortsetter å eksploderer Mobil tvinger oss til å prioritere det viktigste først Mobil utvider våre muligheter 34

35 Antallet mobile enheter eksploderer 35

36 Mobil tvinger oss til prioritere det viktigste først 36

37 Mobil utvider våre muligheter 37

38 Agenda Utfordringer med webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

39 Responsive Web design

40 RWD Drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til langsomme enheter 40

41 RWD Drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til langsomme enheter Høy grad av tilgjengelighet Penger 41

42 <DEMO> 42

43 RWD Hva skal til? Fluid grids Fleksibelt (grid-basert) layout Media queries Verktøy til å justere layout Responsive images Fleksible bilder og media 43

44 <DEMO> 44

45 RWD Hva skal til? Design 45

46 Graceful Degradation & Progressive Enhancement 46

47 Graceful Degradation & Progressive Enhancement 47

48 Graceful Degradation & Progressive Enhancement 48

49 Agile iterativ prosess 49

50 Demo 50

51 Agenda Utfordringer med webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

52 Hei Yggdrasil. Kan dere fikse en ny hjemmeside for Øya kommune? Innbyggere i Øya kommune Foreldre med barn. De lurer på hvilke utdanningstilbud som finnes. De må søke på skoler via skolen sine egne nettsider. Øya kommune har 20 skoler. Vi har en del eldre som er syke og trenger helsetjenester. De må søke om helsetjenester via skjema som ligger på kommunen sin hjemmeside. Øya kommune har 1 sykehus. Øya kommune er veldig populær og har derfor mange tilflyttere. De må fylle ut skjema i forbindelse med å bygge egen bolig. Øya kommune har ca. 150 ulike skjema; noen er mer brukt enn andre. Få vet hvor øyen ligger så vi trenger en godt kart for å finne veien til øya og rundt på øya. Øyas innbyggere har: 1/3 iphone 1/3 Ipad 1/3 bærbare med store skjermer 52

53 Oppgave (45-60 minutter) Dette skal dere produsere: et overordnet konsept Enkel Informasjonsarkitektur (IA) navigasjon Løses i grupper med 5 deltakere. Output: Papirskisser av: Menystruktur for alle nivåene forside med meny undersider Lag skisser for: iphone ipad Hvis dere får tid: en skrivebordsutgave til slutt skal dere presenter løsningen for en annen gruppe (10 min) 53

54 Prototype verktøyet

56 Oppgavetekst Innbyggere i «Øya kommune» Dette har innbyggerne: Foreldre De lurer på hvilke utdanningstilbud som finnes. Og må søke på opptak til skolene direkte på skolen sine hjemmesider. Øya kommune har 20 skoler for ulike alderstrinn. Eldre Mange er syke og trenger helsetjenester. De må søke på sykehjemsplass/hjemmetjeneste via kommunen sine sider. Øya kommune har 1 sykehus. Tilflyttere Mange som ønsker å etablere seg på øya og som ønsker å bygge egen bolig, Øya kommune har ca 150 ulike skjema i forbindelse med etablering og byggesøknader. Øya kommune har utarbeidet noen gode veiledere for nye innbyggere på øya. 33% 33% iphone 33% ipad 21" stasjonære Få vet hvor øyen ligger så vi trenger en godt kart for å finne veien til øya og for å orientere seg når man er på øya. 56

57 Oppgave (45-60 minutter) Grupper på 5 personer Dette skal dere lage: et overordnet konsept Informasjonsarkitektur (IA) navigasjon Output: Papirskisser av: IA som viser alle nivåer forside med meny undersider Lag skisser for: iphone ipad Fullskjermsvisning til slutt skal dere presenter oppgaven for en annen gruppe (10 min) 57

58 Presenter løsningen (10 minutter) Presenter løsningen deres for en annen gruppe 5 minutter til hver gruppe 58

59 Agenda Utfordringer med webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

60 Agenda Utfordringer med webdesign Det viktigste innholdet i alle flater Design for mobil først Bruk responsive teknikker Vi løser en oppgave Oppsummering Spørsmål

61 Takk 61

62 Referanser og Read-ups Luke Wroblewski: Mobile First: Ethan Marcotte: Fluid Grids: RWD: Responsive Images: Samling av nettsteder: Media Queries

63 Referanser og Read-ups Luke Wroblewski: Mobile First the book lanseres i dag, 18. oktober 63

Like dokumenter

Webdesign for aktører under merkevaren Norges nasjonalparker

Webdesign for aktører under merkevaren Norges nasjonalparker En fleksibel og brukervennlig webløsning, tilpasset alle aktører under Norges nasjonalparker. Et system som passer alle. Designet av de nye