Small introduction on Responsive Web Design

1. RESPONSIVE
Web Design
Presenter: Gopinath Ambothi

2. Index
 What is RWD?
 Why RWD?
 How to Make a Website Responsive?
 Media Queries
 RWD – Some basic Tips
 Showcase of RWDs in action

3. What is RWD?
Responsive web design is the term given to the concept of
designing and developing a website so that the layout changes
depending on the device/viewport on which the website is
being viewed. By device, this could be a mobile phone, tablet,
laptop, desktop computer, or even a smart TV.
The term 'Responsive Web
Design' was coined by its
creator, Ethan Marcotte

4. Why
Responsive
Web Design?

5. Why RWD?

6. Why RWD? [contd…]
6.5 Billion
connected
people when
I prepare this
presentation!

7. Why RWD? [contd…]
How can we deliver great internet
experience to all these 6.5 billion people
?!?!!?

8. Why RWD? [contd…]
m.yahoo.com
One good solution was...
m.icicibank.com Mobile version of the
Websites.
But,
 Difficult to Manage 2
versions
 Doesn’t have all the
features of the main site
 Have limitations
…

9. Why RWD? [contd…]
One guy sat down and
thought really hard.
He wrote an article about
responsive web design
Ethan Marcotte - is a web
designer & developer,
a speaker and author

10. Why RWD? [contd…]
Excellent
Idea!
One website that
adapts, looks and
works great on all
devices.

11. How to Make a
Website
Responsive?

12. How to make a website
Responsive?
Components

13. How to make a website
Responsive? [contd…]
Fully based on Fluid Web Design
%

14. How to make a website
Responsive? [contd…]
Fluid Web Design:
Automatically fits in all
screens. But…
It becomes
uncomfortable in certain
resolutions and view
ports.

15. How to make a website
Responsive? [contd…]
Use CSS Media Queries
A media query allows you to gain information
about the viewport from which the user/visitor is
looking at the website and target that particular
screen size by applying specific CSS styles.

16. Media Queries

17. Media Queries
CSS3 media queries go hand in hand with the flexible grid to
make responsive web design work.
Luckily CSS3 is supported by many modern browsers.
@media screen and (max-width: 960px)
{
…
…
…
}

18. Media Queries [contd…]
Most important media feature is the “min-width”, this
property allows us to apply specific CSS styles if the
browser window (in pixels) drops below a particular width.
Most common pixel min-widths:
320px
480px
600px
768px
900px
1200px

19. Media Queries [contd…]
Sample Media Query code:
<style type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
#banner { width:740px; }
#banner img { max-width:740px; max-height:222px; }
#main { width:740px; }
#main-content { width:450px; float:left; }
#widget-container { width:200px; float:right; }
.widget-content { width:160px; }
}
@media (min-width: 321px) and (max-width: 480px) {
#banner { width:450px; }
#banner img { max-width:450px; max-height:135px; }
#main { width:450px; }
#main-content { width:400px;}
#widget-container { width:400px; }
.widget-content { width:120px; margin:5px; float:left;}
.widget-text { display:none; }
}
@media (max-width: 320px) {
#banner { width:275px; }
#banner img { max-width:275px; max-height:83px; }
#main { width:250px; }
#main-content { width:250px;padding:0px;}
#widget-container { width:250px; padding:0px; }
.widget-content { width:250px; margin:5px;}
.widget-text { display:none; }
}
</style>

20. RWD – Tips

21. RWD – Some basic Tips
 Use @media to scale your layout for any screen, but remember that
this alone isn’t really responsive design.
 Use liquid layouts that can accommodate any screen size.
 Mobile first design. Start with a narrow, single-column layout to
handle mobile browsers and then scale up from there rather than the
other way around.
 Forget Photoshop, build your comps in the browser.
 Scale images using img { max-width: 100%; }. For very large
images, consider using something like Adaptive Images to offer the very
smallest screens smaller image downloads and then use JavaScript to
swap in larger images for larger screens. Similar techniques can be used
to scale video.
 IE8 or older doesn’t support media queries.
We can enable it by adding the css3-mediaqueries.js Javascript file.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

22. Showcase of
RWD
in action

23. RWD in Action
http://www.bostonglobe.com/
http://www.clearairchallenge.com/