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

Responsive Design - Layout Patterns

on

  • 97 views

 

Statistics

Views

Total Views
97
Views on SlideShare
97
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design - Layout Patterns Responsive Design - Layout Patterns Presentation Transcript

  • RESPONSIVE DESIGN LAYOUT 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 den De andre patterns:  Stabler elementer  Afhængig af tilgængelig skærmplads
  • Mashable
  • HENNING NIELSEN SENIOR UX KONSULENT, VERTICA hni@vertica.dk Twitter.com/henningnielsen Linkedin.com/in/henningnielsen Slideshare.net/henningnielsen