Responsive Design - Layout Patterns

RESPONSIVE DESIGNLAYOUT 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

Princess Elisabeth Antarctica

Column drop

Udnytter hele skærmen

Fra Multi-kolonne til single kolonne

Elementer bevarer så vidt muligt størrelse

Navigation eller indhold placeres øverst

We Nudge

Layout shifter

Tilpasse sig forskellige skærmstørrelser

Forskellige layouts på store og små skærme

Forefathers Group

Tiny tweaks

Få elementer i en enkelt kolonne

Simple sider hvor det er nok med små tweaks

Future Friendly

Off-canvas

Off-canvas

Drager fordel af pladsen

udenfor skærmen

Skjuler navigation (og indhold)

på mindre skærme indtil

brugerne efterspørger denDe andre patterns:

Stabler elementer

Afhængig af tilgængelig skærmplads

Mashable

HENNING NIELSENSENIOR UX KONSULENT, VERTICAhni@vertica.dk

Twitter.com/henningnielsen

Linkedin.com/in/henningnielsen

Slideshare.net/henningnielsen