Modern HTML & CSS Coding: Speed, Semantics & Structure

SPEED, SEMANTICS
& STRUCTURE
Modern HTML and CSS Coding

Jon Henshaw
Co-Founder & CPO
@RavenJon

Saturday, November 12, 11

Speed

Why Speed?


Consolidate CSS

Less calls mean faster loading


Reference Elements

Avoid making IDs and Classes when possible


Reference Elements

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


Don’t Overload

Objective is to reduce load and rendering time


Don’t Overload


Be Wary of JavaScript

Libraries can conﬂict

Multiple libraries increase load time

Social JavaScript can keep a page from fully rendering


More Speed Options

Caching
CDN
Image Compression
Good Hosting


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


Semantics

Why Semantics?


Semantic CSS

Name by function


Semantic CSS
No

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

Yes

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

Living Standard HTML


Semantic Elements

http://raven.im/obswfn
nav, header, footer,
section, article and aside


http://html5boilerplate.com


Structured Data

Why Structured Data?


Structured Data Options

Microformats
RDFa
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 experience
especially 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 Henshaw
Co-Founder & CPO
@RavenJon


More Related Content