Modern HTML & CSS Coding: Speed, Semantics & Structure
Upcoming SlideShare
Loading in...5
×
 

Modern HTML & CSS Coding: Speed, Semantics & Structure

on

  • 5,721 views

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

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

Statistics

Views

Total Views
5,721
Views on SlideShare
5,700
Embed Views
21

Actions

Likes
3
Downloads
51
Comments
0

4 Embeds 21

http://paper.li 16
http://www2.verious.com 3
http://a0.twimg.com 1
http://www.verious.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Modern HTML & CSS Coding: Speed, Semantics & Structure Modern HTML & CSS Coding: Speed, Semantics & Structure Presentation Transcript

  • SPEED, SEMANTICS & STRUCTURE Modern HTML and CSS Coding Jon Henshaw Co-Founder & CPO @RavenJonSaturday, November 12, 11
  • Speed Why Speed?Saturday, November 12, 11
  • Consolidate CSS Less calls mean faster loadingSaturday, November 12, 11
  • Reference Elements Avoid making IDs and Classes when possibleSaturday, November 12, 11
  • Reference Elements h1 { font-size:2em; } p span { font-style:italic; } em { background:#ccc; } blockquote { padding:10px; }Saturday, November 12, 11
  • Don’t Overload Objective is to reduce load and rendering timeSaturday, November 12, 11
  • Don’t OverloadSaturday, November 12, 11
  • Be Wary of JavaScript Libraries can conflict Multiple libraries increase load time Social JavaScript can keep a page from fully renderingSaturday, November 12, 11
  • More Speed Options Caching CDN Image Compression Good HostingSaturday, November 12, 11
  • W3 Total Cache http://raven.im/pvXTdiSaturday, November 12, 11
  • CDN: AWS CloudFront http://raven.im/o57Ko4Saturday, November 12, 11
  • PNGCrush http://raven.im/n8QeMiSaturday, November 12, 11
  • Pair Networks http://raven.im/nzFX3xSaturday, November 12, 11
  • http://gtmetrix.com/Saturday, November 12, 11
  • Google Webmaster ToolsSaturday, November 12, 11
  • Semantics Why Semantics?Saturday, November 12, 11
  • Semantic CSS Name by functionSaturday, November 12, 11
  • Semantic CSS No <div class="yellow curved"> <p>Help...</p> </div> Yes <div class="helpbox"> <p>Help...</p> </div>Saturday, November 12, 11
  • Living Standard HTMLSaturday, November 12, 11
  • Semantic Elements http://raven.im/obswfn nav, header, footer, section, article and asideSaturday, November 12, 11
  • Saturday, November 12, 11
  • http://html5boilerplate.comSaturday, November 12, 11
  • Structured Data Why Structured Data?Saturday, November 12, 11
  • Saturday, November 12, 11
  • Structured Data Options Microformats RDFa MicrodataSaturday, November 12, 11
  • schema.org Microdata schemas for people, products, events, organizations, movies, books, reviews and much moreSaturday, November 12, 11
  • Saturday, November 12, 11
  • http://schema-creator.orgSaturday, November 12, 11
  • Social META DataSaturday, November 12, 11
  • Open Graph Protocol http://raven.im/pX2P1XSaturday, November 12, 11
  • Saturday, November 12, 11
  • Evernote Site Memory http://raven.im/qb69tmSaturday, November 12, 11
  • Saturday, November 12, 11
  • Saturday, November 12, 11
  • Input Types http://raven.im/s4rJci Better user experience especially on mobileSaturday, 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 Henshaw Co-Founder & CPO @RavenJonSaturday, November 12, 11