Your SlideShare is downloading. ×
0
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
Modern HTML & CSS Coding: Speed, Semantics & Structure
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

Modern HTML & CSS Coding: Speed, Semantics & Structure

5,315

Published on

Learn modern HTML and CSS coding techniques with a focus on site speed, semantic structure and structured data.

Learn modern HTML and CSS coding techniques with a focus on site speed, semantic structure and structured data.

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,315
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
0
Likes
4
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. SPEED, SEMANTICS & STRUCTURE Modern HTML and CSS Coding Jon Henshaw Co-Founder & CPO @RavenJonSaturday, November 12, 11
  • 2. Speed Why Speed?Saturday, November 12, 11
  • 3. Consolidate CSS Less calls mean faster loadingSaturday, November 12, 11
  • 4. Reference Elements Avoid making IDs and Classes when possibleSaturday, November 12, 11
  • 5. Reference Elements h1 { font-size:2em; } p span { font-style:italic; } em { background:#ccc; } blockquote { padding:10px; }Saturday, November 12, 11
  • 6. Don’t Overload Objective is to reduce load and rendering timeSaturday, November 12, 11
  • 7. Don’t OverloadSaturday, November 12, 11
  • 8. Be Wary of JavaScript Libraries can conflict Multiple libraries increase load time Social JavaScript can keep a page from fully renderingSaturday, November 12, 11
  • 9. More Speed Options Caching CDN Image Compression Good HostingSaturday, November 12, 11
  • 10. W3 Total Cache http://raven.im/pvXTdiSaturday, November 12, 11
  • 11. CDN: AWS CloudFront http://raven.im/o57Ko4Saturday, November 12, 11
  • 12. PNGCrush http://raven.im/n8QeMiSaturday, November 12, 11
  • 13. Pair Networks http://raven.im/nzFX3xSaturday, November 12, 11
  • 14. http://gtmetrix.com/Saturday, November 12, 11
  • 15. Google Webmaster ToolsSaturday, November 12, 11
  • 16. Semantics Why Semantics?Saturday, November 12, 11
  • 17. Semantic CSS Name by functionSaturday, November 12, 11
  • 18. Semantic CSS No <div class="yellow curved"> <p>Help...</p> </div> Yes <div class="helpbox"> <p>Help...</p> </div>Saturday, November 12, 11
  • 19. Living Standard HTMLSaturday, November 12, 11
  • 20. Semantic Elements http://raven.im/obswfn nav, header, footer, section, article and asideSaturday, November 12, 11
  • 21. Saturday, November 12, 11
  • 22. http://html5boilerplate.comSaturday, November 12, 11
  • 23. Structured Data Why Structured Data?Saturday, November 12, 11
  • 24. Saturday, November 12, 11
  • 25. Structured Data Options Microformats RDFa MicrodataSaturday, November 12, 11
  • 26. schema.org Microdata schemas for people, products, events, organizations, movies, books, reviews and much moreSaturday, November 12, 11
  • 27. Saturday, November 12, 11
  • 28. http://schema-creator.orgSaturday, November 12, 11
  • 29. Social META DataSaturday, November 12, 11
  • 30. Open Graph Protocol http://raven.im/pX2P1XSaturday, November 12, 11
  • 31. Saturday, November 12, 11
  • 32. Evernote Site Memory http://raven.im/qb69tmSaturday, November 12, 11
  • 33. Saturday, November 12, 11
  • 34. Saturday, November 12, 11
  • 35. Input Types http://raven.im/s4rJci Better user experience especially on mobileSaturday, November 12, 11
  • 36. Input Types: Search <input type="search" />Saturday, November 12, 11
  • 37. Input Types: URL <input type="url" />Saturday, November 12, 11
  • 38. Input Types: Email <input type="email" />Saturday, November 12, 11
  • 39. Find me online at @RavenJon Jon Henshaw Co-Founder & CPO @RavenJonSaturday, November 12, 11

×