Photo credit: Jeremy Brooks via Creative Commons
Making the Web
@clarissa
Photo credit:The Adventures of Kristin & Adam via Creative Commons
Photo credit: Simone Bosotti via Creative Commons
Photo credit: Jeff Turner via Creative Commons
Photo credit: Paul Swansen via Creative Commons
Photo credit:Aaron Fulkerson via Creative Commons
Photo credit:Thomas Link via Creative Commons
https://twitter.com/halvorson/status/686569663761891328
What Is This Website?
The One Piece of
Information
Don't Hide Things
Splash Screens?
Almost Never
No
Start Here
Form Fields
<input'type="text"'name="username">
Text
<input'type="date"'name="birthday">
Date
<input'type="time"'name="start5time">
Time
<input'type="email"'name="email5address">
Email
<input'type="url"'name="website">
URL
<input'type="number"'name="amount">
Number
<input'type="tel"'name="phone5number">
Telephone
Define What's Needed
Show Password
Avoid Drop-downs
For Short Lists
Ask For Less
Show Which Fields
Are Required
<label>
First'Name'<span>(required)</span>
<input'type="email"'
name="email5address"'required'
aria5required="true">
</label>
input[required]'{border:'1px'
dashed'#f00;}'
or
input:required'{border:'1px'
dashed'#f00;}
Validate Immediately
Use Placeholders
<label>
Email'Address
<input'type="email"'name="email5
address"'placeholder='
"name@domain.com">
</label>
Line Height (Leading)
p'{'line5height:'1;'}
p'{'line5height:'2;'}
p'{'line5height:'1.4;'}
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'}
}
Vertical Margins
p'{
''''line5height:'1.5;
''''margin5top:'1.5em;
''''margin5bottom:'1.5em;
}
Line Length (Measure)
45-75 Characters
65
58
65
73
68
67
66
74
72
69
69
<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;'}
<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;'}
http://codepen.io/chriscoyier/pen/atebf
Plain Language
Source: Canadian Literacy and Learning Network
42% of Canadian adults
between 16-65 have low
literacy skills.
If you can't explain it simply,
you don't understand it well
enough.
- possibly Albert Einstein
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.
Page Structure
Get rid of half the words
on each page, then get rid
of half of what’s left.
- Steve Krug
Top Level Heading
Second Level Heading
Third Level Heading
Credit: Rosenfeld Media via Creative Commons
Search Results
Colour Blindness
Normal Deuteranope
Protanope Tritanope
Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX
Credit: Rosenfeld Media via Creative Commons
Print It
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
<link'rel="stylesheet"'href="styles.css">
<link'rel="stylesheet"'href="printstyles.css"'
media="print">
Make It Responsive
Links
<a'
href="mailto:test@example.com">
test@example.com</a>
<a'href="tel:15877522555266">
15877'CALL'BMO'(22555266)</a>
Tap Targets
Photo credit:Toshiyuki IMAI via Creative Commons
Photo credit: Japanexperterna via Creative Commons
Testing
Photo credit: Robert S. Donovan via Creative Commons
Performance
Photo: Bortzmeyer via Creative Commons
Source: CNN
<script'type="text/javascript"'defer>
''''...
</script>
<script'async'src="example.js">
''''...
</script>
Photo credit: Kaz K via Creative Commons
https://developers.google.com/speed/pagespeed/
http://yslow.org/
Not Everything
Should Be Easy
Photo credit: GotCredit.com
via Creative Commons
Clarissa Peterson
clarissapeterson.com
@clarissa

Making the Web Easy