Responsive Web Design, RWD, Web Design, HTML5, CSS3

1. Responsive Web Design
Desktop Mobile and iPad

2. Responsive Web Design
– Shubelal kumar

3. − What is Responsive Web Design?
− Why Responsive Web Design?
− Fluid vs Responsive Web Design
− Media Queries
− Flexible images in responsive web design
− Old version of IE and Responsive web design
− POC
Topics
Responsive Web Design Topics cover

4. What is Responsive Web Design?
Media queries allow the page to use different CSS style rules based on
characteristics of the device the site is being displayed on, most
commonly the width of the browser.

5. − One Website, Many Devices
One of the most appealing aspects of responsive web design is that a responsive website can provide a great user-
experience across many devices and screen sizes. This is an important characteristic, since it is impossible to anticipate
all the devices and screen sizes searchers will use to access your site. A site that works well regardless of these variables
will provide a better and more consistent user-experience than a separate mobile site that is designed for a specific device
and screen size.
− Easier to Manage
Having a separate desktop and mobile site requires having separate code application. Managing one site and one
Application is far easier than managing two sites or more. This is a key advantage a responsive website has over a
separate mobile site.
− Recommended By Google
This is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier
and more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has a
different URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of the
same site.
Why Responsive Web Design?

6. Fluid vs Responsive Web Design

7. Media Queries
<meta name=”viewport” content=”width:device-width”>

8. .figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557%; /* 12px / 474px */
width: 48.7341772%; /* 231px / 474px */
}
img {
max-width: 100%;
}
http://www.alistapart.com/articles/fluid-images/
SIZING
Flexible images in responsive web design

9. img { max-width: 100%; }
<img src="smallRes.jpg” data-fullsrc="largeRes.jpg">
SIZING
Flexible images in responsive web design

10. http://code.google.com/p/css3-mediaqueries-js/
Old version of IE and Responsive web design

11. Responsive web design
− http://www.alistapart.com/articles/responsive-webdesign/
− http://net.tutsplus.com/tutorials/html-csstechniques/responsive-web-design-a-visual-guide/
− http://mediaqueri.es/
− http://webdesignerwall.com/
HTML5
− http://www.html5rocks.com
Reference

12. Thank you