Your SlideShare is downloading. ×
  • Like
Modern HTML & CSS Coding: Speed, Semantics & Structure
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Modern HTML & CSS Coding: Speed, Semantics & Structure

  • 5,048 views
Published

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,048
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
62
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