Responsive Design - Layout Patterns

309 views
221 views

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
309
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×