• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Modern HTML & CSS Coding: Speed, Semantics & Structure
 

Modern HTML & CSS Coding: Speed, Semantics & Structure

on

  • 5,389 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,389
Views on SlideShare
5,368
Embed Views
21

Actions

Likes
3
Downloads
49
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