Domainmonster.com Domain Editorials

Home > Editorials

26-Jul-2007

The Basics of Web Design

Nowadays, with easy-to-use GUI web design packages so freely available, everyone seems to think he or she is a web designer. Yet many elementary (and some might even say common-sense) design points often get forgotten, even by the most seasoned web designers.

Content

Content is the most important feature of your website; it's what your visitors are there for. You need to make sure that it's relevant and easy-to-read.

- Don't have too much content or too many links on one page (with the exception of your sitemap, which should have links to all your pages). Make it easy for your visitors to assess whether a page is going to contain the information they want.

- Writing copy for the web is very different from writing copy for printed media. It's harder to read from a screen than from a page, so make sure that you make good use of bullets, subheadings and short paragraphs so that your visitors can easily scan your copy and pick out the bits that are most relevant to them.

- People tend to look at the elements on web pages in a certain order; your copy should be arranged in a way that reflects this, with your most important words and phrases appearing in the first two paragraphs, and the beginnings of lines and paragraphs containing words that will grab your readers' attention.

- Use fonts that are easy to read. Sans-serif fonts look best on screen. Don't use any fonts, frilly or otherwise, that your visitors might not have installed; stick to web fonts such as Arial, Verdana etc. Use black on white, or at least dark on light. Light text on a dark background is far harder to read.

- An exception to the font rule: if you wish to use a fancy font for headings, make graphics for your headings and insert them into your page. (This is not really recommended because search engines look for headings tags to assess page relevancy; doing this could lose you a place or two on the search results.)

- For the love of all that is good and beautiful in the world, make sure that your spelling, grammar and punctuation is spot-on. Some visitors will leave immediately if they spot an error.

- Update your content frequently. Make sure that it is current – don't have out-of-date information, unless you keep a news archive – and ideally, try weekly to add something new for your visitors to come back for.

In general, keep reminding yourself that you are writing for people reading from a web page, not a piece of paper. It's very easy for your visitors to go elsewhere, so don't give them a reason to. Your copy should be easy-to-read, well-presented, and highly relevant.

Design Features

Using an over-complex layout is a primary web design sin. In the case of almost every website, visitors come to find information; what they are most interested in is your content.

- Cut down on superfluous graphics and animations. A page cluttered with unnecessary images and gratuitous Flash elements will quickly be discarded in favour of a nice, clean design. You must not distract your visitors from the primary objectives of your website.

- Don't use too many colours. Four basic colours is almost always enough. Too many colours looks dreadfully unprofessional.

- Keep to a consistent theme. Use the same logo, typeface and layout on every page; don't distract your visitors by having the look and feel of your pages changing every time they click a link. Remember: you want them to focus on your content, not on how fabulous and imaginative your designer is.

- Use as few alignment points as possible. This means that all your paragraphs should be aligned to the same vertical line, with the exception of quotations or bullets, which should be indented to the same point. Try to keep everything in neat columns.

- Have your name and/or logo in the top left hand corner of every page. This graphic should link back to your homepage on every page (except the homepage itself – never have circular links).

- No one looks at the right side of the screen, so don't put anything important there.

- Make sure your page scales to people's browser size.

- Don't make your visitors scroll down long pages. As a rule of thumb, they should only have to scroll down a maximum of two page-lengths. If an article is longer than that, you could make it flow onto a second page.

In general, try not to annoy anyone with your site design. It should be unobtrusive, so that they can get to the content as quickly as possible, without unnecessary distractions.

Graphics

I've already mentioned that too many excess graphical elements can lead to ugly, confusing and complicated design. If you're still not convinced, there are other good reasons to avoid graphical overload:

- Remember that more graphics means a longer page loading time, and visitors on dial-up (they do still exist) will undoubtedly be frustrated by this. Even broadband users will be frustrated by slower-than-average downloads. (We have been spoiled by our fast connections!)

- A few attractive, unique, targeted graphics will serve you far better than dozens of unnecessary, generic ones. Relevant graphics look far more professional than images that don't seem to serve any purpose.

- Flash elements can be really frustrating for your visitors. They can be very distracting, especially if you use sound, and some web users just tell their browsers not to display Flash. Also, you can't rely on your visitors having the latest version of Flash.

- Flash is useful for added functionality, like interactive maps and diagrams, or virtual tours. Only use it when it adds value to your site. If your visitors wouldn’t come back to use it again, drop it.

In general, use a few choice graphical elements which enhance your user's experience. In most cases, your website is just a showcase for your *content* – not your design skills – and should show off this content in its best light.

Navigation

Good navigation is really, really important. I'm sure you've visited websites before where it's been virtually impossible to find what you're looking for. Make sure that your visitors know where they're going and what they'll find there.

- All of your links should be easy to locate, and it should be very clear where they go. If you're using graphics and buttons, make sure they are very clearly labelled. Blue hyperlinks and purple for visited links will be the most familiar format to your visitors, but if you must use a different colour scheme, ensure that your links stand out (they must be underlined and they must be a different colour from ordinary text).

- A clear colour-change for visited links is really important. You might think that no one takes any notice of it, but you'd be surprised how useful it is to be able to see where you've already been, especially on a large website. Ensure that there's only one address for every page, or visited link colours won't work properly.

- If you have a large website, categorise your pages. Use a sitemap to explicitly show your categories. Sometimes it will be helpful for your visitors if you put some pages in more than one category, but don't overdo it; only put pages in the most relevant categories.

- You may have heard of the "three-click rule" - every page on your site should be accessible within three clicks, or visitors are likely to go elsewhere. This is a good rule of thumb, but can be difficult to stick to if you have a very large site; if you find that it's impossible to maintain a three-click standard, at least make sure your visitors know they're on the right track.

- Use a breadcrumb trail. This is a little navigation line that appears at the top of the content part of every page, which shows your visitor how they got to where they are, with hyperlinks to the pages higher up in the hierarchy (e.g. Home > Category > Subcategory > Page). This can be invaluable for visitors who found you via a search engine, since they may want to explore more pages like the one they've found.

- Use redundant navigation. Think about all the possible ways someone might try to find something on your site, and implement all of them.

In general, make it easy for people to find their way about. Don't force them to bend to your favourite navigation technique; give them all the options they need and make sure that everything is clearly labelled so that they can find what they need as quickly as possible.

Accessibility

Adhering to web standards of usability and accessibility is well worth your while. It's good for designers and their clients as well as visitors. DomainMonster.com features a more complete article about the benefits of standards compliance, but here are a few especially relevant points.

- Let your visitors make themselves comfortable. Don't prevent them from resizing text, using screen read, or using the browser shortcuts they're used to.

- That means, I'm afraid, not designing your whole website in Flash. There are lots of reasons not to build your entire site in Flash, and this is one of the most important.

- Try using Cynthia Says™ to test your site for compliance with Web Accessibility Initiative standards.

- Don't tell your visitors they're using "the wrong browser" or that they "need" this or that plug-in. Your page should degrade gracefully for older browsers and those who don't have certain plug-ins.

- Don't tell your visitors that they need to buy a bigger (or smaller) monitor to view your page in the best light. Instead, build a page that looks good at all screen resolutions and in all browser sizes.

In general, don't be rude to your visitors by telling them, explicitly or implicitly, how they should or should not be viewing your page.

By Brian Jackson

For more information on domain names and domain name registration questions please feel free to contact Domainmonster.com support team who will be happy to assist you.