Responsive Web Design

RESPONSIVE WEB DESIGN

A PARADIGM SHIFT IN THE INDUSTRY



What is Responsive Web Design?



One URL + Single Content + One Code + CSS3 Media Queiries -> Multiple Devices



Responsive web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation.



Responsive web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation.



Desktops

Laptops

Tablets

Smartphones



Key features of Responsive Web Design

Flexible Grid

Flexible Images

CSS3 Media Queries & Screen Resolutions



Why Should I Switch My Website to Responsive Design?

With new devices of varying screen resolution cropping up regularly, it is essential to have a Web design that adapts itself to multiple screen sizes. When you have a site with a responsive web design, it looks good on a smartphone, a tablet, an e-reader and not just the desktop.



MObile Internet Users

2015 1.9 billion

2009 800 million



Desktop Internet Users

2015 1.6 billion

2009 1.4 billion



What Next?

2013

Mobile devices to overtake desktop PCs as dominant global Internet platform



Internet Usage - Mobiles vs. Desktops



Market Share of Various Mobile Browsers

All browsers support CSS3 media queries

55% Safari

22% Opera Mini

16% Android

4% symbian

3% BlackBerry



Advantages of Responsive Web Design

Saves monty

Saves time

Improved SEO

Better performance

Wider browser support



Google recommends Responsive Web Design

"Google recommends webmasters follow the industry best practive of using responsive web design, namely serviing the HTML for all devices and using only CSS media queries to decide the rendering on each device."