1. RESPONSIVE DESIGN
LAYOUT PATTERNS
MARTS 2014

2. Kilde: http://www.lukew.com/ff/entry.asp?1514
RESPONSIVE LAYOUT PATTERNS
 Mostly fluid
 Column drop
 Layout shifter
 Tiny tweaks
 Off-canvas

3. Mostly fluid
 Elastisk, hvor grids og billeder skalerer fra stor til lille skærm
 Større margins på store skærme
 Stabler elementer vertikalt på den mindste skærm
 Layout: strukturen ændre sig ikke før den mindste skærm

4. Princess Elisabeth Antarctica

5. Column drop
 Udnytter hele skærmen
 Fra Multi-kolonne til single kolonne
 Elementer bevarer så vidt muligt størrelse
 Navigation eller indhold placeres øverst

6. We Nudge

7. Layout shifter
 Tilpasse sig forskellige skærmstørrelser
 Forskellige layouts på store og små skærme

8. Forefathers Group

9. Tiny tweaks
 Få elementer i en enkelt kolonne
 Simple sider hvor det er nok med små tweaks

10. Future Friendly

11. Off-canvas
Off-canvas
 Drager fordel af pladsen
udenfor skærmen
 Skjuler navigation (og indhold)
på mindre skærme indtil
brugerne efterspørger den
De andre patterns:
 Stabler elementer
 Afhængig af tilgængelig skærmplads

12. Mashable

13. HENNING NIELSEN
SENIOR UX KONSULENT, VERTICA
hni@vertica.dk
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
Slideshare.net/henningnielsen