Multi device layout pattern

Download Multi device layout pattern

Post on 05-Dec-2014

860 views

Category:

Design

5 download

Embed Size (px)

DESCRIPTION

An internal presentation for our designers

TRANSCRIPT

  • 1. Multi-Device Layout Patternaka Responsive Web Design (RWD)methods
  • 2. Responsive Web Design Textbook definition An approach that suggest applications should respond to screen size, platform and orientation.Observe Naresh Narendran
  • 3. An obligatory wireframe exampleObserve Naresh Narendran
  • 4. What does RWD or MDL really means? Is it resizing Is it moving page background images? elements based on resolution? Is it creating separate templates for different Is it developing devices? alternate modes of site navigation?Observe Naresh Narendran
  • 5. So what is it??? It is a combination of all of them and some more. Here are some of the common patterns used.Observe Naresh Narendran
  • 6. Mostly Fluid Pattern Most Popular Pattern Surprisingly Simple Relies on Fluid Grids Image Scaling Choice Response - http://choiceresponse.com/ Stack Columns on narrow layoutObserve Naresh Narendran
  • 7. Column Drop Pattern Another Popular Pattern Multi Column Layout Consistent Layout Minimal Scaling Festival de Saintes - http://www.festivaldesaintes.org/ Stacks Columns on all layoutObserve Naresh Narendran
  • 8. Layout Shifter Pattern Most Adaptive Pattern Uses Different Layouts Most Innovative method More Expensive Performance Marketing Awards - www.performancemarketingawards.co.uk/ More WorkObserve Naresh Narendran
  • 9. Tiny Tweaks Pattern Simplest form of adaptation Good for minimalistic sites Least Popular / Not Practical Image and Font Scaling Path - https://path.com/Observe Naresh Narendran
  • 10. Off Canvas Pattern An Emerging Trend Takes advantage of Off Screen Content / Navigation Hidden Views exposed by User Actions or Screen SpaceObserve Naresh Narendran
  • 11. Is that all? No Patterns are still evolvingObserve Naresh Narendran
  • 12. Resource s Website Books Responsive Web Design Media Queries Responsive Design - Smashing Responsive Wireframes Magazine Articles / Case Studies Adaptive Web DesignObserve Naresh Narendran
  • 13. Question & AnswersObserve Naresh Narendran
  • 14. Thank YouObserve Naresh Narendran

Recommended

View more >