Multi device layout pattern

Download Multi device layout pattern

Post on 05-Dec-2014




5 download

Embed Size (px)


An internal presentation for our designers


  • 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 - Stack Columns on narrow layoutObserve Naresh Narendran
  • 7. Column Drop Pattern Another Popular Pattern Multi Column Layout Consistent Layout Minimal Scaling Festival de Saintes - 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 - 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 - 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


View more >