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