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

Designing with HTML5, CSS3, and jQuery

Designing with HTML5, CSS3, and jQuery

From the How Live Interactive conference in Boston


Todd Zaki Warfel

June 24, 2012


  1. Designing with HTML5, CSS3, and jQuery TODD ZAKI WARFEL @zakiwarfel

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

    Villamore, cvil.ly “
  3. I like to taste the food I’m making.

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

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

    Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity
  6. HTML5 as a design tool PROS & CONS

  7. None

  9. 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">
  10. HTML5 Doctype <!DOCTYPE  HTML>

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

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

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

    structures, which previously required IDs and Classes. header footer aside section/article
  15. 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}
  16. What about IE?

  17. What about the problem child? IE needs a little help

    from our friend JavaScript. • modernizr.com • html5shiv.googlecode.com/ svn/trunk/html5.js • github.com/scottjehl/ Respond/
  18. Pro tip: Smack IE Into Shape <!DOCTYPE  html> <html> <head>

    <!-­‐-­‐[if  lt  IE  9]> <script  src="/assets/javascripts/ modernizr.min.js"></script> <![endif]-­‐-­‐> </head>
  19. Responsive / Adaptive

  20. Media Queries /* Smartphones (portrait and landscape) ----------- */ @media

    only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }
  21. None
  22. None
  23. On forms and mobile

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

  25. http://bit.ly/h5mobile

  26. It’s the new Photoshop, Yo! Gettin’ Sexy with CSS3

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

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

  29. 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
  30. text-­‐shadow:  #d2572b  1px  1px  0; Text Shadow Fancy Button

  31. -­‐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
  32. http://www.colorzilla.com/gradient-editor/

  33. http://daneden.me/animate/

  34. Hit me with some jQuery!

  35. None
  36. jQuery: Self Heal $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {

    setTimeout( function() { $('.flash').fadeOut('fast'); }, 3000); });
  37. jQuery: Progressive Reveal $('.new-number').click(function(){ $('.alt-number').fadeIn('fast'); });

  38. 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