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