Website design tips

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 usefulor 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

Visit our companion site,Problem Websites.

Z1.  Don’t distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound.

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.  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., Uncommon Wedding Gifts).

 

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.

Along with minimizing clicking, minimize scrolling, too.

F3.  Limit page length to 2 screenfuls, or 6-7 screenfuls for articles.

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 forcethem 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’san 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 1024×768 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 800×600 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 anothercolor).

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’renot 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 linkswithin 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:

Right wayCheck out our product specials, best sellers, and gift ideas.

Wrong wayFor product specials click here. For best sellers click here. For gift ideas click here.

 

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’tdepend 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 text from another site 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.

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.

I don’t know how anyone got the idea that you have to ask another site owner whether you can link to their site, but it’s not just unnecessary, it’s annoying. If the thousands of people who linked to my pages had asked permission first then I’d be drowning in an avalanche of email. The whole pointof putting a page on the web is to share it and give it an audience, so why would a page author notwant more people to see that page? 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

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.