Responsive Web Design with HTML5 and CSS3
19 likes17,680 views
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.
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Responsive Web Design with HTML5 and CSS3 (20)
Ad
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; } }
- 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