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