Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Prototyping w/HTML5 and CSS3

Progressive Prototyping w/HTML5 and CSS3

Slides from our workshop on prototyping with HTML5, CSS3 and jQuery at EdUIConf.

Todd Zaki Warfel

October 13, 2011

More Decks by Todd Zaki Warfel

Other Decks in Design


  1. You can x it on the drafting board with an

    eraser, or on the construction site with a sledgehammer. Frank Lloyd Wright, Architect “
  2. Hi Visual / Hi Functional Low Visual / Hi Functional

    Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity
  3. HTML Doctypes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE

    html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. Typical HTML Page Structure A typical HTML page will use

    divs with IDs and Classes to create the structure. div id=header div id=footer div id= sidebar div id=content div id=nav
  5. HTML5 Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>

    <fieldset> <input> <aside> <section> <header>, <hgroup> <nav> <footer> <datalist> <progress> <time>
  6. Updated HTML5 Page Structure HTML5 gives semantic meaning to these

    structures, which previously required IDs and Classes. header footer aside section/article
  7. Pro Tip: Update your reset.css article, aside, footer, header, hgroup,

    nav, section {display:block; margin:0; padding:0; border:0; font- weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; list- style:none; outline:none}
  8. What about the problem child? IE needs a little help

    from our friend JavaScript. Modernizer/HTML5shiv to the rescue. • modernizr.com • html5shiv.googlecode.com/ svn/trunk/html5.js
  9. Pro tip: Smack IE Into Shape <!DOCTYPE html> <html> <head>

    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"></script> <![endif]--> </head>
  10. Pro tip: HTML5 Search Input <form> <input type="search" name="q" placeholder="Search"

    autofocus> <input type="submit" value="Search"> </form>
  11. HTML5 Registration Form <form> <input name="Full Name" placeholder="Enter your full

    name" autofocus required> <input type="email" name="Email" placeholder="Enter your email address" required> <input type="url" name="URL" placeholder="What’s your website address?"> <input type="submit" value="Register"> </form>
  12. Those Vendor Prefixes -moz for Firefox -ms for Microsoft -0

    for Opera -webkit for Webkit (Safari and Chrome)
  13. Background: Linear Gradient background:-moz-linear-gradient(center top, #eb9972, #e67646 55%, #d2572b); background:-

    webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-stop(0.55, #e67646), to(#d2572b)); Fancy Button
  14. -moz-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px;

    -webkit-box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; box-shadow: rgba (220, 224, 230, .7) 0 0 0 4px; Box Shadow Fancy Button