KEMBAR78
Writing for the Modern Web | PDF
for the
Writing
David Lee King | Rebecca Blakiston | Elaine Meyer
flic.kr/p/aHV47t
Web
Content
images
videos
words
$$$
Content
images
videos
words
$$$
awesome!
Content
images
videos
words
$$$
Respons-ibility
so let’s
improve
our words
the
Problem(s)
#1we’re not
writers
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.
8 seconds
to grab a
reader’s
attention
#2
People
Product
Process
the
People
know your customers
know your customers
Have a focus
flic.kr/p/eo52B3
know your staff, too
the
Product
words are a product
focus

on the 

right things
flic.kr/p/5qtj4r
the
Process
titles!
flic.kr/p/o6B7TP
wikipedia
use

imagesflic.kr/p/rrtaDX
know speling errores
re-use

content
website
Facebook
Twitter
where to
start?
have fun!
flic.kr/p/qfMsoQ
Elaine	Meyer	
www.mcls.org		
uxlibrarian@gmail.com	
www.uxlibrarian.com
Writing for the
web
Internet	
Librarian
October	27,	2015
Monterey,	California
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-scan-
instead-reading/
How do people read online?
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.	
They	don’t!
Less is more
Less	content	
• is	easier	to	manage	
• is	more	user-friendly	
• costs	less	to	create
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?
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!
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
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”.
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
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’.
Alert users of outside content
Microsoft	
	Excel
Adobe	
PDF
Open	in	a		
new	window
PowerPoint
Microsoft		
Word
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
Red/green color blindness
Don’t	use	color	as	the	only	
indication	of	what	to	do!
Use	labels	
instead:
AVOID USING ALL CAPS
Caps	are:	
• 		Difficult	to	read	
• 		Portray	shouting	
• 		Relay	urgency	
This	includes	navigation	
items	like	menus,	footer,	
buttons,	etc
Left-align text
Instead	of	this:
Try	this:
Images – text equivalents
Non-text	items	include:	
• Images	
• Image	buttons	
• Charts/graphs	
• Audio	files	
• Multimedia	files	that	include	both	audio	and	
video
Text	information	MUST	be	provided	for	web	content	
that	is	not	textual.
Images – text equivalents
<alt>	attribute:	every	image	must	have	valid	‘alt’	text
alt="Find	it	for	
FREE”
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=	“Gale	LegalForms	-	Find	it	for	
FREE”
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)
User assistance (help!)
Kent	District	
Library
Wayne	State	University	
Libraries
Purdue	University	Libraries
Indianapolis	Public	
Library
Go back and check your work
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?
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).
Writing for the Modern Web

Writing for the Modern Web