0
RESPONSIVE DESIGN
LAYOUT PATTERNS
MARTS 2014
Kilde: http://www.lukew.com/ff/entry.asp?1514
RESPONSIVE LAYOUT PATTERNS
 Mostly fluid
 Column drop
 Layout shifter
 T...
Mostly fluid
 Elastisk, hvor grids og billeder skalerer fra stor til lille skærm
 Større margins på store skærme
 Stabl...
Princess Elisabeth Antarctica
Column drop
 Udnytter hele skærmen
 Fra Multi-kolonne til single kolonne
 Elementer bevarer så vidt muligt størrelse
 ...
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...
Mashable
HENNING NIELSEN
SENIOR UX KONSULENT, VERTICA
hni@vertica.dk
Twitter.com/henningnielsen
Linkedin.com/in/henningnielsen
Slid...
Upcoming SlideShare
Loading in...5
×

Responsive Design - Layout Patterns

144

Published on

Published in: Mobile
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
144
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Design - Layout Patterns"

  1. 1. RESPONSIVE DESIGN LAYOUT PATTERNS MARTS 2014
  2. 2. Kilde: http://www.lukew.com/ff/entry.asp?1514 RESPONSIVE LAYOUT PATTERNS  Mostly fluid  Column drop  Layout shifter  Tiny tweaks  Off-canvas
  3. 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. 4. Princess Elisabeth Antarctica
  5. 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. 6. We Nudge
  7. 7. Layout shifter  Tilpasse sig forskellige skærmstørrelser  Forskellige layouts på store og små skærme
  8. 8. Forefathers Group
  9. 9. Tiny tweaks  Få elementer i en enkelt kolonne  Simple sider hvor det er nok med små tweaks
  10. 10. Future Friendly
  11. 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. 12. Mashable
  13. 13. HENNING NIELSEN SENIOR UX KONSULENT, VERTICA hni@vertica.dk Twitter.com/henningnielsen Linkedin.com/in/henningnielsen Slideshare.net/henningnielsen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×