Website
design tips

I
make my living from websites -- at first
designing for others, and now running my own sites. Over
the
years I've compiled my best tips on web design, and I'm sharing
them
with you here. This is important because it's all too easy
to
create pages that frustrate your visitors even though that's not
what
you intended at all. And visitors who are annoyed are
likely to
click off of it quickly without seeing what you have to offer.

Fortunately, the most common website
mistakes are very easy to prevent or fix. My big
list of
website design tips below will help you do just that.

(Gray letter-number codes for each tip
are for the benefit of college professors, who requested an
easy way to
refer to each tip in their assignments.)

Provide compelling content /
something of value

C1. Make
sure each page in your website has something valuable
to offer.

Though this doesn't really relate to design, it's
actually more important than design, which is why it's the very
first
tip. I know that many people reading this page are
trying to
find out how to make useless pages look pretty, because they think
that
style is all that really matters. So let's step back a
minute and
realize that fundamentally a web page exists to provide something
that's useful or interesting to visitors. If
your
page doesn't have that, then you must fix that problem before
you worry about how to present it. If you throw mud at a
canvas,
then even if it's in a gold frame, it's still just a canvas of
mud. What are you offering to your visitors? Why is it
worth their time to visit your site? Please focus on that
before
you move on to how it should look.

If your plan is to make money from advertising, then go
for a ratio of not less than 75% editorial to 25% advertising.
Amazingly,
I see some sites that are almost nothing but ads. We
know that no one would turn on the TV if it were just
commercials, and
no programs, or buy a magazine if it were just ads, and no
articles. By the same token, a website also has to have
more than
ads if it's to be successful.

Avoid Sleazy Elements

Animation and sounds are distracting.
How can anyone concentrate on reading what's on your site when
there
are things flying around the page? It's like trying to read
a
newspaper when someone's poking you in the shoulder
repeatedly.
Also, visitors who have slow connections may resent that you
wasted
their time by forcing them to load animations and sound files
against
their will. (If you think that every has fast connections
these
days, think of the thousands of people at hotels, who are all
sharing
the same connection.)

Conventional wisdom is that people will be drawn to
an animated ad, but it's actually the opposite:
Readers who
are
assaulted by blinking ads are more likely to leave the site
immediately
without clicking on anything,
and are far less likely to
bookmark the site, return to it, link to it, and recommend
it.
The results don't lie: When I switched the ads on a friend's site
from
animated to
static, click-through didn't suffer at all. (That site pulls in
nearly
$500,000 in yearly advertising revenue, by the way.) I make
my
living from ads on my sites, and I won't run animated ads on
them. I prefer to give my readers a good experience, rather
than
an annoying one.

Let's talk scrolling text. Besides the fact
that it's annoying, there's another problem: the reader
can't read it at their own pace. They're forced to read it
at
whatever speed you deliver it. They might have preferred
to read
those two sentences quickly and then move on, but because it's
scrolling they're forced to sit there and wait for the text to
slowly
appear.

This brings up an important point:Always
keep your visitors' interests in mind.Make
sure
you try to please them, not yourself. Scrolling text does
nothing to serve the visitor. If it's on a site it's
because the
site owner thought, "Let me show how cool I am." Do
you
see the difference? Don't design the site for yourself,
design it
for the people who will actually use it.

Z2. Don't
annoy your visitors with pop-up windows.

Nobody likes popups. Here again, the
only reason a site would have popups is because the site owner is
thinking of his/her own interests rather than the readers.
We all
know that when we're browsing we hate popups, but suddenly when we
switch hats and become the site owner, we lose our ability to see
through the users' eyes. So let's remember to put ourselves
in
their shoes. Which of these reactions to popups is a visitor is
more
likely to have?

(a) "A popup window, oh goody! I love
sites with popups! I will make certain to bookmark this
site and
visit often. I will also certainly click the ad or links
in the
popup because I love them so much."

(b) "@#&$! Whoever made this website obviously
has no respect for me as a visitor. When I leave here I
will
never come back."

Z3. Don't
use put text over image backgrounds.

Text over image backgrounds scream "amateur",
because it's
mostly amateurish sites that use them. Quick, can you name a
single
professional, respected site that uses image backgrounds behind
the
text? Not
Google, Yahoo, eBay, Amazon, the New York Times, Webmaster World,
or
any others.

One reason that text over backgrounds scream "low
quality" is
because sites that use them are often user-hostile in many
other ways
as well. For example, when I visited a site recently
and saw
that they used an image background, I wasn't surprised to find
that the
site also has extremely slow page-loading times,
internal links
that pop up into brand-new windows, links that are the exact
same color
as the surrounding text, cheap animated GIFs, blatant keyword
stuffing,
and numerous embarrassing misspellings. [As further proof,
I had
to remove my link to that site from this article, because they
went out
of business.]

Unfortunately, just as people were finally starting to clue
in to the fact that background images behind text are cheap and
garish,
along came
MySpace to repopularize a bad idea. It's not surprising
that
MySpace is a poster child for bad design in other ways, with
obtrusive
advertising, force-loading music, distracting animations, and
super-slow-loading pages. I'm not the only one who feels
that
way. Here's how the world-famous Dan
Piraro
put it: "Badly designed, impossible
to
navigate, ugly, loud, depressing, reeking of death. How did
this beast
that is eating the fabric of our civilization and puking it up
on the
shoes of our future achieve such popularity?"

But back to image backgrounds, another problem with them
is that they take longer to load. One site I checked
had a
whopping 144k image background. Its home page takes sixteen
times
as long to load as the one you're reading now — even though it
has far
less useful information.

That said, image backgrounds are fine if you know what
you're doing. They can work if you make sure the
contrast is
very high (e.g. August
Marketing), or you don't put any text over them (e.g., Flowers
in Frames).

Make it Easy to Find Stuff

F1. Put
some thought into organization.

Think about what content you have and how it should
be organized. This is at least as important as what your
pages look like, so actually spend some time on it. You
do
your readers a disservice if they can't easily find what they're
looking for if everything is thrown up on your site in a haphazard
fashion.

F2. Minimize
clicking!

Put as few clicks between your visitor and your
information as possible. This is so important I'll
repeat it: Put as few clicks between
your visitor
and your information as possible.The
more
you force your visitors to click around your site the more likely
they'll abandon it. Even if they don't leave they might get
annoyed, or not view as much of your content -- either of which is
bad
for you.

Is your home page a splash page (a page with no meaningful
information on it, that simply "welcomes" visitors to the site,
along
with an "Enter Site" link)? If so, get rid of it.
After
someone takes the effort to visit your site, give them your
site right away! Don't make them knock on two
different doors.

A
related idea is to put meaningful amounts of information
on each page. If a page doesn't have at least 400 words,
you
probably should combine that page with another short page.
I've
seen many sites which spread info around five different pages
that
could have easily gone on one.

While you should put a lot of info on each page to
minimize clicking, don't go too far in the other direction by
putting
too much info on a page. You should normally limit a page to
no
more than two screenfuls of info. Articles (like this one)
are
exceptions, because articles are longer by nature. But even
so,
very long articles (more than about 6-7 screenfuls) should usually
be
chunked into separate pages.

F4. Include
a way to get back to the home page, on
every page.

When users get lost they like to start over from
square one. Make it easy for them to do so. Even if you're
including a
clickable logo on the top of every page, make sure to also include
text
that says something like "Home", because some users don't realize
that
logos take you back to the home page. [Example
site]

Also remember that users might not be able to hit the "Back"
button to go back to your home page, because they might have
entered
the middle of your site after clicking a link to it from a
search
engine or from some other site.

F5. Include
a menu on every page.

While you should provide a way for users to get back
to your home page quickly, you shouldn't force them to go
home
before they can go somewhere else. Include a menu on the
left or
the top of each page. [example
of menu at left][example
of
menu at top]

Don't put navigation links only at the bottom of pages,
because then users will have to scroll down to the bottom to get
to
them (unless your pages are very short). Users
clearly dislike links at the bottom of long pages.
On long pages, you'll want navigation elements on BOTH the
bottom and
the top or left, so that users who have read a lengthy page
don't have
to scroll back up to get to the menus.

F6. Don't
use frames.

You might be tempted to use frames because it makes
it easy to have the same header or menus appear throughout the
site. And usability
studies do show that users find sites
with frames "Easy to Comprehend", "Easy to Navigate", and "Easy to
Find
Info". But there are two serious downsides to frames:
First,
the address bar doesn't change as you go from page to page. That
makes it impossible for anyone to bookmark or link to a specific
page
in your site, or to share that page with a friend by emailing them
the
link. Second, when a page within your site other than the frameset
shows up in a search engine, a visitor clicking over to that page
will
see just that subpage without the surrounding frame.

There are clunky Javascript tricks that can overcome these
problems, but once you hassle with that to get your frames to
work
properly then you're defeating the purpose of using frames
because you
wanted a quick & easy solution in the first place. The
preferred
way of having the same elements on a page throughout a site is
to use
server-side includes.

Don't bog your website down

B1. Compress
your image files.

Nothing is more annoying to readers than waiting
for a 300k graphic to load when it should be only 20k instead.
Graphics software can compress files so they take up less room on
your
disk, and therefore take less time to load into your visitors'
browsers. Get some graphics software and shrink those file sizes!
GifBot
is quick and easy, and shrinks your
graphics right on a webpage. Or you can download graphics
software: Windows:HVS
GifCruncher and JPEG
Wizard. Macintosh:GraphicConverter.

And as mentioned earlier, don't bog your site down with
auto-playing sound files, either.

B2. Don't
let flashy multimedia ruin your site.

Flashy graphics and multimedia controls may look
nice, but they're bad when they make it hard for visitors to get
the
information they want from your site. Nobody wants to be
annoyed by
having to use a cumbersome Java scroller to see all the text in a
field, much less wait for all the doodads to load -- if they even
work
at all. Google "Flash sucks" and you'll see why users revile
Flash-based websites. (The exception,
of course, are sites whose content is about creative things such
as art
or music, where multimedia can be way to present the site.)

Website Readability

R1. No
line of text should be more than about 650
pixels wide.

The reason that newspapers and magazines are
printed in columns is to make the lines short, so after you read
one
line, it's easy to find the start of next one. The page
you're
reading now shows one approach to making line length manageable:
put
the text in a fixed-width table in the center of the page. Here's
an example of a bad page with no
limits on
line length, which makes the text hard to read.

You
don't have to make your pages fixed-width, though. You can
make
them fluid (they get bigger or smaller as the window is
resized), but
limit the width by using the CSS "max-width" property.
Here's an
example of a page that's fluid, but with a maximum
width. I
set my own pages to be no wider than 1200 pixels.

R2. Don't
make your page too narrow or too wide.

As of 2011, 99%
of users
have screens that are at least 1024x768 pixels. Many
designers
make their pages work at sizes as small as 770 pixels
wide so that they don't offend the less than 1% of users with
800x600
screens, but that means they're giving 99% of their users a bad
experience, because those 99% see tons of whitespace rather than
actual
page content.

On the other side, pages that go edge-to-edge are way too wide on
big
monitors like most people have these days. I suggest
limiting the
page content to 1200 pixels or less.

R3. Use
contrasting colors or simple backgrounds to
make your text easy to read.

It's hard to read light text on a light
background, or dark text on a dark background. There are
also some
color combinations that don't work. And if this tip is so obvious,
then
why did I run across this page today?

Also, it's hard to read text on background images
that have a wide mixture of light and dark; any background images
should be simple and mostly dark or mostly light. You can improve
readability of text on a background image by increasing the text
size
and/or making it bold.

You should almost never put text on an image or
textured background. Unless you really know what you're doing,
such
text is usually difficult or annoying to read -- if not
impossible.

R4. Make
the text large enough to read.

Don't yell at me for stating the obvious, because
it's not obvious to everyone: Just today a webmaster referred me
to his
site which I had to squint to read. Don't punish your visitors if
you
want them to actually read your content. With CSS rules, go for 12
or
13px Arial, and 11 or 12px Verdana.

R5. Increase
the line spacing (leading) to improve
readability.

Putting some space after
each line gives it some breathing room and makes it a lot
easier to
read. If you don't specify the leading, you don't get any
-- you
get the default of cramped lines. I set this article to 160%,
which you
can see adds some attractive space between the lines and makes
the text
appear less daunting. But I kept this particular paragraph at
the
default, so you can see how it's much less attractive and harder
to
read. Add spacing by using CSS commands. To set the leading for
a table
cell, use something like <td style="font:11px/160%
Verdana">.
For a long block of text put all the text between div's: <div
style="font:11px/160%>(long block of text)</div>.
That's enough to get you started, but to really master CSS
you'll want
to learn
how to
create CSS rules.

R6. Don't
type more than a few words in ALL CAPS.

Words that are in ALL CAPS draw attention to
themselves because they seem different from the small letters
around
them. But if you type everything in all caps, then you
completely lose the effect, since everything looks the same, so none
of it looks important. If you want to draw readers' attention to
something, make the headline stand out -- bold, bright
color,
maybe a little larger -- but keep the text that follows it normal.

R7. Never
use more than one exclamation point!

Typing several (or worse, a gazillion) exclamation
points does not make your text seem any more important than just
one.
In fact, rather than conveying urgency, what multiple exclamation
marks
really scream is "Amateurish!". Actually, what they really scream
is
"Desperate!" The writer is desperate to get the reader to believe
something. But think about it: Do exclamation marks really impress
you
when you read them? Are you more likely to believe something
because it
has a screaming mark at the end? It's probably the opposite:
You're
used to desperate marketers trying to sell you something with
their
exclamation marks, so when you see lots of them you sense that
desperation and tend to discount what they're trying to convince
you
of. So when you switch hats and you're the one giving the message,
don't let your desperation show by using lots of exclamation
marks.
Play hard to get. :)

R8. Use
a spelling checker.

Yes, people who spell poorly may not notice or care
that your site is badly misspelled, but literate people may notice
and
care, and they're in the majority.

The right and wrong way to
use links

L1. Don't
underline words if they're not links.

On the web, something that's underlined is supposed
to be a link. If you underline gratuitously, readers will be
annoyed
when they try to click those underlined words only to discover
that
they're not really links. If you want to emphasize something, use
italics
instead (or boldface, or another color).

L2. Make
links blue or underlined, or both.

Users expect links in body copy to be blue and
underlined, because that's the way they appear on 99% of other
websites.
If you use a different color then at least the underline is a clue
that
a link is a link. Likewise, if you remove the underline but keep
the
link blue, then the color is the clue that a link is a link. So
it's
best to use both blue and underlined, but using at least one or
the
other is acceptable.

What's wrong is doing neither -- having links
that aren't blue and aren't underlined. How are users
supposed to
know what's a link at that point? I ran across one page (no
longer up)
whose main link is red with no underline. To make matters worse,
elsewhere on the page they use blue text, which looks like a
link, but
which isn't. So users had no clue that the link was actually a
link,
and there was other text that looked like a link, but wasn't. (I
tried
to bring this to the attention of the site owner but he bragged
that
nobody else had ever complained.)

Links in menus don't have to be blue or underlined,
as long as they're clearly menu items. The blue/underlined tip
is for
links that are in the middle of the page.

L3. Explain
what you're linking to.

When you're able to provide more information about
what a link points to, do so. For example, if your site has
a Links
page, include a short description of each site you link to, say
1-5
sentences. That way visitors have an idea of what's on those
sites,
which will help them make their decision on whether to visit those
sites, and help them find what they're looking for, while avoiding
what
they're not looking for.

Nothing is less useful than a whole bunch of links to other
sites when those links consist of nothing more than the names of
those
sites (or worse, the urls). Without any description of what
you're
linking to, readers are forced to visit each and every site to
get an
idea of what's there. Imagine 100 of your visitors all repeating
that
same laborious surfing, needlessly. You could have told them
what's on
those sites, because you (presumably) visited those sites
yourself, so
you know what's on them. Do your readers a favor and share your
knowledge with them. [Example
site]

L4. Don't
open internal links in a new window.

The owner of a site I just ran across thinks it's
a good idea to pop up a brand new window when a visitor clicks a
link
within his site, but that only annoys users when they suddenly
have a
gazillion windows open on their screen. Opening new windows
for external
links to other sites is fine, but links within a site
should
always open in the same window. Visitors can still get around your
site
just fine when links open in the same window, because you did
include a good navigation menu at the top or the left of the page
as in
tip F1 above, right? Opening new windows means that after five
clicks
within your site, your visitor's screen is cluttered with six
different
windows.

L5. Use
descriptive link text.

The text of a link should describe what's being
linked to. You should never, ever use words like "link" or
"here"
or "click here" as the link text. Readers prefer to scan web
pages
rather than read every word, and you make that impossible if you
use
generic, non-descriptive words as the link text. Compare the
following:

Be Accessible

A1. Put
your contact info, or a link to it, on the top
and/or bottom of every page.

Don't waste your readers' time by making them hunt
around your site for how to contact you. Make your contact info
easy to
get to. Put your contact info (or a link to it), on the top of every
page. [Example]

If you're not printing your phone and/or email anywhere
because you don't have the resources to handle inquiries, then
do your
readers the courtesy of letting them know that, so they don't
spend
forever hunting in vain for contact info that doesn't exist.

Unfortunately you can't link up your email address with a
simple mailto: link, unless you want lots of spam. That's
because
spambots are good at stealing such addresses from web pages. We
have a
separate article about how to hide your email
address
from spambots.

Make sure it works, and that
it keeps working

W1. Test
your links.

Make sure your site works! Load your site in a
browser from the Internet (not from your hard disk), make
sure
all the images appear correctly, and click on all the links. This
may
seem obvious, but if it's so obvious, then why do I constantly
find
sites whose images and internal links don't work right? If you're
using
a link checker that's built in to your web editor and your site is
framed, then you can't depend on the link checker, because
it
can't check for framing problems (e.g., pages load into wrong
frames,
clicking a link results in frames within a frame, etc.). Check it
yourself.

W2. Remove
dead external links periodically.

If you link to any external sites, some of those
links will almost certainly stop working at some point as the
sites
move or become extinct. Don't waste your readers' time by forcing
them
to follow broken links. Check your links at least once every few
months. You can use software to automatically check your links to
external sites to see if any of them have gone dead. [Here's
a
link checker for Windows.]

W3. Include
a "Last Modified" date on the top or bottom
of your pages.

If your site contains information that could become
outdated, then do your visitors the courtesy of letting them know
when
the information they're reading was written. That way, visitors
won't
have to wonder whether the info was written last week or five
years
ago.

If your content by its very nature can't become outdated.
(e.g., poetry, stories, art, website design tips), then a date
isn't
absolutely essential,, but readers may still appreciate knowing
when a
page was authored anyway.

Other webmaster tips

O1. Don't
steal content.

It's not acceptable to copy and paste articles from
other sites
and place it on your own, unless you get permission from the site
owner. It's not legal to do so, either. Just because
it's
easy to do
doesn't mean it's not sleazy or against the law. Copying
content
is
also a good way to get the search engines to make your page or
site
rank a whole lot lower, too.

O2. Don't
hotlink to other sites' images or MP3's.

Any image you link to should be on your own server.
That is, your code should look like <img
src=/images/pic.gif>
and not <img
src=http://SomeOtherSite.com/images/pic.gif>.
Embedding images into your pages from other sites is called
hotlinking,
and is considered a theft of bandwidth from the other site (and
possibly a violation of copyright). It also screws up the
other
site's
visitor stats, because every time someone visits your page with a
hotlinked image, that counts a a visit to the other site, although
there was no actual visit to the other site. Hotlinking
images
can also
come back to bite you, if the webmaster of the other site changes
the
image you hotlinked to be something very offensive (like hardcore
porn,
or a message specifically insulting you).

O3. Don't
ask for "permission" to link to a site.

It's not neccesary to ask whether you can link to a
site. For what possible reason would it be? The
whole point of putting a site on the web is so people can see it,
so why would a site owner not want more people to see
it? Imagine someone writing the following letter:

Dear Mr. Lyman:

I read your book No
More Bull! and
enjoyed it immensely. I would like to recommend it to
several of my
friends, so I am writing to ask your permission to do so. I
realize
that in writing your book you did not in fact want it to
have the
widest possible audience, and that you want strict control
over who has
the authority to recommend the book to others, so I will not
mention
your book to anyone else until you tell me that it's okay to
do so.
Just a Yes or No is fine, I'm sure you don't have anything
better to do
than to respond to messages like this one.

Thank you,

A reader

Asking permission to link to a
site isn't just ridiculous, it's bothersome. If
the thousands of people who
linked to my articles had asked permission first then I'd be
drowning in an avalanche of email. Fortunately the
overwhelming majority are smart enough to simply link without
asking.

Note that simply linking to a
site is completely different from copying and pasting an
entire article, which you do need to ask
permission before doing.It's necessary
to ask before republishing because doing so without permission
(1) is illegal, (2) deprives the publisher of advertising
revenue, which is how they make the money to be able to publish
articles in the first place, (3) removes the ability of the
publisher to correct any misinformation that a reader might see,
because the pubisher can update only his/her site, not hundreds
of sites all over the Internet.

O4. Don't
ask to exchange links with other sites.

Link exchange requests are only a little less
annoying than "permission to link" requests -- and completely
useless.
Link to other sites if you think they'll be of value or interest
to
your readers -- not because the other site links back. If you want
links to your site, make your site worthy of being linked
to,
link to other worthy sites, and then ask those other sites for a link
(not a link exchange). Don't make your link to them
contingent
on whether they link back or not. If they're worth linking to,
they're
still worth linking to even if they don't link back. Here's more
on why link exchange
requests fail.

Other Resources

Site
Clinic. Jackie Baker reviews the design,
copy, usability, SEO, marketing, and technical issues for sites
that
readers submit. It's kind of like "website makeover". Good
stuff. She
probably won't be able to review your site, but you can learn
quite a
bit by looking at how she evaluates other sites.