Before you start the important task of planning your website it’s absolutely essential to have a clear understanding of your target audience. It is reasonable to assume that website owners may initially identify more than one single group as their target audience, however it is imperative to focus on a primary group as this will ensure clarity and focus.

Once you have identified your audience you will be able to:

• Write the site copy for that specific group
• Create a writing guide for site editors to use
  • Site editors will then be able to write with a single focussed voice
  • Site editors will be able to write content with SEO (search engine optimisation) in mind
  • Site editors will write content with contextual links in mind
  • Site editors will write scannable content, i.e. using good relevant headings, using lists and breaking up content into manageable chunks
• Develop a website map and site structure that reflects your target audience
• Design and style the look and feel to reflect the audience’s requirements

Some other points to bear in mind

• You cannot design a website that pleases everyone; if your reach is too broad the result will be a site lacking impact, essentially the site will be too diluted to appeal to anyone.
• Write engaging content for your primary audience; avoid trying to write copy for everyone.
• Try to write about the benefits of your service rather than specifications
• Do not plan or design your website by committee. This style of planning often results in a website without clear focus or intention. Remember the old proverb… Too many cooks spoil the broth …

Download a free PDF: Identifying your target audience, a mind-map

Download: Identifying_your_target_audience.pdf, a mind-map

Use anyway you wish. (PDF 330kb)

One of the first steps in planning your website is to create a list of all the pages that you might need. A small website might only include a few pages: i.e. home, products, contact-us and about-us. However, if you are thinking about creating a larger website you will obviously need to plan for many more pages.

Identifying your pages

To help identify your pages try spending some time thinking about your websites goals, its purpose and its target audience. It might also be a good idea to research other sites similar to yours to see how they’ve organised their information.

Don’t worry too much about the length of your list, just write down all the pages you think you might need; we will be looking at organising and structuring the pages later on. E-commerce stores or very large database websites often require a very different approach; in this article we will focus on small to medium sized websites.

To give you an example of a typical set of site pages we have listed the pages of a fictional software company.

1. Home page
2. Company Services
3. Company information
4. Support pages
5. Discussion Board
6. UK Division
7. Ireland Division
8. Scotland Division
9. Contact
10. Company Location map
11. Writing Software
12. Graphic Software
13. Website Software
14. Software updates
15. Extras
16. Software books
17. Book 1
18. Book 2
19. Testimonials
20. Copyright information
21. Privacy Statement
22. Accessibility Statement
23. Links
24. Events
25. Jobs
26. Faq

As you can see, we have managed to identify a total of 26 pages for our fictional software company, it’s now time to start thinking about arranging these pages into website sections.

Organising your pages into site sections

To help your visitors locate what they came to find we now need to arrange your pages logically into various sections and then into sub-sections. This will enable us to present a clearly defined structure that follows a logical order and is easy to use.

• Home
  • Jobs
• Software
  • Writing Software
  • Graphic Software
  • Website Software
  • Software updates
• Company
  • Testimonials
  • Company Services
  • Events
• Contact
  • UK Division
  • Ireland Division
  • Scotland Division
  • Company Location map
  • Links
• Software Books
  • Software book 1
  • Software book 2
• Support
  • Discussion Board
  • Faq

Copyright, Privacy and Accessibility Statement we’ll put in the footer of every page.

As you can see the website structure is starting to take some shape, it is no longer just a long list of potential pages. Some pages have been combined and others organised into a logical order of primary sections and sub-sections. We can now use the website structure as the building blocks for our next task, preparing a graphical website map.

Graphical website map or site diagram

Whatever the size of your website its always a good idea to develop a graphical website map. A website map is a set of simple diagrams that describes the information architecture and the interaction of pages on your site. A website map is a valuable tool for clients and web designers alike as it helps define the sites structure in a visual context.

Fig: 0.1. Example of a very simple website map.

Apply a user-led approach

Its a good idea to initially draw up your website map with pencil and paper. When creating the map always apply a user-led approach; try to anticipate what the user wants and then layout the page structure in an easy to follow way. Use arrows or lines to show how the pages will be hyper-linked together. It’s also a good idea at this stage to give each page a title; the title must reflect the content of the particular page. This is important as titles are often read by assistive technologies like screen reading software and search engines (like Google) use them to index your site.

The website map helped to arrange, link and associate the individual pages that make up your website. We have now done enough groundwork to move on to the next phase, creating an easy to use navigation system.

Site navigation

Navigation often consists of a set of graphical buttons or interactive text links. Its important to locate the primary navigation and any other important information above the fold making sure it’s clearly displayed. See fig 0.2. As a rule of thumb, the primary links should not exceed seven. Sub navigation links are often seen just below the primary navigation or placed in the sidebar.

Fig: 0.2. Above The Fold: The section of a web page that is visible without scrolling.

It’s also essential that the navigation system is consistent and arranged in a similar layout throughout your site. A consistent navigation system will enable your visitors to find your products or services efficiently and works best when it’s clearly defined, grabs attention and attracts the users eye.

Naming your navigation links

When it comes to naming your individual sections try to trim them down to one or two words. For example imagine a set of primary navigation links like this:

• Our company introduction page
• company information structure
• Our full selection of software products

Perhaps, the titles are a bit long; it might be better if they were written in a more concise way, i.e

• Home
• Company info
• Products

Summary

Planning a good solid structure will enable your visitors to use your website with ease. So don’t rush this important phase of the project, take your time, think carefully and create great website content.

You can read the full article over at www.mediascape.org.uk

Unfortunately, when it comes to the smaller business this is not always the case. In fact, for some small businesses early planning can get neglected, they have recognised the need for having a website, but do not appear to have fully thought through the reasons behind that recognition.

To be fair, most small companies do not have the luxury of accessing a range of IT, PR and Marketing resources. However, regardless of the size your business, it’s still vitally important that time is set aside to prepare a detailed design brief.

But why bother with a brief?

Creating and developing a website is a little like putting together a large and complex jigsaw puzzle. To complete the puzzle it’s generally a good idea to first identify the individual pieces, and then secondly to start to put those pieces together. To make this process easier it’s often necessary to refer to the picture or image displayed on the puzzle’s box. However, without this pictorial guidance, putting the pieces together would be difficult, haphazard and time consuming.

Just like following the image on the box to complete the puzzle, it’s important that web designers are given a clear vision to refer to. By creating a clear and detailed website brief the web designer can start to understand your vision and start to put all the pieces together.

Basic elements of a simple design brief are…

• An overview of your business.
• If you already have a website, explain what you like/dislike about it.
• The aims and objectives of the website, i.e. generate enquiries, promote a new product etc.
• Who is the target audience?
• Scale of site, i.e. a small-medium 10-30 page website, or a large database site with hundreds of pages.
• Functionality requirements, such as…
  • Content Management Systems (CMS). What’s a CMS?
  • Website Search Systems.
  • Password protected pages.
  • Message boards, guest books etc.
  • E-commerce capabilities.
• Design and branding. What is the visual message you want to project?
• Structure and Content.
  • What will be the primary and sub sections of your website, i.e. home, about, contact etc.
  • Have you written, prepared and proof-read the website copy.
  • Are you using or considered hiring a professional Copywriter?
  • Will you want to use stock images?
  • Will you be using a photographer or using your own images?
  • Will you be using downloadable files such as PDF‘s and MSWord docs?
• Hosting, Domain name requirements. What is Hosting and what is a Domain name?
  • Are there any specific hosting requirements?
  • Will your website require a lot of web space or bandwidth?
• How important is Accessibility.
• Marketing, i.e. search engine ranking, offline advertising etc.
• Training: i.e. will you need training to help staff use a CMS?
• What is your budget? This can be broken down.
• What is your timetable? This can also be broken down into various phases or stages
• Are there any issues of Copyright?
• Finally, your name, position and full contact details.

The process of writing a website brief will help clarify and define your website goals which in turn will enable your designer to create the website you require.

Remember, the more information you can give your web designer the better. Happy writing!

More detailed information about planning a website brief can be found over at Business Link.

When I was a kid the automatic doors and the multitude of bleeping gadgets in Star Trek fascinated me. However, what particularly interested me was the way Kirk and Spock casually spoke with the ships computer.

We haven’t got intergalactic space travel… yet, but we do have automated sliding doors, and now thanks to Opera, we also have speech enabled browsing software.

Opera hit the news early last year with the release of their version-8 web-browser. The new software was now completely ‘ad free’ and boasted an assortment of smart accessibility features. One of these new features was called Opera Voice.

Opera Voice makes it possible for users to control the browser via a simple set of voice or keyboard commands; alternatively the user can take a passive role and allow the browser to read the text on a website aloud. We are going to concentrate on the latter, i.e. listening to web pages.

So who benefits from this ‘Star Trek’ type technology?

Opera Voice can be used as a supportive aid for those who have poor eyesight or visual impairments; it’s also a great tool for individuals who simply have difficulty reading. Furthermore it can be used as a practical teaching tool with People with Learning Disabilities or Special Needs.

How to get started

To start listening to websites instead of reading them, just follow these five simple steps!

1. Launch Opera 8.
2. Put your headphones on or switch on your speakers.
3. Enable the Voice option by selecting “Tools” > “Preferences” > “Advanced” > “Voice” and then enable Voice.
4. After enabling the option, you will be asked to confirm that you want to install the voice libraries. Select confirm to download the libraries (you will only need to do this once).
5. If the following steps went smoothly, simply highlight a block of text with your mouse and then press the V key on your keyboard.

That’s it; Opera should now read out the text that you just highlighted.

How to get Opera

The Opera 8 web browser is a relatively small download, only about 3.7MB and comes with a host of other accessibility features. To learn more about Opera Voice and to grab a copy of the browser, visit www.opera.com.

Requirements

You need a computer with a functioning sound card and loudspeakers or headphones. If you want to be able to give Opera voice input, you also need to have a microphone attached to your computer. Opera with Voice only works on computers running Windows XP or 2000, and you also need the latest Opera version with Voice.

Just one more thing… Beam me up Scotty!

Choosing the right colours for your website is probably one of the most important design decisions you will make; colour often plays a vital role in giving your website its identity. You may already have a set of colours in mind, perhaps you are going to use the company colour scheme or you might just want to use your own preferred scheme. Either way there are a few guidelines worth taking into account.

• Always use harmonious colour selections.
• Use an online tool like www.colorblender.com to create a balanced palette .
• Try to keep the primary palette down to three or four colours.
• Consider the fact that some users may be colour-blind, think about colour combinations wisely.
• Remember, colour is often associated with emotion and feelings.
• Make sure that the colours you choose reflect your websites purpose.
• Remember that computer screens can make colours seem brighter than they are in print.
• Try and remember to select colours for your audience, its their website after all, don’t just choose a colour scheme because you think its pretty.
• Finally, your colour scheme can mean the difference between a great site and an unusable site, please choose it carefully!

Photography and other images

The use of positive and creative imagery is an essential component in the design of any visually engaging communication tool. When used appropriately a relevant photograph or image can grab attention, establish a sense of trust, and communicate much more than a paragraph of text.

• Creative imagery plays a vital role in communicating your skills and services
• A carefully placed photograph can enable a sense of trust or relaxation.
• Photographs or images can support a visitor to make online decisions.
• Photography creates an opportunity for customers to use their imagination.
• Photographs are a great way of creating a visual metaphor.
• Remember Copyright, don’t just grab photos from other peoples websites.

If you are thinking about using photography to improve your website we strongly suggest you take a look at www.istockphoto.com, great photos that won’t break the bank.

You can read the full article over at www.mediascape.org.uk

In August 2005 Web Designer Magazine contacted Suspire Media and asked if we would like to contribute to a teleworking feature they were going to run in their next edition. The article was presented in the time-honoured Q & A format, read on to learn more…

WDM: Have you found that working for clients on a different continent presents its own set of challenges? Can you briefly outline any obstacles you had to overcome to complete these commissions?

SM: An obvious obstacle is time delay: when your client is based in the UK it’s very easy just to pick up the phone to clarify or discuss development issues. However, if your client is based in a different time zone that instant communication is not always available.

One solution is to make use of any brief window of time when both parties are at their computers. Making an effort to be online the same time as the client enables the use of systems like Skype or MS Messenger. Its then possible to discuss any development issues in real-time. The obvious downside is that the web designer is working late and the client has to start their day a little earlier (or vice-versa).

WDM: I would guess that without the aid of email and the Internet, these International commissions simply wouldn’t be possible. How important did you find that close contact was with these clients? I would guess even more important than usual as you couldn’t just nip over to their offices.

SM: To create any successful website its important that a trusting relationship is built up between the web designer and client, however, when your client is based on another continent it’s a little more difficult to create that important bond.

If your client is based outside your time zone communicating professionally via email becomes the medium to build that trust. It’s essential that every piece of e-correspondence expresses your thoughts with clarity and in a professional manner. Banging out an ill-formed email containing spelling or grammatical errors will make you look unprofessional and it will not put your clients mind at ease.

WDM: Does the web design community as a whole not really recognise geographical boundaries? By this I mean that anyone, anywhere can access a website. Do you feel that you’re a British designer or just a designer in the global community?

SM: We have found it difficult to see ourselves exclusively as a “British Designers”; we tend to view our work as a web designers in a global context. In terms of aesthetics, design and style, web design is a medium without geographical borders and this often produces work without a clear cultural identity.

WDM: Did you find that you had to learn any new skills when you began to work for overseas clients?

SM: Not really, however, as mentioned above it was important to take additional care when contributing opinions, thoughts and ideas via email.

WDM: How did you handle the currency differences? Did you have to make your pitch in the clients’ local currency? And did they pay you in pounds?

SM: We have generally agreed a fee in the client’s local currency; it’s fairly easy to quickly convert any local currency (within reason) into Stirling or vice-versa by visiting an online currency conversions system like http://www.xe.com.

When it came to payment we discussed two possible ways to transfer the fees. Either via our banks or via a system like http://www.paypal.com we opted to use the Pay Pal system as it saved a lot of time and took the hassle out of both parties making trips to the bank. In terms exchange rates and currency conversion, the Pay Pal system took care of this.

WDM: What advice would you give to other designers who are being approached for the first time to take on overseas clients?

SM:

• Make sure that when you price up the work you may be working a few unsociable hours, adjust your fees to reflect this

• If you decide to use a system like Pay Pal investigate how much they charge for transfers and if necessary adjust your fees accordingly

• Create and agree on a series of sign-off points or milestones. As you complete each stage ask the client to fax the signed form back to you. Repeat this for each section of the process.

• Before starting the work its essential to agree on two or three payment stages. As each stage is completed the client can transfer the agreed percent of the total fee.

• Finally, work hard on building a trusting, professional relationship with the client and take extra care with all written correspondence.