• What is RWD?
• Why RWD?
• Alternatives
• How to achieve RW?
• Out of Box
• Final words

• Responsive Web design - RWD
• Web design approach aimed at crafting sites to provide an optimal viewing experience
• Easy reading and navigation with a minimum of resizing, panning, and scrolling
• Wide range of devices (from mobile phones to desktop computer monitors)

• One Website, Many Devices
• Easier to Manage
• Google Says so.. Webmasters guidelines

• Mobile Site

  Have a look

• Adaptive Design

  Example?

• Native Apps

Differences?

• Viewport
• Media Queries
• Javascript { Resize }

• The viewport is the part of the webpage that the user can currently see.
• The scrollbars move the viewport to show other parts of the page.

• <meta name="viewport" content="width=device-width, 
  initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  Explanation

• What width?

• @media rule allows different style rules for different media in the same style sheet. Ex: @media screen, @media print

• How to test the device?

• Support

• Polyfill for IE?

• Teaser ;)

• Using Javascript

<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)

• Media Features

• Building a query

What is this?

How can we think towards it?

Demo

Page Anatomy

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

• Bootstrap

• Skeleton

• Less

• Foundation

• StackLayout

And many more..

• Screenfly

• Protofluid

• Responsive.is

• Chrome Dev tools

• Chrome Ext

• Firefox Dev tools