Your SlideShare is downloading. ×
Responsive Design - Layout Patterns
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design - Layout Patterns

125
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
125
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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