Downloaded 553 times
Uploaded byKannika Kong
17,761 views
Responsive Web Design with HTML5 and CSS3
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.
Responsive Web Design with HTML5 and CSS3
- 1.Responsive Web Designwith HTML5 and CSS3
- 2.Outline● Introduction● WhenTo Use It? Why?● How? ○ HTML5 ○ CSS3 ○ Media Queries ○ Design● Conclusion ○ Advantage ○ Disadvantage
- 3.Introduction● What isResponsive Web Design? ○ A website that renders the content respond to the device that accesses it.
- 4.When To UseIt? Why?● Things to Consider: ○ Money & Time ○ SEO (Search Engine Optimization) ○ Performance ○ Browser Support
- 5.How To DoIt?● 4 Main Points to Know: ○ HTML5 ○ CSS3 ○ Media Queries ○ Design
- 6.HTML5● What isHTML5? ○ 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 isCSS3? 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● Whatis 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.
- 17.Design● How todesign 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.
- 22.References● Books:○ Responsive Web Design with HTML5 and CSS3 by Ben Frain● URLs: ○ HTML5 : http://slides.html5rocks.com ○ RWD : http://goo.gl/eagpD