Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Responsive Web Design

http://goo.gl/1vIHQv Arvind Ravulavaru Use to navigate.

Jan, 2014
Contents
What is RWD?
Accessibility
Usability
Adaptability
Why RWD?
Alternatives?
Native vs Mobile Web

Differences?

How can we achieve it?
Viewport
Media Queries
Understanding the Query
<link rel='stylesheet' media='all' href='normal.css' >

<link rel='stylesheet' media='screen and (min-width: 701px)' 
href='medium.css' >

@media screen and (-webkit-device-pixel-ratio: 1.5), screen and 
(resolution: 144dpi)

Mobile First Approach

What is this?

Mobile First Approach - How?

How can we think towards it?

Demo

Page Anatomy

RW Menu Component

Step 1 [Basic Menu] View Output


Step 2 [600px and lower]View Output


Step 3 [480px and lower]View Output


Step 4 [320px and lower]View Output

Available Frameworks
Bootstrap Walkthrough

RWD Tools And many more..
And Finally..
Questions? @aravulavaru