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

Responsive Design - Layout Patterns

on

  • 77 views

 

Statistics

Views

Total Views
77
Views on SlideShare
77
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