Date post: | 05-Dec-2014 |
Category: |
Design |
Upload: | naresh-narendran |
View: | 866 times |
Download: | 5 times |
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