Writing for the Modern Web

If you like this presentation – show it...

Slide 0

flic.kr/p/aHV47t Writing for the Web David Lee King | Rebecca Blakiston | Elaine Meyer

Slide 1

t n e t n o C $ $ $ images videos words

Slide 2

t n awe nte so m Co e ! $ $ $ images videos words

Slide 3

Resp ent t onsn o ibCli i ty $ images videos words $ $

Slide 4

so let’s improve our words

Slide 5

the Problem(s)

Slide 6

#1 we’re not writers

Slide 7

General Reference Center:
 A general interest database that integrates a variety of sources in one easy-to-use interface. Use General Reference Center to find articles from magazines, reference books, and newspapers, many with full-text and images.

Slide 8

28 seconds # to grab a reader’s attention

Slide 9

People Product Process

Slide 10

the People

Slide 11

know your customers

Slide 12

know your customers

Slide 13

flic.kr/p/eo52B3 Have a focus

Slide 14

know your staff, too

Slide 15

the Product

Slide 16

words are a product

Slide 17

flic.kr/p/5qtj4r focus
 on the 
 right things

Slide 18

the Process

Slide 19

flic.kr/p/o6B7TP titles!

Slide 20

Slide 21

Slide 22


Slide 23

flic.kr/p/rrtaDX use

Slide 24

know speling errores

Slide 25

e it s b e w re-use
 Facebook content r te it w T

Slide 26

where to start?

Slide 27

flic.kr/p/qfMsoQ have fun!

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Writing for the web Elaine Meyer www.mcls.org uxlibrarian@gmail.com www.uxlibrarian.com Internet Librarian October 27, 2015 Monterey, California

Slide 52

Why is writing for the web different? Reading from a computer screen is: • tiring to your eyes • 25% slower than print reading. People are less likely to read long pieces of text online then in print. Jakob Nielsen: http://www.nngroup.com/articles/why-web-users-scaninstead-reading/

Slide 53

How do people read online? They don’t! Instead, they: • skim, scan and select • browse before diving in • read a little at a time, mostly in short bursts • grab what they need and get onto their goal.

Slide 54

Less is more Less content • is easier to manage • is more user-friendly • costs less to create

Slide 55

Planning your web content Web content is useless unless it supports: 1. A key business objective such as: • Promotes events & training classes • Encourages citizens to become patrons 2. Users in completing a task • Search catalog for an item • Find a study room • Library hours/directions • How long can I keep my book?

Slide 56

Questions before writing Before you write anything, ask yourself: • Why am I creating this page? • Who am I talking to? • What is my main message? • Does the user need it? • What do I want the user to do after reading it? Every page must have a clear purpose!

Slide 57

Content accessibility Content is truly accessible only if it can be used by people with disabilities. Patrons with disabilities must be able to use everything: • Links • Buttons • Form controls • Images • Etc

Slide 58

Use descriptive link text Not descriptive: To complete the online Reserve Form, click here. Descriptive: Complete the online Reserve Form. Never use “Click here” to describe a link • “Click here” is not descriptive for screen readers • Links are given extra weight by search engine spiders, so avoid “Click here”.

Slide 59

Human readable URLs Not descriptive: http://www.michigan.gov/libraryofmichigan/ 0,2351,7-160-50206_18637_18649-2090--,00.html Descriptive: http://www.michigan.gov/libraryofmichigan/ accessibility_policy

Slide 60

Button labels • Keep button labels short and action oriented. • Avoid ‘Go’ or ‘OK’ as button labels. Instead, use the appropriate verb or phrase, such as ‘Submit’ or ‘Give feedback’.

Slide 61

Alert users of outside content Adobe PDF Microsoft Word Microsoft Excel PowerPoint Open in a new window

Slide 62

Contrast Color picker tool: ColorZilla for Firefox Color Contrast Checker: WebAIM http://webaim.org/resources/ contrastchecker/ Both size texts failed the contrast checker for the search button

Slide 63

Red/green color blindness Use labels instead: Don’t use color as the only indication of what to do!

Slide 64

AVOID USING ALL CAPS Caps are: • Difficult to read • Portray shouting • Relay urgency This includes navigation items like menus, footer, buttons, etc

Slide 65

Left-align text Instead of this: Try this:

Slide 66

Images – text equivalents Text information MUST be provided for web content that is not textual. Non-text items include: • Images • Image buttons • Charts/graphs • Audio files • Multimedia files that include both audio and video

Slide 67

Images – text equivalents <alt> attribute: every image must have valid ‘alt’ text Why use the “alt” attribute (commonly known as “alt text”)? • Provides text equivalent for blind users • Indexed by search engines • Can add additional information for the user alt="Find it for FREE” alt= “Gale LegalForms - Find it for FREE”

Slide 68

Images that don’t convey information What type of images don’t convey information? • Spacer images • Design images • Background images Use null alt text: alt=““ (alt=quote quote with no space in between)

Slide 69

User assistance (help!) Indianapolis Public Library Wayne State University Libraries Kent District Library Purdue University Libraries

Slide 70

Go back and check your work Check your work: • before you publish your stuff • after you see it online • again next week (the article will be different the next time you look). Keep asking yourself: • Is this clear? • Is there a simpler way to say this? • Is there a shorter way to say this? • Is this even necessary?

Slide 71

Slide 72