Questions Answered about Web Site Design and Functionality

It’s all too easy to create pages that frustrate your visitors even though that’s not what you intended. And frustrated and annoyed visitors are likely to leave quickly without seeing what you have to offer.

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

Provide Something of Value and Compelling Content

Each page of your website should have something valuable to offer.

Offering something valuable is more important than design, which is why it is the first tip. I know many people reading this page are trying to find out how to make useless pages look good, because they think that style is all that matters. The truth is that fundamentally, a web page exists to provide something that is useful or interesting to visitors. Ask yourself. What are you offering to your visitors of value? Why is it worth their time to visit your site? If you focus on answering this question before you move on to how it should look, you are on the right tract. Something of value may be a free report, eBook a free trial, or some sought after information that’s freely given.

If your plan is to make money from advertising, then go for a ratio of not less than 75% editorial to 25% advertising. Interestingly, 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. A website also has to have more than ads if it’s to be successful.

No Sleazy Elements

Website visitors distracted with blinking or scrolling text, animated GIFs, or auto-loading sound that do not offer any value are more likely to leave the site immediately without clicking on anything. They are not likely to bookmark the site, return to it, link to it, and recommend it. How can anyone concentrate on reading what is on your site when there are animations flying around the page? It’s like trying to read a newspaper when someone’s poking you in the shoulder repeatedly. Visitors who have slow intranet connections may also resent that you wasted their time by forcing them to load animations and sound files against their will. Readers assaulted by blinking ads are more likely to leave the site immediately. That’s why research shows that animated banner ads are no more effective than static ads, and may even be detrimental to your site’s success.

No Popup Windows

Nobody likes pop-ups. Here again, the only reason a site would have popups is because the site owner is thinking of his or her own interests rather than the readers. We know that when we are browsing we hate popups, but suddenly, when we switch hats and become a site owner, we lose our ability to see through the users’ eyes. So we need to remember and put ourselves in our visitors’ shoes and offer compelling site content without distractions.

No Image Backgrounds

An image background is an image that takes up the entire background of a website and all the text, pictures and content lay on top of it. Image backgrounds scream “amateur”, because it’s mostly amateurish sites that use them. Can you name a single professional, respected site that uses image backgrounds? Sites such as Google, Yahoo, eBay, Amazon, the New York Times, Webmaster World, or other successful websites do not use image backgrounds.

Why? One reason is that image backgrounds scream low quality. Sites that use them are often user-hostile in many other ways as well. I visited a site recently and saw that they used an image background. I found the site also has slow page-loading times, internal links that pop up into new windows and links that are the same color as the surrounding text. They also used cheap animated GIFs, blatant keyword stuffing, and the text had many misspellings.

Unfortunately, just as people were finally starting to see that background images are cheap and garish, along came MySpace to re-popularize 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 superslow-loading pages. Image backgrounds also 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 are reading now — even though it has far less useful information.

Make It Easy to Find Stuff

Put thought into organizing your content. This is as important as what your pages look like, so spend some time on organization. If everything placed on your site is in a haphazard fashion you do your readers a disservice when they cannot easily find what they are looking for.

Minimize Clicking!

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

Do not use splash pages.  A splash page contains no useful information it simply “welcomes” visitors to the site, with an “Enter Site” link.  If you are using a splash page, get rid of it. After someone takes the effort to visit your site, give them access to your site immediately! Don’t make visitors knock on two different doors.

A related idea is to put useful information on each page. If a page doesn’t have at least 200 words, you probably should combine that page with another short page.

Minimize Scrolling

Limit page length to 2 screens, or 6-7 screens for articles. While you should put as much as information possible on each page to minimize clicking, don’t go too far in the other direction by putting too much information on a page. You should normally limit a page to no more than two screens of information. Articles like the one you are reading are exceptions, because articles are longer by nature. But even so, long articles (more than about 6-7 screens) should usually be separate pages.

Back to the Home Page

Include a way to get back to the home page, on every page. When visitors become lost on a site, they like to start over from the beginning. Make it easy for them to do so. If you are including a clickable logo on the top of every page make sure to also include a link that says Home. Some users don’t realize that logos take you back to the home page.

Some visitors might not be able to hit the “Back” button to go back to your home page. They may have entered the middle of your site after clicking a link to it from a search engine or from some other site.

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.

Visitors clearly dislike links at the bottom of pages. On long pages, you’ll want navigation bars on BOTH the bottom and the top or left, so visitors who have read a lengthy page don’t have to scroll back up to get to the menus.

The Downside of Using Frames

It is tempting 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 understand, easy to navigate, and easy to find Information. 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 them to get your frames to work properly then you are defeating the purpose of using frames. The preferred way of having the same elements on a page throughout a site is to use server-side includes. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:

<!--#include virtual="../quote.txt" -->

With one change of the quote.txt file, all pages including the file will display the latest daily quote. The inclusion is not limited to files.

Server Side Includes are useful for including a common piece of code throughout a site, such as a page header, a page footer and a navigation menu. Conditional navigation menus can be included using control directives.

Compress Your Files

Compress your image files. Nothing is more annoying to readers than waiting for a 200k 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!

And as mentioned earlier, don’t bog your site down with auto playing sound files unless they add value to your visitor.

Flashy multimedia can ruin your site. Flashy graphics and multimedia controls may look good, but they make it hard for visitors to get the information they want from your site. It is annoying to use a cumbersome Java scroller to see all the text in a field, or wait for all the doodads to load. JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. In a nutshell it is a box with scrolling text that moves at a programmed rate of speed. Either it’s too slow to read or too fast for comfort.

Website Readability

No line of text should be more than about 600 pixels wide. There are 75 pixels to an inch. Newspapers and magazines are printed in columns to make the lines short, so after you read one line it is easy to find the start of next one. The page you are reading now shows one approach to making line length manageable: put the text in a fixed-width table in the center of the page.

A potential problem with this layout is the content will be too wide for visitors with large screens, since the content is fluid and expands when the window is bigger. A way around that is to make the content a fixed width, but that poses another problem. Pages should be designed to work on screens as small as 800×600, which means no more than 770 pixels wide to account for scrollbars and such. The two sidebars on the page in question take up about 175 pixels each, or 350 pixels total. That leaves 770-350 = 420 pixels for the content, which is thin and ugly on the larger 1024×768 monitors, which are the most common. So if I want two 175-pixel sidebars, I can either:

(a) Make the content 420 pixels wide, which will look crappy on 800×600 screens.

(b) I can make the content fluid, which will look fine on both 800×600 and 1024×768 screens, but worse on even larger screens.

I chose (b), because that gives the best result for most web visitors.

Make Your Pages Completely Visible

Most users have 1024×768 monitors, so pages should be completely visible at 1000 pixels wide without horizontal scrolling. Today only about 10% of users have a screen that’s 800×600 pixels or less, so many designers make their pages work at sizes as small as 770 pixels wide. The tradeoff is that if you design for 770 pixels, you are wasting the space available to the other 90% of your visitors. You could use a “fluid” design that’s wide as the user’s window, whatever that may be, but it’s hard to make fluid designs that look good at any resolution. What size to format your pages for is a tough decision full of trade-offs. You can still take one important point from this paragraph. If your page doesn’t work at 1000 pixels, it’s too wide.

Make the 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 do not 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 or making it bold.

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

Make the Font 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.

Line Spacing 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 spacing, 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>.

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 lose the effect, since everything looks the same, so none of it looks important. If you want to draw attention to something, make the headline stand out — bold, bright color, perhaps a little larger — but keep the text that follows it normal.

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 scream is “Desperate.” The writer is desperate to get the reader to believe something. But think about it: Do several exclamation marks impress you when you read them? Are you more likely to believe something because it has a screaming mark at the end? Desperate marketers try to sell us something with their exclamation marks. When we see many of them we sense that desperation and discount what they are trying to convince us of. So when you switch hats and you are the one giving the message, don’t let your desperation show by using many exclamation marks. Play hard to get.

Use a spell checker.

Yes, people who spell poorly may not notice or care that your site contains many misspelled words, but literate people will notice and care and they are in the majority. Also remember there are many sound alike words that have different meanings. Your spell checker will not tell you if you are using the wrong word for the context of your document. For example, words such as whole or hole are spelled correctly; they sound alike but do not mean the same. Be careful, and have someone proofread your copy before you put it on the web. In fact, it is a good idea to have a professional proofreader or editor go over your text to polish your document.

Copy editors make sure that text is readable, accurate and ready for publication. They work on publications of all kinds. A copy editor will correct grammar and spelling, check the text to ensure it is well written and logically structured and make corrections as necessary.  The editor will check that captions and illustrations are correct and may also check facts and look out for potential legal problems and discuss them with you. Well-written easy-to-read copy says a lot about you and your company.

How to use a Link

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

Make Links Blue and Underlined

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. Also, 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 with having links that are not blue and underlined? How can users know what is 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 used blue text, which looks like a link, but which isn’t. So users had no clue 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 are clearly menu items. The blue/underlined tip is for links that are in the middle of the page.

Explain What Your Visitor is linking to

The text of a link should describe what it is 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, nondescriptive words as the link text.

When you are 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. Now visitors have an idea of what is on those sites that will help them to make a decision about clicking on the link. Your description helps them find what they are looking for easily, while avoiding what they are not looking for. Nothing is less useful than many links to other sites when those links consist of nothing more than the names of those sites (or worse, the urls). Do your readers a favor and share your knowledge with them.

Do not Open Internal Links in a New Window

The owner of a site I just ran across thinks it is a good idea to pop up a new window when a visitor clicks a link within his site. That annoys visitors 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.

Be Accessible

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

If you are not printing your phone and/or e-mail anywhere because you don’t have the resources to handle inquiries, then do your readers the courtesy of letting them know that. Spending time hunting in vain for contact information that does not exist is frustrating.

Unfortunately you cannot link your e-mail 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.

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 are using a link checker that’s built in to your web editor and your site is framed, then you cannot depend on the link checker. It does not have the ability to check for framing problems (for example, pages load into wrong frames, clicking a link results in frames within a frame, etcetera. Check it yourself.

Remove Dead External Links Periodically

If you link to any external sites, some of those links will 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 that automatically checks your links to external sites to see if any of them have gone dead.

Include a Last Modified Date on Your Pages

Your site may contain information that could become outdated. Do your visitors the courtesy of letting them know when the information they are reading was written or updated. Include a “Last Modified” date on the top or bottom of your pages. If site content by its nature cannot become outdated (for example, poetry, stories, art, website design tips), then a date isn’t essential but readers may appreciate knowing when a page was authored anyway.

Comments

Got something to say?

Comments