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.

1. RESPONSIV DESIGN
Roger Wirz
VARFÖR?
VAD?
HUR?
INFÖRANDE?
CMS 6 /
CMS7?

2. VARFÖR?

4. VAD?

5. 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

7. 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

8. HUR?

9. Typisk övergripande design

10. 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

11. 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.

12. 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

13. CMS 6 / CMS 7?

14. Går det att ha responsiv design i
EPiServer CMS 6?
JA

15. EPiServer CMS 6 vs 7
EPiServer 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

17. INFÖRANDE?

18. Hur inför man responsiv design?
1. Sätt upp mål och definiera målgrupp
2. Inventera nuläge och lär mer om området
3. Jämför pris och utfall för olika ambitionsnivåer
4. Bestäm när arbetet ska göras
5. Beställ med tydliga avgränsningar
6. Genomför hela eller delar av ändringen
7. Höj kompetensen i redaktörsgruppen
8. Förändra eventuellt arbetssätt
9. Mät utfallet

19. THE END