SlideShare a Scribd company logo

Responsive Web Design with HTML5 and CSS3

•
•
Kannika Kong
Kannika Kong

This document discusses responsive web design using HTML5 and CSS3. It defines responsive web design as websites that render content tailored to the device accessing it. It covers using HTML5 for multimedia, geolocation and offline capabilities. CSS3 enables responsive markup through selectors, web fonts, columns and transitions. Media queries allow specifying styles based on screen size. The document advocates designing first for small screens and using systems thinking. Advantages include optimized user experience across devices while disadvantages include limited queries and need for separate mobile optimizations.

Related slideshows

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
1 of 22
Download to read offline
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 Selectors tr: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 div { text-overflow: ellipsis; } ● Columns 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

More Related Content

Responsive Web Design with HTML5 and CSS3

  • 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; } }
  • 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