"Design for the Web" course

A presentation for the students at the "Design for the Web" course at Tower Hamlets College.

Transcript

1. Design for
   the Web
   Poplar, Feb '13
   

   View Slide

2. Peter Gasston
   @stopsatgreen
   

   View Slide

3. Creative Technologist
   rehabstudio.com
   (almost)
   

   View Slide

4. 1. HTML5 Forms
   2. 3 Good Reasons
   3. Advice
   

   View Slide

5. HTML5 Forms
   

   View Slide

6. HTML5 Forms
   

   View Slide

7. View Slide

8. View Slide

9. HTML5 Forms
   

   View Slide

10. Forms are the focal
    point of most of the
    user's interaction
    with your website.
    

    View Slide

11. 1. Relationship
    2. Conversation
    3. Appearance
    http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/
    Form Usability
    

    View Slide

12. 
    Text inputs
    
    
    
    
    

    View Slide

13. Number inputs
    
    
    

    View Slide

14. Date inputs
    
    
    
    
    
    
    

    View Slide

15. Outputs
    
    
    
    

    View Slide

16. Constraint
    Validation
    

    View Slide

17. Required fields
    
    
    

    View Slide

18. Pattern
    Matching
    

    View Slide

19. Pattern matching
    
    
    title="Numbers only!!!">
    

    View Slide

20. Limit
    Matching
    

    View Slide

21. Limit matching
    
    

    View Slide

22. CSS for Form
    Validation
    

    View Slide

23. UI State Pseudo-classes
    :required || :optional
    :valid || :invalid
    :in-range || :out-of-range
    

    View Slide

24. JavaScript
    for Form
    Validation
    

    View Slide

25. Constraint Validation API
    el.willValidate
    el.checkValidity()
    el.validity
    

    View Slide

26. Constraint Validation Events
    el.addEventListener('invalid',foo);
    el.setCustomValidity('PLOP');
    

    View Slide

27. Enough about
    bloody forms
    

    View Slide

28. Working on
    the Web
    

    View Slide

29. It is your
    It is your
    patriotic
    patriotic duty
    duty
    

    View Slide

30. Sharing =
    innovation
    

    View Slide

31. The adjacent
    possible
    

    View Slide

32. The fruits of
    hard-earned
    experience
    

    View Slide

33. Be empathetic
    and subjective
    

    View Slide

34. Neither your opinion of
    what users should think,
    nor my opinion of what
    users should think, matters
    as much as what users
    actually do think. Be a
    scientist, not a priest.
    - Mark Shuttleworth
    

    View Slide

35. Be an
    idealistic
    pragmatist
    

    View Slide

36. Never try to discourage
    thinking, for you are sure
    to succeed.
    - Bertrand Russell
    

    View Slide

37. Be confident in
    your knowledge
    

    View Slide

38. http://xkcd.com/386/
    

    View Slide

39. Be willing
    to learn
    

    View Slide

40. Be unsatisfied
    

    View Slide

41. View Slide

42. Be involved
    in everything
    

    View Slide

43. Be a
    communicator
    

    View Slide

44. Be an
    archivist
    

    View Slide

45. Be professional
    

    View Slide

46. Fin.
    

    View Slide