Best Practise Web Design

In this article we offer 7 best practise guidelines for anyone thinking of developing a new website, or re-designing an existing site.

Implement a simple to use navigation system

The navigation on your website should be clear and easy to use. Avoid complicated menus or slide-out systems that might be difficult to understand or prove to be unreliable across different web browsers. Most sites feature their navigation along the top or left-hand side, so it’s usually best to stick with this convention. Remember, people won’t be willing to specifically learn how to use your website, so your choice of navigation should be second nature to your visitors.

Many e-commerce websites are now featuring their product navigation along the top of the page, and customer service and other navigational aids along the bottom of the page. This is now a widely used convention which is also acceptable.

Breadcrumbs – Give your visitor a clear indication of where they are

As a visitor moves deeper into your website, it’s good practise to make sure the site’s main navigation is always on hand and located in the same place. It’s also useful to tell the visitor where they are at any given moment. The easiest way of doing this is with a breadcrumb trail close to the top of the page. For example, if someone is looking at a packet of flower seeds, the breadcrumb trail might look like this: Homepage > Garden > Flowers & Shrubs > Seeds > Geranium Seeds

A breadcrumb trail not only allows the user to visualise where they are within your site, but it also allows them to move quickly from one area to another.

Don’t use Splash or Entry pages

A “Splash” or “Entry” page is an initial page that loads prior to entering a website. Often they feature a large image or video along with a “Skip” or “Enter” link.

Splash pages are often considered to be a form of “web design vanity” and usually serve no useful purpose. Visitors are more likely to hit the back button in their browser if a site’s initial page doesn’t appear to provide any useful information.

Avoid featuring too many adverts or banners – or content that looks like an advert or banner

Ad-blindness is where a user visually “tunes out” items on a page that look like adverts or banners. Featuring too much advertising on your site can be a waste of valuable space that could be used for more constructive purposes.

Banners and adverts often come in fairly standard shapes and sizes, so you should also avoid inadvertently making regular content look like advertising where possible.

You should avoid flashing or blinking content – visitors usually ignore items with aggressive animation.

Finally – avoid automatically opening content in popup-windows, since many users close these down quickly before the content inside them has even loaded.

Avoid opening links in new windows

Unfortunately this is something a lot of our clients ask for, particularly when they want to include a link to an external third-party website. Website owners are worried that once someone clicks a link and leaves their website, they won’t be coming back. Unfortunately, opening such links in new windows is far from an ideal solution and should be avoided for the following reasons:

  • It pollutes the visitor’s screen. If lots of sites behave this way, the visitor can end up with several unwanted windows open at any single time. If the visitor wants to open a link in a new window, they have the ability to right-click on the link and do this themselves.

  • Many visitors have popup blockers installed that can prevent new windows from opening correctly.

  • Often new windows can open very quickly and full screen. When this happens, it’s not obvious that the link has even generated a new window, and the visitor can then become very confused when the back button no longer works.

As a matter of good practise it’s useful to include some kind of visual indicator when links lead to external third-party websites. An obvious icon or the words “external link” in brackets would normally suffice.

Avoid the use of background music or audio

Generally, it’s best to avoid the use of background music or audio on a website. Videos or sound bites are an exception, but it’s always a good idea to give your visitor the option of manually playing these rather than starting them automatically.

If you really need to feature music or audio in the background, at least give your visitor the option of controlling the volume or muting it. But remember, someone casually browsing at 11 o’ clock at night, with their volume inadvertently turned up full and the kids asleep in the bedroom next door, isn’t necessarily going to thank you!

Only use JavaScript for progressive enhancement

JavaScript is executed client-side, rather than server-side. This means you cannot control its reliability with absolute certainty, and some visitors may choose to turn it off altogether (this includes organisations with security concerns or users on mobile devices).

If areas of your website rely on JavaScript functioning correctly in your visitor’s web browser, then you are limiting its usability.

Instead, JavaScript should be used to provide progressive enhancement. This means that your website will work well without it, but will work even better when it’s enabled at the client’s end. Anything relying on JavaScript should always have a non-JavaScript fall-back option.

Featuring messages such as “This website requires JavaScript to be enabled in your browser” is unlikely to win you any brownie points with your customers. Remember, your visitor probably has a choice of different websites that they can visit, so asking them to jump through hoops to view your content is generally not a good idea.

Final word

There are dozens of other best practise guidelines that you should follow when developing a website. Hopefully the list above has provided some useful ideas and information.

2 replies to “Best Practise Web Design”

  1. Eric Brambell says:

    This is all lies, we know the best websites in the world feature a splash screen, loud background music, large 300dpi background images and Adobe Flash navigation with no fallback option. Trust me I’m a Mac user

Leave a reply to Gareth

Cancel Reply

(won't be published)
Email us Web enquiry form