Layout and navigation–Critical to website success

Layout and navigation are the key for attracting attention to a website. On a well designed website, individual elements, be it graphics or text, appear to be in harmony with and complimentary to each other. The quality of the layout dependents on the right mix of placing of objects, font size, empty spaces, and background.

Use background colour that enhances the look of the text or graphic on the foreground. Lighter shades are generally preferred and practically found to be useful. Avoid adding colours just to create shock value or add an element of surprise. In addition, the background has to be appropriate keeping in mind the focus of the site. A site dedicated for a medical facility may have white or light blue as the background giving an impression of purity, cleanliness, healing etc., while darker colours may not be suitable.

Placing of the text and the spaces in between may also give different impressions about the website. A website for a media company may display text and graphics in a random manner which may not be appropriate for, say a charitable organisation.

Use font size of 11 or 12 and a pleasant font type - I like Georgia, and avoid Arial type fonts.

Avoid the use of video clips and graphics that take an eternity to load and play. Be sure to add an option tab to skip the video or flash graphics if it is the first thing anyone encounters while entering your website. People would not want to go all over the show every time they visit the site. Do not use animations in the background that run without end, as they may prove to be a distraction in reading the text in the foreground.

Another important feature of a website is the navigation system. A good navigation system can be somewhat compared to finding one’s way using a map. If the clues and directions are foolproof the going gets easier, and more importantly, interesting. Keeping the user interested is the purpose of a good navigation tool. Imagine you have a site dedicated to provide information about all the ways and means for people to travel to exotic places and tips to find cheaper means of transport and low-cost lodging. A well-designed navigation tool will make it easier to gather information, as well as explore deeper and wider, for the possibilities of adding various places on to the tour itinerary. A link attached with each location name could lead the user to a page dedicated to photographs or video clips of each location.

A good navigation tool helps in moving from one page to another with minimum effort. It is generally advised that the navigation system be planned and finalised well before the website is developed. Many a times it so happens that a user does not find specific information on a site, in spite of it being shown consistently when a Google search is made using the keyword.

The importance of navigation can be well appreciated when accessing data from websites of popular organizations. Adding a navigation chart that can be accessed from the home page is advisable. A user may find it easier to find his way using the chart rather than exploring all options available.

Peter Brittain
Perth Web Design

Fixing Validation Problems Effectively

It is very important that you have a valid HTML document.

A valid document is important so that your page displays correctly on all browsers. You can use different validations that are available for the purpose. By using these validators you can understand the various errors that exist in your document and easily make sure that you remove these errors to make your page W3C compliant. These validators can provide you with a detailed description of errors that you can read out and eliminate.

When you submit a page for validating you generally get a window or an email that will explain the errors. You cannot have a perfectly valid page the first time so it is important that you validate your page. Moreover, with validation, you ensure that your page can load properly even when HTML versions improve. To effectively fix validation problems you can undertake the following measures:

• Read the full text of each error:
When you submit your page for validation, these validators provide you with a lot of information on errors. Though it seems like a lot of information, you should read through it thoroughly. It gives you many important information for elimination.

• Fix errors in order:
The validators read the HTML code sequentially. It is better to start fixing the problems in the same sequence. You may find yourself spending more time on fixing errors if you go from the last error to the first error.

• Re-validate after every fix:
Typically for errors of any kind a single error at the top can generate other errors after it. If you eliminate the errors in a sequence and validate them after each fix, you may find that some of the errors get eliminated without having to work on them.

• Go to line number and start reading up:
From the list of errors provided, you would know the line number for the error. Go to the line and find the error if it exists on that line or before that line.

• Line and column number are not necessarily accurate:
Though the validators give you a near accurate idea as to where the problem starts, it is not always perfect. You can take the information provided as a guideline and check the code around that line to find the problem area. Move up from that line if you do not find the error on that line itself.

• Warnings may be ignored:
There are some warnings that these validators sometimes provide you with if it is not sure about something in the code. You can remove the errors and have a fully valid page with the warnings. They are simply shown to indicate that there may be problems for some browsers or user agents. If you want, you may choose to correct those.

There are various validators available like HTML validators, XHTML validators and CSS validators. They validate what their names suggest and are easy to use. They use W3C to validate your HTML, XHTML and CSS specifications.

You may also make use of the Link Checker that can help you to find if the link is working or broken. There are accessibility validators also which can check your document.

Fixing validation issues is not difficult and makes your page compliant with most of the browsers.

Peter Brittain

Web Page Design

Good web page design is vital if you are planning on optimising your page for the search engines – and why wouldn’t you?

You should plan the design to suit search engines and your customers.

Some of the things that you need to keep in mind are;

Maintaining a consistent theme for your website plays an important role in how effective your natural website rankings will develop. A properly developed website theme will reinforce the users understanding of exactly what your company is offering.

Your website design should provide strategic navigation that does not permit your visitors to get lost within deeper pages, creating traffic fall out and abandoned shopping carts.

Create a navigation layout that is both search engine and user friendly. We want to focus on creating a clearly defined hierarchical layout that enables the average user to navigate easily throughout your site.

Peter Brittain
Slinky Web Design

Web Design And How To Create Great Content To Get Good Links

Regular readers on Earth Movin' Media would know that along with web design, I quite often write about search engine marketing techniques on this blog.

However, for more in-depth search engine marketing strategies - then I also write another blog covering internet marketing strategies and search engine ranking factors for web design and development. You will find it here - internet marketing blog

Writing articles is an art, and something that has long been used as an option to build relevant links to websites for the purpose of Internet marketing. The idea is to write good articles to create great content for search engines.

If you write and submit good quality articles with content that is relevant to your product or service, it can be seen as highly useful and therefore generate lots of relevant, high quality links to your website.

So how does this fit in with web design?

You will no doubt be asked along the way by clients to assist in their web marketing. Maybe not in a big design firm where you operate as a designer only. But, if you choose to go out on your own, you will find that you are requested to fulfill multiple tasks that you may not have expected to do.

So here we go.

Using good content, you can create good articles (& blogs) which can then create direct links to the website. This is done in the article BIO that you will be asked to include when submitting articles to directories such as Ezine Articles.

Creating good content requires writing on topical issues relevant to the website you want to link to.

• When you are writing content for article links, your focus is not only prospective customers but also other bloggers or writers who are writing similar type of content. When you have good quality content, you will find that many people rely on your content for interesting information. Similarly, if you put interesting content in your blogs and/or discussion forums you will also attract many visitors. This is noticed by other companies. Such companies will contact you for partner links. It would be mutually beneficial for both companies as the traffic that one pulls add on to the other’s links to a certain extent.

• You may select a topical issue on which to write. If there is some issue that matters most to your industry, a discussion based on it can become very interesting if handled cleverly. Such a discussion can give you a great insight to the industry, as well as have some new ideas or opinions about the issue in question.

• When you develop content, ensure that it becomes conversational. When people are tempted to participate in discussions and when your conversations become more popular, you find a large number of visitors. With the added traffic to your website, you will find more and more companies approach you to share links. You have to be diligent in selecting only the links that will add value.

• Other companies can be happy to share links with you if you have good quality content. Write your articles correctly and precisely. When other sites find linking to your sites beneficial for traffic creation you can well feel assured of getting their traffic as well. This helps in improving your page ranking.

• When you create content, pay attention to the basics. The use of title, headings, spelling, and grammar is vital. Break articles into meaningful sections, word counts, etc. Moreover make sure that you do not try too hard to promote your product or service in the articles.

You should be able to submit your articles to different publishers. Try submitting to social networking and social bookmarking sites such as digg. These sites can potentially deliver huge traffic and great links.

Peter Brittain

More technical tips for increasing your website loading time

Website design and page loading speeds

The total number of HTML files on each page should be as low as possible although most browsers can multithread. Minimizing HTTP requests is a key to web page loading.

The total number of objects & images should be a reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.

Keep external CSS files per page to a low number and should be in the HEAD of your HTML document. They must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.

Consider reducing total page size of your web page to less than 30K to achieve sub eight second response times on 56K connections. Pages over 100K exceed most attention thresholds at 56Kbps, even with feedback. Remember you still need to cater to dial-up connections.

Make sure external script files are either one or two. Combine, refine, and optimise your external script files.

Total size of your pages HTML file should be less than 20K which will allow your page to display content in less than 8 seconds, which is the average time users are willing to wait for a page to display without feedback.

Peter Brittain
Slinky Web Design

The use of whitespace

Whitespace is the space between elements in a piece of work. More specifically the space between major elements is macro whitespace.

Micro whitespace is the space between smaller elements - lists, captions, images or between words and letters.

Designers use whitespace to create a feeling of sophistication and elegance for upmarket brands. Coupled with the intelligent use of font and photography, whitespace is seen all over luxury markets.

Cosmetics advertising embrace the extensive use of whitespace in marketing material to tell the reader that they're stylish and superior in quality.

In the case of direct mail, material needs to appear down-market to work and adding whitespace to this type of design would lend an undesirably upmarket quality.

Less whitespace = cheap
More whitespace = luxury

A lot more goes into branding than just whitespace, but as a project lands on your desk for a luxury brand, it’s likely that the client and their target customers will expect whitespace to align the product with its competitors.

Active and passive whitespace

Whitespace is often used to create a balanced, harmonious layout. One that just feels right.

It can also take the reader on a journey through the design. When whitespace is used to lead a reader from one element to another, it’s called active whitespace.

Once you know how to design and manipulate the space outside, inside, and around your content, you will be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light.

How To Avoid Costly Mistakes When Designing Your Website

Designing a new website or making alterations to an existing one is fraught with the possibility of mistakes and sometimes even blunders. Therefore it is important that you take certain precautions before plunging into your web designing. Failure to do so may land you in delays rather than in quick success. The following guidelines would help you avoid the unnecessary fuss and frustration!

Know your prospective site user:
Acquire a good understanding of the expectations of your prospective site visitors. Analyze their needs. What do visitors of such websites look out for? What kind of websites do your prospective customers expect to see? What should be the layout and design of your website copy? Does it need photographs and graphics? Will you need to alter the content from time to time? A thorough customer research will answer all these questions

Pay for what you need:
Don’t overspend your budget. If your business is small you don’t need a lot of bandwidth and web space every month. If you wrongly believe you do it will cost you quite a lot of money. Go for something small that is economical and yet useful. It may turn out to be faster too.

Avoid complicated techniques:
As far as possible avoid using complicated techniques such as frames, custom mouse pointers, sound, doorway pages or any other technology that asks users to download rare plug-ins. Usually such techniques scare away most Internet users as they find that it is confusing and takes a longer time to download leading to a complicated navigation.

Peter Brittain
Slinky Web Design