1.
Responsive Web
Design
with HTML5 and CSS3

2.
Outline
● Introduction
● When To Use It? Why?
● How?
○ HTML5
○ CSS3
○ Media Queries
○ Design
● Conclusion
○ Advantage
○ Disadvantage

3.
Introduction
● What is Responsive Web Design?
○ A website that renders the content respond to the
device that accesses it.

4.
When To Use It? Why?
● Things to Consider:
○ Money & Time
○ SEO (Search Engine Optimization)
○ Performance
○ Browser Support

5.
How To Do It?
● 4 Main Points to Know:
○ HTML5
○ CSS3
○ Media Queries
○ Design

6.
HTML5
● What is HTML5?
○ The fifth revision of HyperText Markup Language,
the core language for presenting content on the web.

7.
HTML5
● Graphics / Multimedia
○ <cavas> (2D/3D), <video>, <audio>, ...
● Realtime / Communication
○ WebSocket : chat, analytic, ...
● File / Hardware Access
○ Geolocation, Device Orientation, ...
● Offline / Storage
○ SQL Database, Offline, Application Cache, ...
● Semantics & Markup
○ <header>, <footer>, <input type="tel" .../>, ...
● Nuts & Bolts
○ document.getElementsByClassName("section"), ...

8.
HTML5
● Example
<input type="tel" name="telephone" value="" />

9.
CSS3
● What is CSS3?
CSS3 is the newest implementation of that
markup language and enables responsive
markup.

10.
CSS3
● CSS Selectors
tr:nth-child(even) {
background-color: gray;
}
tr:nth-child(odd) {
background-color: white;
}

11.
CSS3
● Web Fonts
@font-face {
font-family: 'FontName';
src: url(FontPathLocation.ttf);
}
h1 {
font-family: 'FontName';
}

12.
CSS3
● Text Wrapping
div {
text-overflow: ellipsis;
}
● Columns
div {
*-column-count: 2;
*-column-rule: 1px solid #bbb;
*-column-gap: 2em;
}

13.
CSS3
● Transitions
● Transforms / Rotations
● Animations
● Button Style
● Text Shadow
● Rounded corners
● Detect screen size, device orientation, ...
● ...

14.
Media Queries
● What is Media Queries?
A media query combines a media type and a
condition to specify how web content will
appear on a particular receiving device.

15.
Media Queries
● Example
@media screen and (min-width:1001px) and (max-width:1400px){
body {
background-color: red;
}
}
@media screen and (min-width:501px) and (max-width:1000px){
body {
background-color: blue;
}
}
@media screen and (min-width:240px) and (max-width:500px){
body {
background-color: white;
}
}

16.
Media Queries

17.
Design
● How to design website?
○ Design from smallest to larger viewports/screen
sizes.
○ "Stop thinking in pages, start thinking in systems."
- Jeremy Keith

18.
Conclusion
● Advantage
○ User Experience (Mobile/Tablet/Desktop)
○ Analytics
○ Not separate mobile site (for Sharing/Linking)
○ Optimized content (SEO best practice)
○ Development (no redirects/user-agent targeting)
○ Maintenance
○ Information Architecture

19.
Conclusion
● Disadvantage
○ Limitations of CSS media queries
○ Image resizing
○ Speed
○ Mobile needs and desktop needs may be different
○ Mobile versions are always more optimized

20.
Thanks for Your
Attention
Question & Answer

21.
Demo

22.
References
● Books:
○ Responsive Web Design with HTML5 and CSS3 by
Ben Frain
● URLs:
○ HTML5 : http://slides.html5rocks.com
○ RWD : http://goo.gl/eagpD