Implementing good web design

Bringing your ideas to the world

The more information you can provide about your ideas, the quicker we can provide solutions. Depending on your needs, we can do all of the design work for you, or you can save time and money by doing some yourself. This page outlines in detail the steps to take.

  1. Website structure
  2. Text
  3. Images
  4. Colour scheme
  5. Navigation
  6. Page layout
  7. CSS (Cascading Style Sheets)
  8. Flash and Javascript

So, go through at least steps 1-3 above, and focus on the content. Further steps are just included for reference - use our expertise rather than spend your valuable time learning all about them. Ideally, send us a Site Map plan, and then write a rough draft of text for each page as a separate email with the page title as the Subject line. We can optimise text to make it Search Engine-friendly and of course employ our spellchecker elves. List any links you want included. Attach any graphics and photos you want on that page, along with directions where; pictures should be as large as possible, and will be resized for the web.

If this all seems too much work, just let us know about your basic concept and we'll implement a working solution. The style and content can be tuned later on. By all means submit design ideas and graphics to us as images created with The GIMP, PhotoshopTM or similar programs, but bear in mind that it will only be a sketch to give an idea, and expect the finished web pages to look somewhat different in the end; web pages are not print media.

Website structure

You need first to think about the structure of pages. You should visualise the whole site as a tree structure with the Home page as the trunk. Different product/service groups would each be the main branches from the trunk, and from each branch there would be smaller branches (individual pages). Some of these smaller branches may also split off into sub-branches if necessary for larger websites.

Start by drawing up a Site Map which lists all pages in each branch. Any website also needs at least the following pages:

It's a good idea to have links to these pages at the foot of each page. The "About Me/Us" page might be included on the "Contact" page, but it's best to keep things simple and allow for change. We would advise having each of these pages in its own branch. Other branches might be:

You need to plan for future expansion, so that pages keep the same name to avoid breaking links. You can always add stuff later, even whole new branches, but it's bad to move existing things around.

Text

Next you can write the text you want for each page (it can change later). Remember that Google and other search engines can't understand images (yet!), neither can blind people nor commuters listening to your website being read to them. Text is the key to your website being found when people search, so include relevant words together on each particular page. If people search for Depression Derby they're only going to find your page about depression counselling if it also includes the word Derby. Our drum group's home page lists all the towns the players come from, so that Googlers will find us.

Regarding fonts, it's best to use standard fonts that are found on all types of computers, e.g.:

This may seem limiting; you can specify a rarer font, so long as a backup is also given for when people don't have that font installed. Sans-serif fonts are easier on the eyes for reading paragraphs of text.

Images

Once you know what you want to say, consider photos and any graphics to use. Pictures will bring any site to life. People often browse using pictures as links, so ideally all pictures should be clickable, either to give a larger version or a page about the picture. A nice idea is to have an image Gallery which includes all photos on the site which can be clicked to go to the relevant page.

Headings, titles and navigation buttons should ideally use text, which can be styled in various ways. Alternatively you can use images of written words (using fancy fonts) but this may not work on all platforms, so fall-back mechanisms must be employed. One day browsers will get more advanced and understand the structure of pages using the titles and other semantic information. New developments allow pictures to be resized as well as text, but until that is mainstream it's best to stick with what works for everyone today. You can use icons for links and navigation buttons but bear in mind that they may remain at a fixed size if people increase the font size.

Colour scheme

Think about the colour scheme. This should be consistent throughout your entire company: logo, flyers, stationery, etc., to define a brand image. Ideally your colour scheme should match any important images used on the site (or vice versa). A few similar colours often work best. Here's a utility which generates related colours, and here are lots more.

"Any colour you like, so long as it's black" - Henry Ford

Just because this site happens to be black doesn't mean yours does. Any colours are possible, although some are inadvisable; there are good reasons that certain colour combinations work well. Web users have grown accustomed to blue underlined text to mean clickable links, and purple to mean visited links, so it's good to build on people's expectations rather than confuse them; the aim in accessible web design is to make things simple and not get in the users' way. But in the end it's your choice. If blue and purple clash with your company livery, think up a different scheme, so long as it's intelligent and consistent.

Navigation

Most websites have a Navigation Bar, a list of links or buttons which navigate to the main branches of the website. This isn't essential for small websites like this one, but can help to show users what's here. 'NavBars' are usually a vertical list of links/buttons down the left or right-hand side columns (or both), or a horizontal list across the top and bottom of the page. Each method has (dis)advantages.

The bottom of the page is not ideal for the only navigation bar, since with larger pages the links/icons would be off the bottom of the screen. Navigation bars are usually either at the top or at the top of one side (left or right) for the good reason that that is where people look first. Studies have shown that the eye scans along the top line and down the left side first (that might differ for languages like Hebrew which read from right to left).

Page layout

Unlike print media, layout of a web page depends on the browser being used. Authors should realise that their pages will be viewed on many different types of devices, such as:

So trying to specify an exact layout like you would make a poster is folly, and will only guarantee how it looks on *your* screen; it will more likely look wrong (or even broken) in other situations. A fluid, dynamic layout is preferable to a fixed layout. You can specify different stylesheets for the above types of devices.

Rigidly defined blog-style narrow columns can annoy users when a page is ridiculously tall and thin with lots of wasted space either side, necessitating lots of scrolling down; conversely, long lines of small text are hard to read. If the line length is too long on a page of dense text like this one, users can always resize their browser window to suit. Text should be scalable by the browser for people with poor eyesight, but without the design falling apart.

CSS (Cascading Style Sheets)

Modern web design is all about separating the content from the style using CSS (Cascading Style Sheets). These treat the simple content on each page in user-defined ways, such as having all links in blue and all titles in larger type, etc. So the author writes the page and defines things as headings, links, lists, bold/italic, etc., and then designs the stylesheet to make those items look the way they want. For instance, you might want all links within a title to change to green when you hover the mouse over them; or you might want all navigation links to be on the right hand side in a large box, each with its own small dotted border around it. CSS specifies things like:

Since multiple definitions in the stylesheet can 'cascade' down and affect things differently, there is no limit to what you can achieve. See CSS Zen Garden for some very exotic examples of what can be achieved with unlimited amounts of time.

The beauty of this approach is that aesthetic changes to a design can be made simply by just editing the stylesheet, and all pages on the website change along with it, preserving a unified image without the (huge) effort of changing all pages individually. So if your company marketing team decide that "red is the new black", your website colour scheme can be changed very easily (and cheaply).

Graphical elements such as borders and other page decoration, are possible using CSS but again bear in mind that some more complex stuff may end up looking broken on some people's computers. Nowadays web pages tend to be less cluttered and more spacious. Attention to subtle details such as margins, indenting and line-spacing can make things look Just Right.

With web design, simple is always best, and adhering to web standards will ensure things work properly and will do in five years' time. We make sure pages created all satisfy the spec and validate correctly.

Flash and Javascript

We don't use Flash or Javascript as many web users disable these 'features' of their browser, having grown tired of abuse by advertisers and bad web designers. Sites which use Flash for primary navigation are unusable for many people. If you must use Flash on a site, restrict it to embedding within normal web pages. There are much better methods of delivering video and other media without unnecessarily overtaxing the computer.

Javascript can also sometimes cause older computers to crash or become unstable, and is not implemented on many phones. It's a mistake to use novel behaviour in a website, because users will invariably get confused or not be able to use it at all. Fashions get old pretty quickly on the web. 'Innovative' use of scripts and other gimmicks to do something cool is fine, as long as it is not essential and 'degrades gracefully', that is, doesn't impede viewers without that facility.

Any clickable link should go to a page (or a section of one) - that's how the Web works and what folk are used to. Each page should have its own unique address (or URL = Uniform Resource Locater) which can be bookmarked or linked to. 'Clever' tricks with frames are considered bad form because they break the browsing experience, and thankfully nowadays are dying out.