Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Responsive Web Design with HTML5 and CSS3

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
HTML5, CSS3, and JavaScript
HTML5, CSS3, and JavaScript
Wird geladen in …3
×

Hier ansehen

1 von 22 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie Responsive Web Design with HTML5 and CSS3 (20)

Responsive Web Design with HTML5 and CSS3

  1. 1. Responsive Web Design with 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

×