Multi device layout pattern

1,209 views

Published on

An internal presentation for our designers

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,209
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.
  • Multi device layout pattern

    1. 1. Multi-Device Layout Patternaka Responsive Web Design (RWD)methods
    2. 2. Responsive Web Design – Textbook definition An approach that suggest applications should respond to screen size, platform and orientation.Observe ȸ Naresh Narendran
    3. 3. An obligatory wireframe exampleObserve ȸ Naresh Narendran
    4. 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. 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. 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. 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. 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. 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. 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. 11. Is that all? No… Patterns are still evolvingObserve ȸ Naresh Narendran
    12. 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. 13. Question & AnswersObserve ȸ Naresh Narendran
    14. 14. Thank YouObserve ȸ Naresh Narendran

    ×