Designing with HTML5, CSS3, and jQuery

From the How Live Interactive conference in Boston

Transcript

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

   View Slide

2. Interaction design without
   prototyping is like cooking without
   tasting.
   Craig Villamore, cvil.ly
   “
   

   View Slide

3. I like to taste the food
   I’m making.
   

   View Slide

4. You can x it on the drafting board
   with an eraser, or on the
   construction site with a
   sledgehammer.
   Frank Lloyd Wright, Architect
   “
   

   View Slide

5. Hi Visual / Hi Functional
   Low Visual / Hi Functional
   Lo Visual / Low Functional
   Hi Visual / Low Functional
   Levels of Fidelity
   

   View Slide

6. HTML5 as a design tool
   PROS & CONS
   

   View Slide

7. View Slide

8. HTML VS. HTML5
   

   View Slide

9. HTML Doctypes
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd">
        "http://www.w3.org/TR/html4/loose.dtd">
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd">
        "http://www.w3.org/TR/html4/strict.dtd">
        "http://www.w3.org/TR/html4/loose.dtd">
   

   View Slide

10. HTML5 Doctype
    
    

    View Slide

11. HTML Tags
    
    
    ,  ,  
    ,  ,  
    
    
    

    View Slide

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
    

    View Slide

13. HTML5 Tags
    
    
    ,  ,  
    ,  ,  
    
    
    
    
    ,
    
    
    
    
    
    

    View Slide

14. Updated HTML5 Page Structure
    HTML5 gives semantic meaning to
    these structures, which previously
    required IDs and Classes.
    header
    footer
    aside
    section/article
    

    View Slide

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}
    

    View Slide

16. What
    about IE?
    

    View Slide

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/
    

    View Slide

18. Pro tip: Smack IE Into Shape
    
    
    
    
    modernizr.min.js">
    
    
    

    View Slide

19. Responsive / Adaptive
    

    View Slide

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 */
    }
    

    View Slide

21. View Slide

22. View Slide

23. On forms and mobile
    

    View Slide

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

    View Slide

25. http://bit.ly/h5mobile
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

32. http://www.colorzilla.com/gradient-editor/
    

    View Slide

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

    View Slide

34. Hit me with some
    jQuery!
    

    View Slide

35. View Slide

36. jQuery: Self Heal
    $('.flash').click(function() {
    $(this).slideUp('fast');
    });
    $('.flash').fadeIn( function() {
    
    setTimeout( function() {
    $('.flash').fadeOut('fast');
    }, 3000);
    });
    

    View Slide

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

    View Slide

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
    

    View Slide