modern html & css coding: speed, semantics & structure

Download Modern HTML & CSS Coding: Speed, Semantics & Structure

Post on 09-May-2015

5.220 views

Category:

Self Improvement

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1.SPEED, SEMANTICS& STRUCTURE Modern HTML and CSS CodingJon HenshawCo-Founder & CPO@RavenJonSaturday, November 12, 11

2. SpeedWhy 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. Dont Overload Objective is to reduce load and rendering timeSaturday, November 12, 11 7. Dont OverloadSaturday, November 12, 11 8. Be Wary of JavaScript Libraries can conictMultiple libraries increase load time Social JavaScript can keep a page from fully renderingSaturday, November 12, 11 9. More Speed OptionsCaching CDN Image CompressionGood HostingSaturday, November 12, 11 10. W3 Total Cachehttp://raven.im/pvXTdiSaturday, November 12, 11 11. CDN: AWS CloudFronthttp://raven.im/o57Ko4Saturday, November 12, 11 12. PNGCrushhttp://raven.im/n8QeMiSaturday, November 12, 11 13. Pair Networkshttp://raven.im/nzFX3xSaturday, November 12, 11 14. http://gtmetrix.com/Saturday, November 12, 11 15. Google Webmaster ToolsSaturday, November 12, 11 16. SemanticsWhy Semantics?Saturday, November 12, 11 17. Semantic CSSName by functionSaturday, November 12, 11 18. Semantic CSSNo

Help...

Yes

Help...

Saturday, November 12, 11 19. Living Standard HTMLSaturday, November 12, 11 20. Semantic Elementshttp://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 OptionsMicroformats RDFaMicrodataSaturday, November 12, 11 26. schema.orgMicrodata 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 Memoryhttp://raven.im/qb69tmSaturday, November 12, 11 33. Saturday, November 12, 11 34. Saturday, November 12, 11 35. Input Typeshttp://raven.im/s4rJciBetter user experienceespecially on mobileSaturday, November 12, 11 36. Input Types: SearchSaturday, November 12, 11 37. Input Types: URLSaturday, November 12, 11 38. Input Types: EmailSaturday, November 12, 11 39. Find me online at @RavenJonJon HenshawCo-Founder & CPO@RavenJonSaturday, November 12, 11

Recommended

View more >