responsivew design - vad, hur och varför
DESCRIPTION
På nätverksträffen för användare i EPiServer den 28 maj 2013 pratade Roger Wirz om RWD och hur det påverkar webbprojekten.TRANSCRIPT
RESPONSIV DESIGN
Roger Wirz
VARFÖR?
VAD?HUR?
INFÖRANDE?
CMS 6 /CMS7?
VARFÖR?
VAD?
Vad är responsiv design?
• Design och funktioner anpassas efter surfenhetens egenskaper– Bredden och typ av enhet styr
• Användarinteraktion baseras på mobilsurf– Exempelvis inga högerklick eller popup-fönster
• En webbplats, inte två– Inte en www.a.se och en mobil.a.se
Några fördelar och nackdelar
Fördelar:• Man slipper dubbla
webbplatser• Underlättar för mobil- och
plattanvändare• Samma utseende i olika
enheter• Sajten känns modern
Nackdelar:• Kostsamt• Kan stjäla fokus från andra
områden• Ökat underhållsarbete• Generell design som
underutnyttjar media• Tjänster kan försvinna för
mobila användare
HUR?
Typisk övergripande design
INFO 1 INFO 2 FUNKTION 1
INFO 3 FUNKTION 2
NAVIGERING
FOT
NAVIGERING
INFO 1
INFO 2
FUNKTION 1
INFO 3
FUNKTION 2
FOT
BYTS UT
LIKA
BREDDAS
JUSTERAS
JUSTERAS
TAS BORT
TAS BORT
Designen anpassas automatiskt- och funktioner kan bete sig helt annorlunda
Exempel på teknisk plattform• Ren HTML5 och CSS 3
– Man kommer långt med ren CSS 3 och HTML5
• Bootstrap– Stöd för allt från navigering till media i en mängd läsare
• Foundation Framework– Likvärdigt med Bootstrap
• Mobify
– Hämtar innehåll från sajten och visar via mall i Mobify
• XY CSS– Lite ”lättviktigare” utökning av stödet i HTML5 och CSS.
Typiska utmaningar
• Menyer & navigering – utseende, visa/göm, ’back’-knapp
• Bilder – visuell storlek och form, fysisk storlek
• Popup-fönster – Varningsrutor, dialoger
• Kartor – storlek och navigering, visa position
• Iframe – en webb i webben
• Video – storlek och spelare
• Dokument – visning, storlek
• Söksida – minimera inmatningar, få plats
• Teknik – ViewState-storlek, klientsideskod, säkerhet
LÄS SJÄLV
CMS 6 / CMS 7?
Går det att ha responsiv design i EPiServer CMS 6?
JA
EPiServer CMS 6 vs 7EPiServer CMS 6 EPiServer CMS 7
Tillåter responsiv design Ja Ja
Media-granskning inbyggd Nej Ja
Enkelt att bygga blockbaserat Nej Ja
Redigering via ”padda” eller mobil Nja Nja
INFÖRANDE?
Hur inför man responsiv design?1. Sätt upp mål och definiera målgrupp2. Inventera nuläge och lär mer om området3. Jämför pris och utfall för olika ambitionsnivåer4. Bestäm när arbetet ska göras5. Beställ med tydliga avgränsningar6. Genomför hela eller delar av ändringen7. Höj kompetensen i redaktörsgruppen8. Förändra eventuellt arbetssätt9. Mät utfallet
THE END