Contenu connexe Similaire à Modern HTML & CSS Coding: Speed, Semantics & Structure (20) Modern HTML & CSS Coding: Speed, Semantics & Structure1. 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
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
12. PNGCrush
http://raven.im/n8QeMi
Saturday, November 12, 11
13. Pair Networks
http://raven.im/nzFX3x
Saturday, November 12, 11
16. Semantics
Why Semantics?
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
20. Semantic Elements
http://raven.im/obswfn
nav, header, footer,
section, article and aside
Saturday, November 12, 11
26. schema.org
Microdata schemas for people, products, events,
organizations, movies, books, reviews and much more
Saturday, November 12, 11
35. Input Types
http://raven.im/s4rJci
Better user experience
especially on mobile
Saturday, November 12, 11
39. Find me online at
@RavenJon
Jon Henshaw
Co-Founder & CPO
@RavenJon
Saturday, November 12, 11