Upload
henningnielsen
View
138
Download
1
Embed Size (px)
Citation preview
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, [email protected]
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
Slideshare.net/henningnielsen