Download to read offline
Uploaded by7minds AB
Responsivew design - Vad, hur och varför
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.
Responsivew design - Vad, hur och varför
- 1.
- 2.
- 4.
- 5. Vad är responsivdesign? • 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 ochnackdelar 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.
- 9.
- 10. INFO 1 INFO2 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å tekniskplattform • 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 attha responsiv design i EPiServer CMS 6? JA
- 15. EPiServer CMS 6vs 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.
- 18. Hur inför manresponsiv 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.