Your SlideShare is downloading. ×
0
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design with HTML5 and CSS3

16,951

Published on

11 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,951
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
369
Comments
11
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive Web Designwith 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

×