UXWeek Prototyping with HTML5

UXWeek Prototyping with HTML5

Slides from my UXWeek workshop on prototyping w/HTML5, CSS3, and jQuery.


Todd Zaki Warfel

August 23, 2012


  1. Progressive Prototyping with TODD ZAKI WARFEL / #uxweek #html5

  2. GRAB THE FILES http://bit.ly/strappr

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

    Villamore, cvil.ly “
  4. I like to taste the food I’m 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. GUIDING PRINCIPLE Know your audience and intent.

  7. What’s the right level of fidelity?

  8. Hi Visual / Hi Functional Low Visual / Hi Functional

    Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity
  9. None
  10. None
  11. None
  12. GUIDING PRINCIPLE Set expectations.

  13. What’s the best prototyping tool?

  14. Anetype Axure Balsamiq Blocks (8shapes) Bootstrap Catalyst Excel Fireworks Flash

    Foundation Gliffy HTML/CSS HotGloo Keynote/ PowerPoint InVision App iPlotz iRise jQuery UI Justinmind MockFlow Mocking Bird MS Expression OmniGraffle Paper Pidoco Protonotes ProtoShare Proto.io SketchFlow Sencha Visio Xcode
  15. 14,000,000

  16. GUIDING PRINCIPLE The best tool is the one you know.


  18. datafirst

  19. Prototype to production in a week.


  21. None
  22. HTML VS. HTML5

  23. 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">
  24. HTML5 Doctype <!DOCTYPE  HTML>

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

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

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

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

  33. HTML5 Input Types date date-­‐time email tel range search time

  34. None
  35. http://bit.ly/h5mobile

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

  37. getreframer.com

  38. getreframer.com

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

  40. None
  41. -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐ radius:6px;  border-­‐radius:6px; Border Radius Fancy Button

  42. Background: Linear Gradient background:  #fdf07a; background:  -­‐moz-­‐linear-­‐gradient(top,     #fdf07a

     0%,  #f4e34e  45%,  #ecc90a  100%); background:  -­‐webkit-­‐linear-­‐gradient(top,     #fdf07a  0%,#f4e34e  45%,#ecc90a  100%); background:  linear-­‐gradient(to  bottom,     #fdf07a  0%,#f4e34e  45%,#ecc90a  100%);
  43. http://www.colorzilla.com/gradient-editor/

  44. text-­‐shadow:  #d2572b  1px  1px  0; Text Shadow Fancy Button

  45. -­‐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
  46. Hit me with some jQuery!

  47. None
  48. None
  49. Simple JavaScript Function $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {

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

  51. None
  52. getreframer.com

  53. 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://colorzilla.com/gradient-editor/ http://0to255.com/ http://getreframer.com/ http://html5strappr.com/

    HTML5 Spec CSS3 Spec HTML5SHIV Modernizer Dive Into HTML5 CSS3 Generator 0to255 Reframer HTML5 Strappr
  54. Todd Zaki Warfel Slides @zakiwarfel http://bit.ly/h5proto http://bit.ly/protobk