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

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

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. 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
  4. 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">
  5. 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
  6. HTML5 Tags <div> <p> <dl>,  <dt>,  <dd> <ol>,  <ul>,  <li>

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

    structures, which previously required IDs and Classes. header footer aside section/article
  8. 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}
  9. 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
  10. 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>
  11. 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%);
  12. -­‐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