Style Guide
Last updated 9/2/15
Table of Contents
Protect your site from looking unprofessional
Graphics for the Web
Writing for the Web
Staff Directory
Accessibility
Prioritizing what goes on the front page
Protect
your site from looking unprofessional
- The more fonts, the more font styles and sizes,
and the more colors, the less professional your site will look. Don’t add to the clutter.
While it might be “fun” to add more fonts and colors, every time
you do that you are making your site look like it was done by an
amateur. Why pay for a
professionally-designed site, only to plunk down poor design elements?
Further reading:
- Avoid clip art like the plague. The vast
majority of it is tacky and, worse, it conveys no additional meaning or
additional value. It simply takes
up space and bandwidth. If you feel
you must add something, either use the artwork provided to you by
OPLIN or, better yet, use a photograph. Most of the clip art sources that are
freely available on education-related websites and via Microsoft
products should not be used on professional websites, or to represent
community organizations. Remember what Laura says in training: "Do you
REALLY want your library represented by the same clip art a third
grader uses?"
Further reading:
- Use any graphic elements very sparingly,
especially on the home page. If
the image conveys no additional meaning or value than the text, it’s
wasting precious real estate and annoying users in the form of
additional download time. Every time you add a graphic to your site,
you're adding (possibly significant) download time, especially for
today's mobile users. Don't give your visitors excuses to leave
your site. Too many graphics, slowing down the site, are major ones.
Graphics are almost always design elements, not content that
you're providing to visitors. Too many design elements are distracting
and take away from the main foci of your site. For each graphic, ask
yourself: "Does this add or distractfrom the real message of this item?"
- Color matters. If your library is
including graphics and/or has a rotating banner, remember that you don’t
want graphic elements that totally clash with the existing design of your
site. Be very, very cautious
when introducing strong colors into your graphic elements. If your library is creating its own graphics, it
may have experienced the common problem
of choosing colors. While it might seem simple,
in reality choosing complementary colors
can be overwhelming. With often more than
200 million shades to choose from, where
does one begin?
It’s important to start by thinking about basic
color theory. Colors have meanings for most
people. Most of us can relate to at least the
basics; chances are good that no one would
create a graphic with a black background for
a preschool storytime about teddy bears.
But, is black ever appropriate as a background
color on the web? What about red?
Is blue the only “calming” color? The answers,
as with many things online, is “it depends.”
For a quick primer on color theory, I
recommend visiting A Look Into Color Theory
for Web Design, which is an easy read for
non-designers and includes a lot of great visual
examples.
Once you have a firm handle on the meanings
of the various colors, you’re ready to
start thinking about which ones to use. Let’s
say that you’ve decided that sunny yellow is
the ideal background for that teddy bear storytime
graphic. What colors go with your yellow,
that won’t look wrong and might be good
for something like text? At this point, there
are many good online tools to help you pick
complementary colors for your design. Here
are two to get you started:
• Adobe Kuler• Color Scheme Designer
- Stop adding vendor widgets and logos to the
sidebars. As of 2013, OPLIN is no longer even recommending
a three-column layout, based on current usability data about how users
perceive side icons. Weed down your
site’s sideblocks to the tasks that your users really come to
do…not what your reference staff wants them to do. For many OPLIN Dynamic Website
- s, OPLIN has been asked to
add vendor-provided logos and
widgets, as well as icons and other
items for sidebars. For some time,
we have worked to actively discourage
libraries from adding
many of these. While some may
think it’s merely a matter of uncluttered
design, there’s a much more
powerful argument for avoiding
these: banner blindness.
Banner blindness means that users
never look at any item that
looks anything like an advertisement,
due to either
its shape or position on the page.
This applies to logos and icons
positioned on the sides of websites—which
is typical placement
for many banner ads on the Web.
Guess what many of those logos
and widgets look like, to your library’s
end users?
Further reading:
Graphics
for the Web
- One of the biggest bottlenecks in downloading a
website is the size of the graphics. You probably already know to
make your pictures as small on
the screen as possible. After
all, those pictures you took
with your library’s digital camera
are absolutely huge, right?
You wouldn’t want to inflict
added download time on unsuspecting
website visitors.
No doubt you’ve been using
some kind of software to make
your pictures visually smaller.
But this is only half of the job .
Reducing the file size of your
images makes web pages load
faster. If you take a look at the
picture to the lower right, you
can see that there is no discernable
difference in the visual
size of the pictures. Nonetheless,
the optimized version
is significantly smaller.
Resizing your pictures so they are
visually smaller is one thing—but
that’s not the only thing you need to
do.
An image optimizing tool removes
unnecessary pixels
from digital images. The human
eye doesn’t notice the
difference, but this type of tool
can significantly reduce the
amount of time it takes for an
image to download from your
site.
Many professional-end image
editors (e.g., Photoshop, Paint
Shop Pro) have built-in functions
or add-ons that can do
this type of reformatting. However,
most people don’t own
these and they have a very
steep learning curve. Fortunately,
there is now a free and
simple online tool called Web
Resizer .
Web Resizer can easily take
your images and both resize
and optimize them. In addition,
you can add borders,
round corners and more.
You can also rotate it or even
convert it to a black-and white
picture.
It’s a great all-in-one stop for
getting your photos ready for
your Webkit site.
Further reading:
- Don’t steal images from other sites. Ever. Just because an image is
online, doesn’t mean there are no intellectual property rights
involved. Fines and lawsuits for
illegal use can become very expensive and reflect badly on the thieving
organization.
Further reading:
- Be picky about the images you choose. Graphics that are purely decorative and have no real content are
often ignored.
Further reading:
Writing
for the Web
- Remember, the most anyone will read on
the front page of your library’s website is 20%—and that includes the name of your library and
the navigation! Use the least
amount of words possible on the front page. Use teasers to show just the first bit
of the text. If visitors want
more information, they’ll click the “Read more” link.
Further reading:
- Writing for the Web is different than writing
for print. You may have heard that
readers don’t read, when it
comes to the web. It’s true.
People scan, they rarely stop
to read large chunks of text,
especially on a homepage. It’s
imperative that you capture
their attention with writing that
is geared for this common
behavior.
- Use scannable keywords.
This includes
using italics and bold
(sparingly!) and, of course,
hyperlinks are easily
scannable as well.
Use meaningful subheadings.
Not “clever”
ones, however. Make
them clear and to the
point.
- Bulleted lists. They’re
popular for a reason; they
are easy to scan and
break information down
into manageable chunks.
Writing copy for websites is a
completely different skill than
writing for print. Get some tips to
make your text more appealing.One idea per paragraph.
Studies have found that
users typically skip over
any additional ideas if they
are not caught by the first
few words of the paragraph.
- Use the inverted
pyramid style of writing.
This means starting with
the conclusion & working
backwards. People want
to know, up front, what
they’re going to get out of
what you’re writing about.
- Halve the word count.
Take your first draft and
take out half. Narrow it
down to the absolute nitty gritty. When you master writing text
for the web, you will be doing
two important things:
1. You’ll be increasing the
credibility of your site.
These techniques are
used by professional
writers. Borrow them to
make your library site
more appealing and
professional.
2. You’ll be making your
site more usable. If
your site scans more
easily, people don’t get
frustrated or turned off.
Further reading:
- Get rid of the exclamation points. All of them. I know, you think it doesn’t
matter. It’s just so easy to use
an exclamation point. And, of
course, so many things your
library is doing are so exciting,
so they must warrant an exclamation
point, right?
No, they don’t. Let me be as
clear as possible about this:
exclamations will always hurt
your image more than they will
help. Here’s why:
First, by its very nature, an
item tagged with an exclamation
point will downgrade everything
else around it. That’s
what an exclamation point
does: it says “this is the most
important thing, ignore the
other things.” By
default, it tells the reader that
it is most important. This is the
feature that, I understand, libraries
enjoy about the exclamation
point’s use. However, I
suspect most users of this
mark don’t intend to make everything
else insignificant. Yet,
that’s what it does.
Second, and more importantly,
professional writing does not
use exclamation points. Go
look at newspapers. Murders
and wars are exciting stuff,
sure. Yet, newspapers do not
end all of their potentiallyexciting
headlines with exclamation
points. It isn’t done.
I always tell libraries: “If your
library wins a really big levy,
you can use ONE exclamation
point on your website. That’s
it.” Say thank you to your
voters with one exclamation
point. They’re valuable, after
all. Otherwise, make a point
(pun intentional) of staying
away from them entirely. It
might be a little more work,
but the boost of the image of
your library’s website is well worth
it.
Further reading:
- Don’t literally welcome people to your website. Typically,
when we see “Welcome to our library’s website,” we know we’re looking at a
library that doesn’t know how to best utilize their front space. Don’t waste prime real estate on the
obvious or useless fluff. The temptation is overwhelming. After all,
libraries are friendly places. We wouldn’t
want our patrons to think they weren’t welcome.
It’s so nice and friendly to put a big
“Welcome to our library website!” heading at
the top of the front page, right?
Sorry...no.
Remember, every square inch of your library’s
website is extremely valuable. Your
library uses tax dollars to pay for it. It costs
staff time (still resulting in spent tax dollars) to
maintain it. In many cases, a patron will see
your website before they ever see (and sometimes,
instead of seeing) your building. Because
that front page area is so critical, it’s
essential that your library use it wisely.
That space on the front page, above the fold,
is your library’s equivalent to “Boardwalk” in
the game of Monopoly. It’s the single most
valuable space on your website. This is
where the most important announcements
made by your library should go.
We recommend using that
space for promoting library programs that you
really want to rustle up an audience for. Levy
information. Weather closings. Etcetera.
That space is intended for things the library
wants to promote that are truly noteworthy.
Here’s the thing: if people weren’t welcome
on your library’s website, you would have
password-protected it, right? People are inherently
welcome to your library’s site. They
don’t need a literal, text-based welcome mat.
Further reading:
- Stop using all-caps. No excuses. Long a Netiquette convention on the Web, there simply is no reason
to use all-caps on your site. People make assumptions about
content that appears in all capital
letters. Most often, all-caps text
indicates the act of yelling. Do you
really mean to be yelling at your
patrons? Probably not, so this is
definitely not something that should
appear on your library's website.
Perhaps, worse still, people may
assume that you’re not technology savvy,
since all-caps indicates
screaming and is almost never
used on the Web in other situations.
Time to go get rid of those all caps.
Further reading: - Make sure any lists are annotated and link
(whenever possible) directly to the site or catalog entry. Don’t
just list website links without including relevant text about why they’re
being recommended. If you’re
creating lists of books, include a synopsis and a direct link to it in
your library’s catalog. Don’t frustrate
your users by providing lists that are essentially useless and have no
value. Libraries are often major producers of lists.
Reading lists, reference source lists, and
many more. However, once a library starts
putting lists on the Web, the format needs to
change...and, often, the library fails to acknowledge
the advantages available by putting
a list online.
For example: many libraries include lists of
recommended links for users. Many times,
that’s all those lists are: links. There’s not
always a description that explains what the
site is or why someone would want to use it.
The same issue can often occur with lists of
library services. If your library’s site says that
your library has a meeting room, then the
meeting room policy and any other related
information should be linked and immediately
apparent.
What about reading lists? These can include
not only a summary of the book, but a direct
link to the book’s listing in your library’s online
catalog. The goal is to make getting more
information about the thing you’re recommending
as easy as possible for the end
user. If you force your users to search for
more, they probably won’t. They’ll just
leave, instead
- Telling people to “click here” is bad usability. It’s a
holdover from the (very) early days of the Web, when people really didn’t
know what an underlined word or phrase meant. Using “click here” as link
text hurts your site’s usability.
People know how to click a link now. Instead of “Click here for more
bestsellers,” say “More bestsellers.”
It’s already a link. The use of "click here" is a holdover from the (very)
early days of the Web, when
people really didn’t know what
an underlined word or phrase
meant. Using “click here” as
link text hurts your site’s usability.
People scan websites, they don’t
read. If you’re lucky, people will
read up to 28% of the text on your
website. That’s the best case
scenario. People are looking for
quickly identifiable key words that
will help them accomplish whatever
it takes to fulfill their need.
People no longer need to be
told how to retrieve something
using a simply hyperlink; it also is
harder to scan, since what the link
does is not as easy to discern as it
is in the second example.
Do your online visitors a favor and
make your links easy to scan. Use
action verbs and the active voice,
as well as being specific about
what gain will be gotten from clicking
the link.
Further reading: - Underlining on the Web: never.
Never. Never. Underlining is purely for hyperlinks. Period.
No exceptions. It’s important to always remember that
the Web is a completely different medium
than print, and the answer to this question
illustrates this point well. This question usually
comes up because library staff are unsure of how to
handle book titles. In print, book titles are usually
underlined. However, on on the Web, underlining is
never (and this is an absolute, sorry, no exceptions)
supposed to be used except to denote a hyperlink.
So, what to do?
Online, book titles are usually italicized,
while magazine articles/essays/et al are put
in quotes.
So, this also explains why there is no underline
function in the Webkit editor. You’ll
never need it. When you create a link with
the editor, it automatically includes the underlining.
- Ever wonder if your content is easy to read? Now, there’s an online tool to help you figure
out if your content is appropriate for your audience. The Readability Test
Tool (http://www.read-able.com/ )
is free to use, and it can be used to test all or part of a given web page.
Staff
directory
- Usability experts agree: listing your organization’s staff is
critical for credibility. Include pictures, at least of the
administrative team. “It's long
been a guideline for presenting a company's image online to include
portraits of the executive team so that users associate real people with
an otherwise faceless corporation. “—Jakob Nielsen, usability expert. Yes, this also applies to libraries. For many OPLIN Dynamic Website
Kits, we’ve often included a page
under “About Us,” called “Staff
Directory.” We feel that it’s a critical
part of establishing credibility
for a library website, and many
usability experts would agree.
Listing your staff (at the very least
the administrators and department
heads) provides not only useful
information and increases the
credibility of a site, but it gives
visitors a more humanized interface.
Knowing who the library staff
is gives your visitors a feeling of
connectedness to their local library.
We encourage your library
to go beyond just a listing, and
take Jakob Nielsen’s advice—
provide photos as well. “People
photos=good,” he says. Visitors
want to see the people behind the
site and their library
Further reading:
Accessibility
(especially for the blind and visually impaired)
- One of the simplest things you can do to increase
the accessibility of your library’s website is to remember to fill in the
ALT tags for each image. And, as
soon as you forget ONE of these, your standards compliance for federal
Section 508 and the Worldwide Accessibility Initiative is completely gone. Check these. When you first got your shiny new
Web Kit from OPLIN, you might
recall that some of the documents
that came with it were printouts of
Section 508 and WAI validations:
tests that were run against your
library’s site to ensure that it met
the basic requirements to be accessible
to those visitors using
voice-reading software to access
your site.
You may also remember that one
of the things you learned to do
during training was to upload an
image directly into your stories and
posts. At the time, mention was
likely made of the “Alternative text”
field, and how it wasn’t mandatory,
but should be. We’d still like you
to think of it that way.
Without some kind of specified
alternative text for your images,
voice readers are at a loss to give
any information to blind or visually
impaired visitors. They are left to
guess what that image might be or
be saying; the voice reader will
only tell them it’s an image. They’ll
get no other information to help
them understand the context of
what they are viewing.
Keep your site accessible—make it
a habit to always put something in
the “Alternative text” field when
you upload or use a picture of any
kind.
Further reading:
Prioritizing what appears on the front page
Why
should you keep the content on your front page clear, succinct and
minimal? Here’s some comments from
real-life web professionals and even librarians:
·
“It's equivalent
to a library putting their entire building's contents in the front lobby. Not
needed if site is well organized.”—Glen Horton, digital services manager
·
“Prioritize:
What really needs to be there, and what needs to be one click from there?”—Don
Yarman, deputy director
·
“It is a
constant struggle even after you have a live, pared-down site. Every new thing
folks want on the front page.”—Owen Leonard, web developer
·
“Usability
testing is a good start. Test both ‘bad’ and well balanced sites and watch the
"ah ha" moments roll in.”—Kelly Minars, web services librarian
·
“[Only put
everything on the front page] when [you] shelve the entire book collection face-out
in one big row.”--Hugh Rundle, Information Management & Kew Librarian
·
“It's sad that
they don't look at research about usability & design. I'm assuming they are
librarians.”—Susie, via Twitter