�ݺ�ߣ

RESPONSIVE DESIGN
LAYOUT PATTERNS
MARTS 2014

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

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

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

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

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

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

HENNING NIELSEN
SENIOR UX KONSULENT, VERTICA
hni@vertica.dk
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
�ݺ�ߣshare.net/henningnielsen

�ݺ�ߣ

Responsive Design - Layout Patterns

More Related Content

Responsive Design - Layout Patterns