The document discusses different patterns for responsive web design (RWD), also known as multi-device layout (MDL). It defines RWD as websites that respond to different screen sizes, platforms, and orientations. The document then describes some common RWD patterns like the mostly fluid pattern, column drop pattern, layout shifter pattern, tiny tweaks pattern, and off canvas pattern. It notes that patterns are still evolving and provides additional resources on the topic.

1. Multi-Device Layout Pattern
aka 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 example
Observe ȸ 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 layout
Observe ȸ 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 layout
Observe ȸ 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 Work
Observe ȸ 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 Space
Observe ȸ Naresh Narendran

11. Is that all?
No…
Patterns are still
evolving
Observe ȸ Naresh Narendran

12. Resource
s
Website Books
 Responsive Web Design
 Media Queries
 Responsive Design - Smashing
 Responsive Wireframes
Magazine
 Articles / Case Studies
 Adaptive Web Design
Observe ȸ Naresh Narendran

13. Question
&
Answers
Observe ȸ Naresh Narendran

14. Thank You
Observe ȸ Naresh Narendran