…Or “How Not To Make Your Website Suck”.
Below is a list of 10 “don't do's” when building your new website. Most of these come down to common sense, but it's always good to reiterate good design.
I haven't listed these in any particular order and they are purely just some of my “top rated” annoyances. Obviously this list is not definitive and if there are any others that you find particularly offensive and lead to bad design, feel free to let me know.
1. Background music
I think 99% of most people would agree that background music or music that starts playing as soon as the page is loaded, is just plain annoying. If I wanted to hear music while I'm working, I'll start up iTunes and listen to something of my own choosing. (Obviously, most “MySpace” users would disagree)
Even more annoying is when the page has no controls that allow you to turn the music off.
2. Splash pages
Splash pages or “Intro” pages are those annoying pages that are displayed before you can view a website's homepage. Not only are they annoying, they but they go against good usability practices. If you owned a “bricks and mortar” store, you wouldn't ask your customers to view a 30 second “advert” prior to entering your store, so don't treat your web customers any differently.
Worse still, if you do have a splash page, at least make sure that you've also got a “skip” button or link so that I can go straight to the main website content. If your splash page is made using Adobe Flash, make sure the “skip” button is not embedded in the flash so I don't have to wait for the Flash to load, before being able to skip it.
3. Misspelled or grammatical errors
When you write your website copy, make sure you run it through a spell checker, at the minimum. It doesn't take long to check the spelling. Using an online or web editor can make it take a few extra minutes but all you need to do is simply copy ‘n paste it into your favourite word processor. With that said, even the standard WordPress editor now has a spellchecker, built in. If you use Firefox as your browser, they also have some great add-ons for when you're using an online editor that doesn't have a spell-check facility.
4. Images that aren't optimised
With the proliferation of digital cameras now and especially with the uptake of social media sites such as Flickr, Facebook & Twitter, getting your images online is such a simple task. If you're using images on your website either to convey a message, as part of a logo or banner or simply for social purposes, make sure they're optimised. To put it simply, optimising is the process of compressing the amount of data within your image and thereby reducing the physical file size.
One of the main reasons to optimise your images is to reduce the speed at which your web page loads. No one wants to wait for ages while your page renders. JPG images, for example, can be optimised with little or no sacrifice in image quality.
If you have several images that you want to display, also consider providing “thumbnail” versions of your images. The benefit of this is twofold. Not only will your pages load considerably faster, but your end user will still be able to view the image and decide for themselves whether they wish to view or download the larger version. When providing “thumbnails”, make sure you reduce the image dimensions by using an appropriate graphics or image editor such as GIMP or Adobe Photoshop, to name just a couple. Don't simply use the “width” and “height” tags within the HTML page. These tags simply reduce the size of the displayed image, as opposed to reducing the physical size (ie. the number of bytes the image takes up on your hard drive or server).
5. Overuse of a technology or element with little or no benefit
A classic example of this is the use of AJAX (Asynchronous JavaScript and XML). There are certainly times when the use of AJAX is beneficial and advantageous to a site's design (think Google Maps), but don't use it just for the sake of it. Yes, it may sound “cool” when you're trying to sell that $15,000 website and you're espousing the technology behind the over-inflated price, but unless you have a valid reason for using it, don't!
One of the fundamental elements that, if not implemented correctly AJAX can break, is the simple “Back” button on your browser. When people click the “Back” button, they expect to be taken back to the previous page they were viewing. If your website is using AJAX to display some or all it's pages, clicking the “Back” button wont always do what it's supposed to do. Without naming names, I've seen a site for a Web Design company that uses an AJAX call for every one of it's pages. Now, normally, if you've navigated your way through several pages of their site, clicking the back button, you'd expect, would take you to the previous page on their site that you were viewing. Well, what actually happens is that you end up back on the previous website you were viewing. Very annoying.
Another example is the overuse of PDF's. PDF's are great for emailing or “packaging” up documents to give to people. Don't overuse them for your website content though. Instead of simply providing a link to a dozen or so PDF documents, convert the content into actual HTML pages. Not only will search engines love you more, your customers will too.
6. Inconsistent and poor font usage
There are certain fonts that are “standard” or common to both Mac and PC users. You can view a list of these fonts on the ampsoft website. The most common fonts used are Verdana and Arial. It's best to stick to these “standard” fonts so that your site will look consistent across the various browsers and Operating Systems. When specifying fonts in your style sheet, it's also possible to provide multiple choices so that if the first choice is not available, the next choice will be used. You can specify the fonts for your page using the “font-family” tag (eg. font-family:Arial, Helvetica, sans-serif).
The fonts used within your website should be consistent across all your pages. If you use Arial on your homepage, then use Arial for the rest of the site.
Font size is another important consideration. Consider the audience your website is aimed at. Don't use extremely small font sizes for your main body content and always try to specify font sizes in relative terms using “em” or “%” sizes rather than specific “px” or “pt” sizes. A common occurrence of small fonts is within Flash sites. Quite often Flash developers will use pixel fonts. Admittedly, some of these fonts can be extremely clear and easy to read at small sizes, however, large blocks of this type of text can be hard to read and also tiring on the eyes.
7. Inconsistent navigation and page elements
When people browse your website, they expect some consistency between each of the pages. If you use a horizontal menu across the top of your homepage, don't then change this to a vertical menu on the remaining pages. There are certain elements within your site, such as navigation, that should be consistent across all your pages.
This also goes for the use of colour as well. There should be consistent use of your main colour theme across each page. Now, I'm not saying that you can't incorporate different colours on different pages within your site. The use of colour is a great way to provide feedback to your customers about where they are on your site. For example, your business may have various departments. You could use a different colour swatch on your website, for each set of department pages. This can help the customer identify which section of your site they are currently browsing. Just remember, if you're incorporating this in your design use the colour sparingly. Use of too many colours will make it confusing for your customers, which backs up my initial point, be consistent.
8. Using frames
Although not as common place as they were a few years ago, I just had to have this as one of my “don't do's”. It never hurts to reiterate this one.
Frames make it harder for people to bookmark pages. They can also hinder search engine indexing as well as making it difficult for your customers to print your pages correctly.
Frames really do bite the big one. ‘Nuff said.
9. Underlining text
Never underline text to try to make it stand out. This goes for headings also. When people see text that is underlined, their first reaction is to try to click it. Only links should be underlined. If you have text that needs to stand out, then make it bold or change its colour. Please don't underline it.
10. Not testing your website across multiple browsers
Not everybody uses Internet Explorer and the same can be said for all the other browser variations out there. At the very minimum, you should test that your site renders properly across Internet Explorer, Firefox and Safari. I know that not everyone can have every single type of PC, Mac, browser type & browser version, so fortunately there are some great websites such as Cross Browser Testing and Browser Shots that help you to perform these tests.
As mentioned in my opening comments, this list is by no means definitive. If you disagree with any of the above or want to make mention of some other glaringly obvious mistakes that you've come across, feel free to leave a comment.