Responsive Web Design
with HTML5 and CSS3
Outline
● Introduction● When To Use It? Why?● How?
○ HTML5○ CSS3○ Media Queries○ Design
● Conclusion○ Advantage○ Disadvantage
Introduction
● What is Responsive Web Design?○ A website that renders the content respond to the
device that accesses it.
When To Use It? Why?
● Things to Consider:○ Money & Time○ SEO (Search Engine Optimization)○ Performance○ Browser Support
How To Do It?
● 4 Main Points to Know:○ HTML5○ CSS3○ Media Queries○ Design
HTML5
● What is HTML5?○ The fifth revision of HyperText Markup Language,
the core language for presenting content on the web.
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"), ...
HTML5
● Example<input type="tel" name="telephone" value="" />
CSS3
● What is CSS3?CSS3 is the newest implementation of that markup language and enables responsive markup.
CSS3
● CSS Selectorstr:nth-child(even) { background-color: gray;}tr:nth-child(odd) { background-color: white;}
CSS3
● Web Fonts@font-face { font-family: 'FontName'; src: url(FontPathLocation.ttf);}
h1 { font-family: 'FontName';}
CSS3
● Text Wrapping
● Columns
div {text-overflow: ellipsis;
}
div { *-column-count: 2; *-column-rule: 1px solid #bbb; *-column-gap: 2em;}
CSS3
● Transitions● Transforms / Rotations● Animations● Button Style● Text Shadow● Rounded corners● Detect screen size, device orientation, ...● ...
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.
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; }}
Media Queries
Design
● How to design website?○ Design from smallest to larger viewports/screen
sizes.○ "Stop thinking in pages, start thinking in systems."
- Jeremy Keith
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
Conclusion
● Disadvantage○ Limitations of CSS media queries○ Image resizing○ Speed○ Mobile needs and desktop needs may be different○ Mobile versions are always more optimized
Thanks for Your Attention
Question & Answer
Demo
References
● Books:○ Responsive Web Design with HTML5 and CSS3 by
Ben Frain● URLs:
○ HTML5 : http://slides.html5rocks.com○ RWD : http://goo.gl/eagpD