View
5.227
Download
1
Category
Preview:
DESCRIPTION
Learn modern HTML and CSS coding techniques with a focus on site speed, semantic structure and structured data.
Citation preview
SPEED, SEMANTICS& STRUCTURE
Modern HTML and CSS Coding
Jon HenshawCo-Founder & CPO@RavenJon
Saturday, November 12, 11
Why Speed?
Speed
Saturday, November 12, 11
Less calls mean faster loading
Consolidate CSS
Saturday, November 12, 11
Avoid making IDs and Classes when possible
Reference Elements
Saturday, November 12, 11
h1 { font-size:2em; }p span { font-style:italic; }em { background:#ccc; }blockquote { padding:10px; }
Reference Elements
Saturday, November 12, 11
Objective is to reduce load and rendering time
Don’t Overload
Saturday, November 12, 11
Don’t Overload
Saturday, November 12, 11
Libraries can conflict
Multiple libraries increase load time
Social JavaScript can keep a page from fully rendering
Be Wary of JavaScript
Saturday, November 12, 11
CachingCDN
Image CompressionGood Hosting
More Speed Options
Saturday, November 12, 11
W3 Total Cache
http://raven.im/pvXTdi
Saturday, November 12, 11
CDN: AWS CloudFront
http://raven.im/o57Ko4
Saturday, November 12, 11
PNGCrush
http://raven.im/n8QeMi
Saturday, November 12, 11
Pair Networks
http://raven.im/nzFX3x
Saturday, November 12, 11
Google Webmaster Tools
Saturday, November 12, 11
Why Semantics?
Semantics
Saturday, November 12, 11
Name by function
Semantic CSS
Saturday, November 12, 11
No
<div class="yellow curved"> <p>Help...</p></div>
Yes
<div class="helpbox"> <p>Help...</p></div>
Semantic CSS
Saturday, November 12, 11
Living Standard HTML
Saturday, November 12, 11
nav, header, footer,section, article and aside
Semantic Elements
http://raven.im/obswfn
Saturday, November 12, 11
Saturday, November 12, 11
http://html5boilerplate.com
Saturday, November 12, 11
Structured Data
Why Structured Data?
Saturday, November 12, 11
Saturday, November 12, 11
Structured Data Options
MicroformatsRDFa
Microdata
Saturday, November 12, 11
schema.org
Microdata schemas for people, products, events, organizations, movies, books, reviews and much more
Saturday, November 12, 11
Saturday, November 12, 11
http://schema-creator.org
Saturday, November 12, 11
Social META Data
Saturday, November 12, 11
Open Graph Protocol
http://raven.im/pX2P1X
Saturday, November 12, 11
Saturday, November 12, 11
Evernote Site Memory
http://raven.im/qb69tm
Saturday, November 12, 11
Saturday, November 12, 11
Saturday, November 12, 11
Input Types
http://raven.im/s4rJci
Better user experienceespecially on mobile
Saturday, November 12, 11
Input Types: Search
<input type="search" />
Saturday, November 12, 11
Input Types: URL
<input type="url" />
Saturday, November 12, 11
Input Types: Email
<input type="email" />
Saturday, November 12, 11
Find me online at@RavenJon
Jon HenshawCo-Founder & CPO@RavenJon
Saturday, November 12, 11
Recommended