Before You Begin - Where to start...

This guide is intended for people who are building a new website from scratch. If you are unsure of where to begin, first think about some of the issues discussed here.

Do you want to play around with our demo site? Contact Netagi for details.

Practicing with the Aplinx Demo site allows you to figure out how things work without affecting your own website. When you're confident, you can edit your own site like a pro!

1. Choosing a Design

One of the first steps in creating a website is deciding on its design. Without the right look and feel, visitors may not even consider the content. Settle on a base design to build on.

Use of colour

Colours hold different meanings to people in various cultures. Red is considered an angry, hot colour in most western countries for example. However, in China, red symbolizes positive aspects of life such as happiness and wealth, and is associated with good luck. Therefore choose a colour combination that will not offend your visitors.

Text contrast:

Text is harder to read on a computer monitor so it is important to use colours that will not make it harder for your visitors to read. Do not use bright colours on a light background as the text will be virtually invisible and it will create too much effort to read. Similarly, light text on a dark background is also difficult to read on a monitor. Most people prefer to view black text on a white background so try dark text on a light background so your visitors are comfortable.

How much text

As previously mentioned, people generally prefer reading numerous pages of text on paper rather than on a computer monitor. Therefore, try to avoid presenting the visitor with several pages about you product or service. Get directly to the point and briefly discuss what your business is about. Try not to add unnecessary information and risk losing the visitor’s interest.

The headlines:

Headlines are very effective if they are carefully worded and strategically placed on your page. The headline of the home page should state exactly what the main benefit of your website is to successfully capture visitors and hold their attention. The remaining headlines will list your other rewards.

Font

To have a particular font applied to the text on your web pages depends greatly on whether that font is installed on the computer where the website is being viewed. As not all fonts are available on all computers, we therefore recommend the use of the following generic font-families. These families are made up of similar style fonts, usually one representative in each that is available on the various operating systems (Windows, Mac and Linux). If the first font is not available on the user’s computer the next will be used.

Verdana, Arial, Helvetica, sans-serif

It is recommended that one of these font families be selected to govern the overall appearance of your website’s text, giving a uniform finish to all headings, menus and page content.

Images

Images are often used to evoke emotions or entertain people. The right image has the potential to add meaning to both your brand and the presence you are building on the Internet. You may already have an image or logo that is used in your companies advertising scheme in which case it would be preferable to include it in your website. If not, you may choose to incorporate an image as part of your page design that will be recognisedin conjunction to your company. This will also assist people in recognising and identifying with your website.

For your base page design/template, use no more than one or two images. This will be the image/s that will help people recogniseyour business and web presence. The use of images in your page content will be discussed later.

Upload speed:

One negative aspect of including images on your webpage is the upload speed. The more images you include on a single page, the longer it can take for the page to download. Images upload at different speeds depending on the computer your visitor has. It may become irritating if the image takes longer than 30 seconds to load and this could result in you losing them as a visitor. One way of avoiding this is to keep each individual image as small in file size as possible, and if you wish to show multiple pictures per page, use thumbnail images as they are small in size and take less time to upload.

Providing information

A positive aspect of images is they are an interesting and efficient method of providing information. They can also potentially evoke certain emotions in people, proving a beneficial effect for your website if the right emotion is induced.

To enhance the ability of your images to provide information, create ALT text. Alt text or Title text appears when a user hovers their mouse cursor over an image. It will also be read by screen readers (for the visually impaired), enhancing and perhaps reinforcing the information available on the page.

Navigation

Navigation menu’s can be arranged in a number of ways. A common form is a simple horizontal bar across the top or a vertical bar along the side of the web page. Alternatively, the navigation can be arranged in a more exciting shape, possibly on the side of the page along a curved axis. However it is recommended that you try not to deviate from the norm because it may become difficult for visitors to understand and use. Just remember, clarity is more important than excitement for navigation. Look at what other websites use and develop something similar so it is easily recognisable. Whatever system you choose, it is important to keep the navigation consistent throughout your website so as to not confuse your visitors. To do this, simply use the same or very similar design template, including an appropriate menu object, on all pages.

2. Website Navigation: Arrangement of Page Names

The navigation menu commonly has links directing visitors to key areas of the website. These are items with short, concise names such as “Home”, “About us”, “Contact us”, and a couple of links that relate to your company for example, “Technology” or “Products”.Try to keep the number of main links to a minimum – seven to nine items is considered the maximum number. Any more and the user is more susceptible to get lost. For additional pages that are required, they should be sorted under these main links as sub pages.

Website navigation is an important tool. If it is presented in an illogical way, it can confuse and potentially lose a client. The navigation toolbar has been discussed above however, navigation also occurs within the text and around the text on other parts of the page. Once you have finished your navigation system, test it thoroughly before you open your website for public use. Make sure the links are not ‘dead’. That is, they do not lead to pages ‘under construction’ or pages that are not in use.

Also, if you have pages that are not supposed to appear on a menu, make sure they are hidden. For example, a user should not view a “Thank You” page by selecting it from a menu. Instead, this type of page should really only be viewable when a user has submitted a form or completed a survey.

Lastly, let your visitors know where they are at all times. The web is a confusing place and it is easy to lose where you are. Visitors always want to know where they are to make sense of what they are looking at. Therefore leave some sort of visual trail so they can see where they are. You can do this by changing the colour of the current page on the navigation bar.

What information does your visitor want from your website?

People visit your website in order to obtain information about your company. Typically, they will have questions in mind that they will require answers to. Try and predetermine what these questions will be and strive to answer them all in a precise and comprehensive way. You may also wish to include a contact form, where visitors can request more information.

Menu Structure

Everyone groups information differently; alphabetically, or by similarities are two methods. If you are unsure how the structure of your website should work, try to compile topic cards that represent areas or pages that need to be covered in your website. Employ several mock users and get them to arrange your topic cards into groups that are logical to them. Analyse the different groups and use or adapt one or some of the groups to form an appropriate sequence for your website.

Arrange the topic cards into a flow chart to represent the structure of your website. However, ensure the links between concepts from different areas of your site are clear and not blurry, otherwise you will lose your visitor to a more comprehensive website on the same topic. This also applies to the importance of organization and comprehensive content. Make sure the most important topics are easy to navigate to.

Creating a diagram out of the cards will display the pages and the links between each page, which will make it easier to create the website. It also helps to be able to visualize the whole site and enable you to make temporary changes before committing them electronically.

Make a list for each page represented in the flow chart. This will include the information in dot points, and any effects such as images, font style, sound etc. and controls such as search buttons. These lists will show how much room is needed on each page and ensure nothing is left out.

There are a few different structures that can be used to build a website.

• The simplest way is to organize your pages sequentially. This can be done in a number of ways ranging from alphabetically to chronologically, to broader subjects leading to specific subjects.
• For complex organizations, a hierarchical structure is appropriate. This is the most logical structure for websites as the content pages branch off the home page, which would therefore be at the top of the hierarchy. Furthermore, it is the easiest structure for businesses to use as they and their users are familiar with hierarchical diagrams.
• A net structure is beneficial as it places very few restrictions on the order of information. Concepts can connect to several other concepts rather than just one or two. It places few restrictions on the direction the user goes as there is no set order in which the pages are linked. However this structure can become quite confusing for users due to the absence of direction.
   

Arranging Under Headings

A clear and orderly way of presenting this information would be under headings. This way, the visitor knows exactly where to look for the information they want. This is also a good approach because you are forced to write about what the heading is concerned with hence cutting out the common mistake of adding too much irrelevant information.

Pages and content pages

When creating content pages it is important to be consistent with a common design amongst the pages. This will help the visitor know they are still in your website and easily recognise how to navigate their way around it. If you require more than one ‘template’, try to keep them consistent by using the same theme, colour scheme or menu placement.

For a subpage, information is the key. They specialize in single topics and branch off the home page. However follow the same rules as your home page. Present your information under headings so you do not deviate from the topic and provide only the important information.

The use of links

There are a number of ways of providing links in a webpage. The most obvious is the navigation menu which has been discussed earlier.

Hyperlinks are another way of linking. Hyperlinks can appear on the side of the webpage which can navigate to sections of the current page. These make it easier for the visitor so they do not have to scroll down the page looking for what they want. Hyperlinks can also appear as inline text links within the main content. Underline and colour are often used to help identify when key phrases or words can be clicked on. You can even change the text colour when the user’s mouse cursor hovers over the link.

It is helpful to know where you have already been in a website therefore many websites colour the hyperlinks that have been visited differently so the visitor can filter out where they do not want to go. Think about what type of colours and styling will work best for the inline links in your website.

How many clicks are too many clicks?

The preferable number of clicks from the home page is 3 or 4 clicks. Arrange your pages in a handwritten storyboard to visualize how many pages are on one branch from the home page. If one branch is more than 4 windows long then assess what purpose the following pages serve.

When is navigation too deep?

Information may start to become irrelevant after you have clicked 5 pages past the home page. Ask yourself what the purpose of each page is and if it is not crucial to the overall aim of the website, remove it. For example, if the visitor clicks on a link about your website, there are options to choose from such as a list of the staff, the history of the business and a bit of information about the founder. Consider using a dropdown menu – this would show such sub pages immediately, without clicking, and would be hidden again when the user wishes to read the main text on the page.

3. Creating Your Home Page

Your home page is the heart of your website. It lists the primary functions of your website, and first-time visitors should be able to identify the main function of your website from the home page. For a business, the first impressions of your home page are crucial as they may determine your success in the web. The home page should look clean so visitors aren’t confused on arrival. It acts like the front cover of a brochure; if the cover is too busy, people will not bother trying to decipher the contents.

The home page will act like a signpost and guide visitors to various parts of your website. Therefore, the hyperlinks need to be clear and simple. The design of the home page may be different to that of the content pages. The company logo can be larger and the company name may be more noticeable.

There are a few approaches for designing a home page:

• The home page can be used primarily for columns of links connecting to feature content pages. These can be in the form of hyperlinks or a mixture of hyperlinks and images. This is an efficient way to direct visitors to exactly what they are looking for without having to read information they are not interested in.
• Home pages can contain mainly news. It is a useful way to make announcements on various topics to both the visitors and to employees. This approach is effective for producing repeat visits as users want to keep up to date on the latest news. It is important to put the news updates in the same section of the page every time to avoid confusing visitors.
• Large businesses or companies usually offer a lot of information in their websites; however, visitors generally visit a website with a specific goal. Therefore the home page should list broad interests and become more specific in the content pages. This way the home page is not cluttered and bewildering but instead guides the visitors to the information they seek.

Below, you will see a few basic designs that may be used. Please keep in mind though that many businesses choose to incorporate features of each design.

Here is a list of essential items to include in your home page:

• Your business title. That is, the name and logo.
• Your contact details must be included either on the home page or alternatively, a tab from the navigation menu must link to a content page providing the details. These include your email address, postal and web address, and phone and fax numbers. If you wish to hide your email address from the public, instead you should use a contact form – delivered to the same email.
• A navigation menu linking to other pages such as ‘About Us’; ‘Contact Us’; etc.
• Links to more specific information about your company or product. Provide adequate background information to help visitors decide whether the link is useful for their particular needs.
• Provide a copyright statement to protect your work – often included at the footer of the page.
   

Sub Sites:

For larger companies, there may be a lot of topics that need to be covered in their website. If you include all these links on your home page / main menu it will be too cluttered and the complexity may drive visitors away. Therefore it is useful to direct visitor to sub sites that have sub-menus for specific areas. You may advise for visitors to link there directly and the sub site will become an alternative specialized home page.

As an example, you may wish to display information about all of your clients on the website. If you have a large number of clients, including all of their business names on your home page would cause clutter. Instead, think about using a menu link – call it “Clients” – with additional (individual) sub pages for each client displayed on a dropdown menu below this.

Another example: perhaps your company produces computer games. Each game might require several pages describing its features. Linking to a Sub Site, with differing menu structure (specific to the individual game) could clear the clutter.

Keeping a visitor on your website

Give the visitors what they want. Put certain phrases that would appeal to them in an obvious style; make the words bigger, in another colour, or put the key phrases in a title. Grab the visitors’ attention so they set your business apart from the others.

Make sure it is easy to understand and visitors can easily navigate their way around without any confusion.

Do not confuse a visitor – short, sharp and to the point

Once you have got the visitor, do not lose their attention and interest. The content may well act as a preview of what dealing with your business would be like. Try not to make it confusing. Do not overload visitors with useless information as they will not know where to start. Also, if there is too much text, the visitor may stop reading and miss a crucial part which could be beneficial. Just the essentials will pull the attention of visitors and entice them to enquire further. However be careful when you are deciding what to remove from the content. You must provide all relevant information so visitors can learn everything they need to know. They can learn the ‘other’ information if they then decide to contact you.

Search features

Many users do not want to have to find their own way to the information they are looking for. They prefer to be taken to it without the fuss of navigating their way through a website. Therefore a search feature enables them to type in what they require and saves them searching link-by-link.

When to use flash

A flashing object quickly attracts a visitor’s attention. However the downside is it can draw their attention away from the main point of your website. It can also add considerably to the download time of the entire page. If you do intend to include flash on the page, make sure file sizes are optimized.

You can make text, pictures and logos flash. However, avoid altering paragraphs and leave them plain; a visitor needs to focus on your message without distractions.

Another downside is the difficulty in altering flash. If you are creating these files yourself, there should not be a problem, but when a third party is required, consider the expense in updating a single line of text. If constant changes are required, this can add up. The beauty of the Aplinx system is that it gives you the ability to edit your website instantly.

When to use animation

The design style you choose may govern the number of images you use. Your visitors may not be keen readers in which case, they prefer visual stimulation from animation. Pictures also have an ability to engage with the visitor and say exactly what needs to be said without words. However there are visitors that prefer reading and seeking for exactly what they want without animations clouding their way. Thus, there is a possibility they have the graphics capabilities turned off so the page loads faster. Therefore include all the relevant information in your presentation.

Another issue with animations is that they slow down the loading speed. Whether they are made in flash or as animated gifs, the more frames an animation contains, the larger the object will be. This can be frustrating for visitors and may cause you to lose their attention. Therefore you must chose between a slow loading, aesthetically engaging pages, and a quick loading but optimized content. This decision will also depend on the audience you are directing your website at.

The use of sound

Music can set the mood of your website. It can draw your visitors in and put them in the mood for browsing your site. For example, fast paced music will produce excitement in the visitor. There are many different paths you can take with sound. You can use a song, a speech, a sound effect. Another positive aspect of sound is, unlike pictures, it doesn’t need supporting text to explain it.

A negative aspect of adding a sound component to your website is it may irritate the visitor. Having something playing when they are trying to concentrate may be distracting and they will turn their sound off in which case, it’s a waste of time adding sound. Another set back is it might cause the web page to load slower which could potentially cause visitors to become impatient and leave.

4. Creating a Content Page

Content pages focus on specific topics. Visitors are sent to content pages after clicking on a hyperlink so they can learn about a particular subject or part of your business.

You want to spend a decent amount of time creating the basic design for the content pages (if using a variation on the home page’s template) as they will all be basically identical. If you decide to change the design of one page, when using a single template, you will not have to alter all the pages. For a big website, if all pages have differing designs, altering and updating each page individually will require many hours of work and money.

Organising content

Each content page will deal with a specific topic. Work out what relevant information needs to be said in relation to that topic; make sure everything is covered so your visitors are left satisfied. Furthermore, the information needs to be organized in a way the users will comprehend.

Headings and Subheadings

The web page heading is important as it is usually the first thing people look at. Therefore create a heading for each content page that will draw your visitor in. Make it bold so it is noticeable.

Then arrange all the information in each content page under subheadings. This will help structure the page and make it easier for visitors to find what they are looking for.

Keep a consistent approach to headings and subheadings to help your visitor navigate through your website with ease.

Make Text Scannable

Under the main and sub headings, use concise paragraphs, bullet points (lists) and tables to help visitors scan the text easier. If they can find what they are after more efficiently, this should make their stay more enjoyable.

Use of images

While there are lots of exciting and complex images available, remember a simple image can be more successful as it can have more of an impact.

Any image, logo, link or other essential elements should remain consistent amongst all content pages.