$30 off During Our Annual Pro Sale. View Details »

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. Progressive Prototyping with TODD ZAKI WARFEL / MATT VENTRE /

    EdUIConf /#HTML5
  2. GRAB THE FILES http://bit.ly/strappr

  3. Interaction design without prototyping is like cooking without tasting. Craig

    Villamore, cvil.ly “
  4. We like to taste the food we’re making.

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

    eraser, or on the construction site with a sledgehammer. Frank Lloyd Wright, Architect “
  6. None
  7. GUIDING PRINCIPLES Know your audience and intent.

  8. What’s the right level of fidelity?

  9. Hi Visual / Hi Functional Low Visual / Hi Functional

    Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity
  10. GUIDING PRINCIPLES Set expectations.

  11. GUIDING PRINCIPLES The best tool is the one you know.

  12. GUIDING PRINCIPLES Prototype only what you need.


  14. None

  16. HTML VS. HTML5

  17. 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">
  18. HTML5 Doctype <!DOCTYPE HTML>

  19. HTML Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>

    <fieldset> <input>
  20. 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
  21. HTML5 Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>

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

    structures, which previously required IDs and Classes. header footer aside section/article
  23. 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}
  24. 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
  25. 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>

  27. HTML5 Input Types date date-time email tel range search time

  28. Pro tip: HTML5 Search Input <form> <input type="search" name="q" placeholder="Search"

    autofocus> <input type="submit" value="Search"> </form>
  29. None
  30. 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>
  31. http://bit.ly/h5mobile

  32. IT’S THE NEW PHOTOSHOP, YO! Gettin’ Sexy with CSS3

  33. Fancy Buttons .fancy-button { } Fancy Button

  34. Those Vendor Prefixes -moz for Firefox -ms for Microsoft -0

    for Opera -webkit for Webkit (Safari and Chrome)
  35. -moz-border-radius:6px; -webkit-border-radius: 6px; border-radius:6px; Border Radius Fancy Button

  36. 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
  37. text-shadow: #d2572b 1px 1px 0; Text Shadow Fancy Button

  38. -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
  39. http://www.colorzilla.com/gradient-editor/

  40. Hit me with some jQuery!

  41. None
  42. toggle add-number toggle alt-number

  43. What just happened?

  44. Simple JavaScript Function $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {

    setTimeout( function() { $('.flash').fadeOut('fast'); }, 3000); });
  45. Simple JavaScript Function $('.new-number').click(function(){ $('.alt-number').fadeIn('fast'); });

  46. Resources http://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work.en.html http://html5shiv.googlecode.com/svn/trunk/html5.js http://modernizr.com/ http://diveintohtml5.org/ http://getreframer.com/ http://html5strappr.com/ HTML5 Spec

    CSS3 Spec HTML5SHIV Modernizer Dive Into HTML5 Reframer HTML5 Strappr
  47. Todd Zaki Warfel Matt Ventre Slides @zakiwarfel @mventre http://bit.ly/eduiconf http://bit.ly/protobk