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

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

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

    structures, which previously required IDs and Classes. header footer aside section/article
  7. 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}
  8. 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/
  9. Pro tip: Smack IE Into Shape <!DOCTYPE  html> <html> <head>

    <!-­‐-­‐[if  lt  IE  9]> <script  src="/assets/javascripts/ modernizr.min.js"></script> <![endif]-­‐-­‐> </head>
  10. 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 */ }
  11. 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
  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