Multi-Device Layout Pattern

aka Responsive Web Design (RWD) methods

Responsive Web Design – Textbook definition

An approach that suggest applications should

respond to screen size, platform and orientation.

Observe ȸ Naresh Narendran

An obligatory wireframe example

Observe ȸ Naresh Narendran

What does RWD or MDL really means?

Is it resizing background images?

Is it creating separate templates

for different devices?

Observe ȸ Naresh Narendran

Is it moving page elements based on

resolution?

Is it developing alternate modes of

site navigation?

So what is it???

Observe ȸ Naresh Narendran

It is a combination of all of them and some more.

Here are some of the common patterns used.

Mostly Fluid Pattern

Most Popular Pattern

Surprisingly Simple

Relies on Fluid Grids

Image Scaling

Stack Columns on narrow

layoutObserve ȸ Naresh Narendran

Choice Response - http://choiceresponse.com/

Column Drop Pattern

Observe ȸ Naresh Narendran

Festival de Saintes - http://www.festivaldesaintes.org/

Another Popular Pattern

Multi Column Layout

Consistent Layout

Minimal Scaling

Stacks Columns on all

layout

Layout Shifter Pattern

Observe ȸ Naresh Narendran

Performance Marketing Awards - www.performancemarketingawards.co.uk/

Most Adaptive Pattern

Uses Different Layouts

Most Innovative method

More Expensive

More Work

Tiny Tweaks Pattern

Observe ȸ Naresh Narendran

Path - https://path.com/

Simplest form of

adaptation

Good for minimalistic sites

Least Popular / Not

Practical

Image and Font Scaling

Off Canvas Pattern

Observe ȸ Naresh Narendran

An Emerging Trend

Takes advantage of Off

Screen

Content / Navigation

Hidden

Views exposed by User

Actions or Screen Space

Is that all?

Observe ȸ Naresh Narendran

No…

Patterns are still evolving

Media Queries

Responsive Wireframes

Articles / Case Studies

Resources

BooksWebsite

Responsive Web Design

Responsive Design - Smashing

Magazine

Adaptive Web Design

Observe ȸ Naresh Narendran

Observe ȸ Naresh Narendran

Question &

Answers

Thank You

Observe ȸ Naresh Narendran