Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design with HTML5 and CSS3

19,019 views

Published on

Responsive Web Design with HTML5 and CSS3

  1. 1. Responsive Web Designwith HTML5 and CSS3
  2. 2. Outline● Introduction● When To Use It? Why?● How? ○ HTML5 ○ CSS3 ○ Media Queries ○ Design● Conclusion ○ Advantage ○ Disadvantage
  3. 3. Introduction● What is Responsive Web Design? ○ A website that renders the content respond to the device that accesses it.
  4. 4. When To Use It? Why?● Things to Consider: ○ Money & Time ○ SEO (Search Engine Optimization) ○ Performance ○ Browser Support
  5. 5. How To Do It?● 4 Main Points to Know: ○ HTML5 ○ CSS3 ○ Media Queries ○ Design
  6. 6. HTML5● What is HTML5? ○ The fifth revision of HyperText Markup Language, the core language for presenting content on the web.
  7. 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. 8. HTML5● Example <input type="tel" name="telephone" value="" />
  9. 9. CSS3● What is CSS3? CSS3 is the newest implementation of that markup language and enables responsive markup.
  10. 10. CSS3● CSS Selectors tr:nth-child(even) { background-color: gray; } tr:nth-child(odd) { background-color: white; }
  11. 11. CSS3● Web Fonts @font-face { font-family: FontName; src: url(FontPathLocation.ttf); } h1 { font-family: FontName; }
  12. 12. CSS3● Text Wrapping div { text-overflow: ellipsis; }● Columns div { *-column-count: 2; *-column-rule: 1px solid #bbb; *-column-gap: 2em; }
  13. 13. CSS3● Transitions● Transforms / Rotations● Animations● Button Style● Text Shadow● Rounded corners● Detect screen size, device orientation, ...● ...
  14. 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. 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. 16. Media Queries
  17. 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. 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. 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. 20. Thanks for Your Attention Question & Answer
  21. 21. Demo
  22. 22. References● Books: ○ Responsive Web Design with HTML5 and CSS3 by Ben Frain● URLs: ○ HTML5 : http://slides.html5rocks.com ○ RWD : http://goo.gl/eagpD

×