Slide 1

Slide 1 text

David Newton, St. Michael’s Hospital 1 Universal Web Design How to create an awesome experience for every user Open Source Bridge, 2015-06-24 Twitter: @newtron Github: @nwtn Email: [email protected] Slides: http://nwtn.ca/c

Slide 2

Slide 2 text

2 #uwd

Slide 3

Slide 3 text

3 What is universal design? Part 1

Slide 4

Slide 4 text

“ 4 Universal design is the design of products and environments to be usable by all people, to the greatest extent possible… —Ronald L. Mace

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 —Photo by Beast

Slide 8

Slide 8 text

8 —Image by the Sustainable Sanitation Alliance (SuSanA)

Slide 9

Slide 9 text

9 —Photo by Naquib Hossain

Slide 10

Slide 10 text

10 The web.

Slide 11

Slide 11 text

11 Why should I even care? Part 2

Slide 12

Slide 12 text

12 Why do you have a website?

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

16 —Photo by Petr Novák, Wikipedia

Slide 17

Slide 17 text

Slide 18

Slide 18 text

18 Who are your users?

Slide 19

Slide 19 text

19 You are not the user.

Slide 20

Slide 20 text

20 Users are diverse

Slide 21

Slide 21 text

Slide 22

Slide 22 text

22 —Chart by US Census Bureau

Slide 23

Slide 23 text

23 —Chart by OpenSignal

Slide 24

Slide 24 text

24 —Photo by Luke Wroblewski

Slide 25

Slide 25 text

25 —Chart by PewResearchCenter

Slide 26

Slide 26 text

26 —Chart by OpenSignal

Slide 27

Slide 27 text

Slide 28

Slide 28 text

28 —Data from Jana Hours of minimum wage work needed to pay for a 500 MB mobile data plan Brazil Mexico Nigeria South Africa India Turkey Indonesia Vietnam Philippines United States Italy Germany 0 10 20 30 40 1 2.2 5.7 9.7 10.5 13.2 13.4 17 18 28.2 33.9 34.4

Slide 29

Slide 29 text

29 All users are important

Slide 30

Slide 30 text

30 Design with empathy

Slide 31

Slide 31 text

31 I care! Now what? Part 3

Slide 32

Slide 32 text

32 1. Equitable use 2. Flexibility in use 3. Simple and intuitive 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size and space for approach and use

Slide 33

Slide 33 text

33 Equitable use

Slide 34

Slide 34 text

34 Make one version of your site. Do this:

Slide 35

Slide 35 text

35 Flexibility in use

Slide 36

Slide 36 text

36 Provide choice in methods of use. Do this:

Slide 37

Slide 37 text

37 Simple and intuitive

Slide 38

Slide 38 text

38 Do this: Eliminate unnecessary complexity.

Slide 39

Slide 39 text

39 Do this: Be consistent.

Slide 40

Slide 40 text

40 Do this: Accommodate a wide range of skills.

Slide 41

Slide 41 text

41 Perceptible information

Slide 42

Slide 42 text

42 Do this: Use different modes for presentation of information.

Slide 43

Slide 43 text

43 Do this: Provide adequate contrast and maximize legibility.

Slide 44

Slide 44 text

44 Do this: Support assistive technologies.

Slide 45

Slide 45 text

45 Tolerance for error

Slide 46

Slide 46 text

46 Do this: Provide warnings and fail safe features.

Slide 47

Slide 47 text

47 Low physical effort

Slide 48

Slide 48 text

Minimize repetitive actions & sustained physical effort. 48 Do this:

Slide 49

Slide 49 text

49 Size and space for approach and use

Slide 50

Slide 50 text

50 P.A.PE.R. Part 4

Slide 51

Slide 51 text

51 P.A.PE.R. Part 4

Slide 52

Slide 52 text

52 P.A.PE.R. Part 4 because remembering four things is easier than remembering seven things

Slide 53

Slide 53 text

53 Performance Accessibility Progressive Enhancement Responsive web design

Slide 54

Slide 54 text

54 Performance Deliver a great experience to all users, regardless of their connection.

Slide 55

Slide 55 text

55 Accessibility Deliver a great experience to all users, regardless of their ability.

Slide 56

Slide 56 text

56 Progressive enhancement Deliver a great experience to all users, regardless of their browser’s ability.

Slide 57

Slide 57 text

Deliver a great experience to all users, regardless of their viewing context. 57 Responsive web design

Slide 58

Slide 58 text

58 Accessibility Progressive enhancement Responsive web design Web performance Universal web design Accessibility Progressive enhancement Responsive web design Web performance

Slide 59

Slide 59 text

58 Accessibility Progressive enhancement Responsive web design Web performance Universal web design Accessibility Progressive enhancement Responsive web design Web performance

Slide 60

Slide 60 text

58 Universal web design Accessibility Progressive enhancement Responsive web design Web performance

Slide 61

Slide 61 text

Deliver a great experience to all users. 59 Universal web design

Slide 62

Slide 62 text

60 Even more tips! Bonus

Slide 63

Slide 63 text

Render content server-side. 61 Do this:

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

“ 64 MVC stands for ‘Maybe Viewable Content.’ —Scott Jehl

Slide 67

Slide 67 text

Use semantic markup. 65 Do this:

Slide 68

Slide 68 text

66 Button Don’t do this:

Slide 69

Slide 69 text

67 Button Link Do this:

Slide 70

Slide 70 text

Heading

Subheading

Don’t do this:

Slide 71

Slide 71 text

Heading

Subheading

Do this:

Slide 72

Slide 72 text

70 The HTML5 document outline is a lie.

Slide 73

Slide 73 text

Heading

Subheading

Don’t do this:

Slide 74

Slide 74 text

Heading

Subheading

Do this:

Slide 75

Slide 75 text

73 Detect features. Do this:

Slide 76

Slide 76 text

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Cut the mustard. 76 Do this:

Slide 79

Slide 79 text

77 1. The “oh crap!” version: just HTML

Slide 80

Slide 80 text

Slide 81

Slide 81 text

79 1. The “oh crap!” version: just HTML 2. The basic version: simple CSS, no JS

Slide 82

Slide 82 text

Slide 83

Slide 83 text

81 1. The “oh crap!” version: just HTML 2. The basic version: simple CSS, no JS 3. The whiz-bang version: all the things

Slide 84

Slide 84 text

82 if( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window ) { // load things }

Slide 85

Slide 85 text

83 https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadJS

Slide 86

Slide 86 text

Test. A lot. Do this: 84

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Slide 92

Slide 92 text

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Listen to your users. Do this: 96

Slide 99

Slide 99 text

Slide 100

Slide 100 text

98 —Photo by Big Lot Pet Supplies

Slide 101

Slide 101 text

Remove barriers. 99 Do this:

Slide 102

Slide 102 text

100 make things easier for your users

Slide 103

Slide 103 text

101 make things easier for your users, even if it’s harder for you

Slide 104

Slide 104 text

David Newton, St. Michael’s Hospital 102 Universal Web Design How to create an awesome experience for every user Open Source Bridge, 2015-06-24 Twitter: @newtron Github: @nwtn Email: [email protected] Slides: http://nwtn.ca/c