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

1. SPEED, SEMANTICS
& STRUCTURE
Modern HTML and CSS Coding
Jon Henshaw
Co-Founder & CPO
@RavenJon
Saturday, November 12, 11

2. Speed
Why Speed?
Saturday, November 12, 11

3. Consolidate CSS
Less calls mean faster loading
Saturday, November 12, 11

4. Reference Elements
Avoid making IDs and Classes when possible
Saturday, 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 time
Saturday, November 12, 11

7. Don’t Overload
Saturday, November 12, 11

8. Be Wary of JavaScript
Libraries can conflict
Multiple libraries increase load time
Social JavaScript can keep a page from fully rendering
Saturday, November 12, 11

9. More Speed Options
Caching
CDN
Image Compression
Good Hosting
Saturday, November 12, 11

10. W3 Total Cache
http://raven.im/pvXTdi
Saturday, November 12, 11

11. CDN: AWS CloudFront
http://raven.im/o57Ko4
Saturday, November 12, 11

12. PNGCrush
http://raven.im/n8QeMi
Saturday, November 12, 11

13. Pair Networks
http://raven.im/nzFX3x
Saturday, November 12, 11

14. http://gtmetrix.com/
Saturday, November 12, 11

15. Google Webmaster Tools
Saturday, November 12, 11

16. Semantics
Why Semantics?
Saturday, November 12, 11

17. Semantic CSS
Name by function
Saturday, 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 HTML
Saturday, November 12, 11

20. Semantic Elements
http://raven.im/obswfn
nav, header, footer,
section, article and aside
Saturday, November 12, 11

21. Saturday, November 12, 11

22. http://html5boilerplate.com
Saturday, November 12, 11

23. Structured Data
Why Structured Data?
Saturday, November 12, 11

24. Saturday, November 12, 11

25. Structured Data Options
Microformats
RDFa
Microdata
Saturday, November 12, 11

26. schema.org
Microdata schemas for people, products, events,
organizations, movies, books, reviews and much more
Saturday, November 12, 11

27. Saturday, November 12, 11

28. http://schema-creator.org
Saturday, November 12, 11

29. Social META Data
Saturday, November 12, 11

30. Open Graph Protocol
http://raven.im/pX2P1X
Saturday, November 12, 11

31. Saturday, November 12, 11

32. Evernote Site Memory
http://raven.im/qb69tm
Saturday, 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 mobile
Saturday, 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
@RavenJon
Saturday, November 12, 11