1.
Photo credit: Jeremy Brooks via Creative Commons
Making the Web
@clarissa

2.
Photo credit:The Adventures of Kristin & Adam via Creative Commons

3.
Photo credit: Simone Bosotti via Creative Commons

4.
Photo credit: Jeff Turner via Creative Commons

5.
Photo credit: Paul Swansen via Creative Commons

6.
Photo credit:Aaron Fulkerson via Creative Commons

7.
Photo credit:Thomas Link via Creative Commons

8.
https://twitter.com/halvorson/status/686569663761891328

9.
What Is This Website?

10.
The One Piece of
Information

11.
Don't Hide Things

12.
Splash Screens?
Almost Never

13.
No

14.
Start Here

15.
Form Fields

16.
<input'type="text"'name="username">
Text

17.
<input'type="date"'name="birthday">
Date

18.
<input'type="time"'name="start5time">
Time

19.
<input'type="email"'name="email5address">
Email

20.
<input'type="url"'name="website">
URL

21.
<input'type="number"'name="amount">
Number

22.
<input'type="tel"'name="phone5number">
Telephone

23.
Define What's Needed

24.
Show Password

25.
Avoid Drop-downs
For Short Lists

26.
Ask For Less

27.
Show Which Fields
Are Required

28.
<label>
First'Name'<span>(required)</span>
<input'type="email"'
name="email5address"'required'
aria5required="true">
</label>

29.
input[required]'{border:'1px'
dashed'#f00;}'
or
input:required'{border:'1px'
dashed'#f00;}

30.
Validate Immediately

31.
Use Placeholders

32.
<label>
Email'Address
<input'type="email"'name="email5
address"'placeholder='
"name@domain.com">
</label>

33.
Line Height (Leading)

34.
p'{'line5height:'1;'}

35.
p'{'line5height:'2;'}

36.
p'{'line5height:'1.4;'}

37.
p'{'line5height:'1.3'}
@media'only'screen'and'(min5
width:'30em)'{
''''p'{'line5height:'1.4'}
}
@media'only'screen'and'(min5
width:'60em)'{
''''p'{'line5height:'1.5'}
}

38.
Vertical Margins

39.
p'{
''''line5height:'1.5;
''''margin5top:'1.5em;
''''margin5bottom:'1.5em;
}

40.
Line Length (Measure)

41.
45-75 Characters

42.
65
58
65
73
68
67
66
74
72
69
69

43.
<p>These'stories'are'true.'Although'I'have'
left'<span'class="testing">the'strict'line
of'historical</span>'truth'in'many'places,'
the'animals'in'this'book'were'all'real'
characters.</p>
.testing'{'color:'red;'}

44.
<p>These'stories'are'true.'Although'I'have'
left'<span'class="testing">the'strict'line
of'historical</span>'truth'in'many'places,'
the'animals'in'this'book'were'all'real'
characters.</p>
.testing'{'color:'red;'}

45.
http://codepen.io/chriscoyier/pen/atebf

46.
Plain Language

47.
Source: Canadian Literacy and Learning Network
42% of Canadian adults
between 16-65 have low
literacy skills.

48.
If you can't explain it simply,
you don't understand it well
enough.
- possibly Albert Einstein

49.
Before:
When the process of freeing a vehicle that has
been stuck results in ruts or holes, the operator
will fill the rut or hole created by such activity
before removing the vehicle from the immediate
area.
After:
If you make a hole while freeing a stuck vehicle,
you must fill the hole before you drive away.

50.
Page Structure

51.
Get rid of half the words
on each page, then get rid
of half of what’s left.
- Steve Krug

52.
Top Level Heading
Second Level Heading
Third Level Heading

53.
Credit: Rosenfeld Media via Creative Commons

54.
Search Results

55.
Colour Blindness

56.
Normal Deuteranope
Protanope Tritanope

57.
Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX

58.
Credit: Rosenfeld Media via Creative Commons

59.
Print It

60.
7/7/2015 Traybaked Keralan fish curry | Jamie Oliver | Food | Jamie Oliver (UK)
Toogle menu Right Menu
Home
Recipes >
Shop
Restaurants
Videos
Discover >
-- Features
-- Galleries
-- News
Foundation
Careers
Help & More
Advertise With Us
< Back
Recipes home
Chicken
Beef
Pasta
Seafood
Rice
Fish
Lamb
Pork
Game
Duck
Vegetables
Chocolate
Bread
Cheese
Eggs
Fruit
Turkey
< Back
Recipes
Videos

61.
<link'rel="stylesheet"'href="styles.css">
<link'rel="stylesheet"'href="printstyles.css"'
media="print">

62.
Make It Responsive

63.
Links

64.
<a'
href="mailto:test@example.com">
test@example.com</a>

65.
<a'href="tel:15877522555266">
15877'CALL'BMO'(22555266)</a>

66.
Tap Targets

67.
Photo credit:Toshiyuki IMAI via Creative Commons

68.
Photo credit: Japanexperterna via Creative Commons

69.
Testing

70.
Photo credit: Robert S. Donovan via Creative Commons

71.
Performance

72.
Photo: Bortzmeyer via Creative Commons

73.
Source: CNN

74.
<script'type="text/javascript"'defer>
''''...
</script>
<script'async'src="example.js">
''''...
</script>

75.
Photo credit: Kaz K via Creative Commons

76.
https://developers.google.com/speed/pagespeed/

77.
http://yslow.org/

78.
Not Everything
Should Be Easy

79.
Photo credit: GotCredit.com
via Creative Commons

80.
Clarissa Peterson
clarissapeterson.com
@clarissa