Workshop i mobile first og responsive web design Ett innholdet - vist i alle flater
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
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
Hvem er dere? 4
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
I begynnelsen 6
http://www.w3.org/tr/rec-html32 7
512 342 8
800 600 9
This website is optimized for 800 x 600 and is best viewed in Internet Explorer 4.01 or Netscape 4.08 10
1024x768 11
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
Tilbake til start.. 13
512x342 460 320 340x270 1024x768 800x600 14
240x196 128x192 320x480 1200x824 600x800 768x1024 768x1024 1024x768 1920x1080 1280x1024 1440x900 1024x768 15
16
bredde x høyde 17
18
19
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
INNHOLD 21
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?
En fisk 23
Stekt piggvar 24
Finn oppskrift 1. forsøk 25
Finn oppskrift 2. forsøk 26
Finn oppskrift 3. forsøk 27
Ett innhold - en flate? Innhold Innhold Innhold Innhold Innhold 28
Ett innhold i alle flater? Innhold 29
Plasser det viktigste øverst Liten skjerm Større skjerm Størst skjerm 30
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
Design for mobil først 32
33
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
Antallet mobile enheter eksploderer 35
Mobil tvinger oss til prioritere det viktigste først http://www.netmagazine.com/features/mobile-first 36
Mobil utvider våre muligheter 37
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
Responsive Web design
RWD Drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til langsomme enheter 40
RWD Drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til langsomme enheter Høy grad av tilgjengelighet Penger 41
<DEMO> 42
RWD Hva skal til? Fluid grids Fleksibelt (grid-basert) layout Media queries Verktøy til å justere layout Responsive images Fleksible bilder og media 43
<DEMO> 44
RWD Hva skal til? Design 45
Graceful Degradation & Progressive Enhancement 46
Graceful Degradation & Progressive Enhancement 47
Graceful Degradation & Progressive Enhancement 48
Agile iterativ prosess 49
Demo http://mockup.creuna.no/yggdrasil/rwd/hestenett.html 50
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
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
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
Prototype verktøyet
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
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
Presenter løsningen (10 minutter) Presenter løsningen deres for en annen gruppe 5 minutter til hver gruppe 58
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
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
Takk for oss! @perkramer @allermand 61
Referanser og Read-ups Luke Wroblewski: Mobile First: http://www.lukew.com/ff/entry.asp?933 Ethan Marcotte: Fluid Grids:http://www.alistapart.com/articles/fluidgrids/ RWD: http://www.alistapart.com/articles/responsive-web-design/ Responsive Images: http://unstoppablerobotninja.com/entry/fluid-images Samling av nettsteder: Media Queries - http://mediaqueri.es/ 62
Referanser og Read-ups Luke Wroblewski: Mobile First the book lanseres i dag, 18. oktober 63