Designing with HTML5, CSS3, and jQuery

Designing with HTML5, CSS3, and jQuery

From the How Live Interactive conference in Boston

F57e2136eb9895eb95ff5dc8a1c02677?s=128

Todd Zaki Warfel

June 24, 2012
Tweet

Transcript

  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
  8. HTML VS. HTML5

  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

    url
  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