Upload
clarissa-peterson
View
20.708
Download
0
Embed Size (px)
Citation preview
Photo credit: Jeremy Brooks via Creative Commons
Making the Web@clarissa
Photo credit: The Adventures of Kristin & Adam via Creative Commons
Photo credit: Aaron Fulkerson 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">
<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-downsFor 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="email5address"'placeholder='"[email protected]">
</label>
Line Height (Leading)
p'{'line5height:'1;'}
p'{'line5height:'2;'}
p'{'line5height:'1.4;'}
p'{'line5height:'1.3'}
@media'only'screen'and'(min5width:'30em)'{''''p'{'line5height:'1.4'}}
@media'only'screen'and'(min5width:'60em)'{''''p'{'line5height:'1.5'}}
Vertical Margins
p'{''''line5height:'1.5;''''margin5top:'1.5em;''''margin5bottom:'1.5em;}
Line Length (Measure)
45-75 Characters
65586573686766
74726969
<p>These'stories'are'true.'Although'I'have'left'<span'class="testing">the'strict'lineof'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'lineof'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 HeadingSecond Level Heading
Third Level Heading
Credit: Rosenfeld Media via Creative Commons
Search Results
Colour Blindness
Normal Deuteranope
Protanope Tritanope
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
HomeRecipes >ShopRestaurantsVideosDiscover >
-- Features-- Galleries-- News
FoundationCareersHelp & MoreAdvertise With Us
< BackRecipes homeChickenBeefPastaSeafoodRiceFishLambPorkGameDuckVegetablesChocolateBreadCheeseEggsFruitTurkey
< BackRecipesVideosTipsBlogs
Search for recipes Search
Quick Links
RestaurantsShopFoundation
<link'rel="stylesheet"'href="styles.css">
<link'rel="stylesheet"'href="printstyles.css"'media="print">
Make It Responsive
Links
<a'href="mailto:[email protected]">[email protected]</a>
<a'href="tel:15877522555266">15877'CALL'BMO'(22555266)</a>
Tap Targets
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>
https://developers.google.com/speed/pagespeed/
Not EverythingShould Be Easy
Photo credit: GotCredit.com via Creative Commons
Clarissa Petersonclarissapeterson.com
@clarissa