UXWeek Prototyping with HTML5

Slides from my UXWeek workshop on prototyping w/HTML5, CSS3, and jQuery.

Transcript

1. Progressive
   Prototyping
   with
   TODD ZAKI WARFEL / #uxweek #html5
   

   View Slide

2. GRAB THE FILES
   http://bit.ly/strappr
   

   View Slide

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

   View Slide

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

   View Slide

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

6. GUIDING PRINCIPLE
   Know your audience
   and intent.
   

   View Slide

7. What’s the right level
   of fidelity?
   

   View Slide

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

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. GUIDING PRINCIPLE
    Set expectations.
    

    View Slide

13. What’s the best
    prototyping tool?
    

    View Slide

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

    View Slide

15. 14,000,000
    

    View Slide

16. GUIDING PRINCIPLE
    The best tool is the one
    you know.
    

    View Slide

17. HTML AS A PROTOTYPING TOOL
    PROS & CONS
    

    View Slide

18. datafirst
    

    View Slide

19. Prototype to
    production
    in a week.
    

    View Slide

20. LET’S WORK
    OPEN YOUR PROJECT
    

    View Slide

21. View Slide

22. HTML VS. HTML5
    

    View Slide

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

24. HTML5 Doctype
    
    

    View Slide

25. HTML Tags
    
    
    ,  ,  
    ,  ,  
    
    
    

    View Slide

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

27. HTML5 Tags
    
    
    ,  ,  
    ,  ,  
    
    
    
    
    ,
    
    
    
    
    
    

    View Slide

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

    View Slide

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

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

    View Slide

31. Pro tip: Smack IE Into Shape
    
    
    
    
    html5shiv.googlecode.com/svn/trunk/
    html5.js">
    
    
    

    View Slide

32. FORMS ANYONE?
    

    View Slide

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

    View Slide

34. View Slide

35. http://bit.ly/h5mobile
    

    View Slide

36. IT’S THE NEW PHOTOSHOP, YO!
    Gettin’ Sexy with CSS3
    

    View Slide

37. getreframer.com
    

    View Slide

38. getreframer.com
    

    View Slide

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

    View Slide

40. View Slide

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

    View Slide

42. 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%);
    

    View Slide

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

    View Slide

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

    View Slide

45. -­‐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

46. Hit me with some
    jQuery!
    

    View Slide

47. View Slide

48. View Slide

49. Simple JavaScript Function
    $('.flash').click(function() {
    $(this).slideUp('fast');
    });
    $('.flash').fadeIn( function() {
    
    setTimeout( function() {
    $('.flash').fadeOut('fast');
    }, 3000);
    });
    

    View Slide

50. Simple JavaScript Function
    $('.new-number').click(function(){
    $('.alt-number').fadeIn('fast');
    });
    

    View Slide

51. View Slide

52. getreframer.com
    

    View Slide

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

54. Todd Zaki Warfel
    Slides
    @zakiwarfel
    http://bit.ly/h5proto
    http://bit.ly/protobk
    

    View Slide