Multi-Device Layout Patternaka Responsive Web Design (RWD)methods
Responsive Web Design – Textbook definition              An approach that suggest                 applications should     ...
An obligatory wireframe exampleObserve ȸ Naresh Narendran
What does RWD or MDL really means?                            Is it resizing        Is it moving page                     ...
So what is it???                      It is a combination of all                          of them and some                ...
Mostly Fluid Pattern                 Most Popular Pattern                 Surprisingly Simple                 Relies on...
Column Drop Pattern                 Another Popular Pattern                 Multi Column Layout                 Consist...
Layout Shifter Pattern                 Most Adaptive Pattern                 Uses Different Layouts                 Mos...
Tiny Tweaks Pattern                 Simplest form of adaptation                 Good for minimalistic sites             ...
Off Canvas Pattern                 An Emerging Trend                 Takes advantage of Off Screen                 Cont...
Is that all?                                  No…                             Patterns are still                          ...
Resource         s            Website                          Books                                                 Resp...
Question                                &                             AnswersObserve ȸ Naresh Narendran
Thank YouObserve ȸ Naresh Narendran
Upcoming SlideShare
Loading in...5
×

Multi device layout pattern

658

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
658
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×