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-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='"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'(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: 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

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: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 EverythingShould Be Easy

Photo credit: GotCredit.com via Creative Commons

Clarissa Petersonclarissapeterson.com

@clarissa