modern html & css coding: speed, semantics & structure

SPEED, SEMANTICS& STRUCTURE

Modern HTML and CSS Coding

Jon HenshawCo-Founder & CPO@RavenJon

Saturday, November 12, 11

Why Speed?

Speed


Less calls mean faster loading

Consolidate CSS


Avoid making IDs and Classes when possible

Reference Elements


h1 { font-size:2em; }p span { font-style:italic; }em { background:#ccc; }blockquote { padding:10px; }

Reference Elements


Objective is to reduce load and rendering time

Don’t Overload


Don’t Overload


Libraries can conflict

Multiple libraries increase load time

Social JavaScript can keep a page from fully rendering

Be Wary of JavaScript


CachingCDN

Image CompressionGood Hosting

More Speed Options


W3 Total Cache

http://raven.im/pvXTdi




CDN: AWS CloudFront

http://raven.im/o57Ko4




PNGCrush

http://raven.im/n8QeMi




Pair Networks

http://raven.im/nzFX3x




http://gtmetrix.com/




Google Webmaster Tools


Why Semantics?

Semantics


Name by function

Semantic CSS


No

<div class="yellow curved"> <p>Help...</p></div>

Yes

<div class="helpbox"> <p>Help...</p></div>

Semantic CSS


Living Standard HTML


nav, header, footer,section, article and aside

Semantic Elements

http://raven.im/obswfn




http://html5boilerplate.com




Structured Data

Why Structured Data?


Structured Data Options

MicroformatsRDFa

Microdata


schema.org

Microdata schemas for people, products, events, organizations, movies, books, reviews and much more


http://schema-creator.org




Social META Data


Open Graph Protocol

http://raven.im/pX2P1X




Evernote Site Memory

http://raven.im/qb69tm




Input Types

http://raven.im/s4rJci

Better user experienceespecially on mobile




Input Types: Search

<input type="search" />


Input Types: URL

<input type="url" />


Input Types: Email

<input type="email" />


Find me online at@RavenJon

Jon HenshawCo-Founder & CPO@RavenJon


Self Improvement