Categories
Search

Advanced Search
Article Options
 »  Home  »  Internet  »  Web Design
A Framework for Deciding Website Shape and Content
Web Content Provider Michael Hart | Web Design | Unrated

A Framework for Deciding Website Shape and Content

Information published on the World Wide Web is typically written in ascripting language called HTML (or Hyper Text Markup Language), which consists of text files (ASCII) with special "tags" or codes that look a lot like old-fashioned typesetting code which a web browser knows how to interpret as multimedia pages of information.

[1] The site’s purpose and goals:

To plan new pages, their purpose must be defined; as you plan the revisions or new sections of a Website, remember each webpage should have an objective, but within the constraints of the Website's purpose. Remember KISS (keep it simple, stupid), the mantra by which you should live. This may not always be possible, but should be the benchmark against which to test design and content principles.

[2] Planning the documents:

HTML documents (Web pages) can be either visitor centred or author centred. The former delivers the content or information solely geared to what the visitor wants, and was the original function of the Internet.

Author centred, on the other hand, seeks to impose on the visitor the information the author wants to provide, even if the visitor did not know he.she wanted it - i.e. self marketing.

Any site planning should identify and list the type of information in each category to be provided, so that the shape of the site can be balanced. In general, the lack of such balance can make a site pointless - a wholly author centred site may never be visited, whilst a wholly visitor centred site may be popular but deliver insufficient value to justify its existence.

[3] Organising documents:

Before you start designing HTML documents, make a plan for organising the information you wish to present on the Site.

Information on a Website is organized into HTML documents, known as Web pages. Since it will frequently be the case that you have more information than will reasonably be presented as a single page, you need to decide how to divide information into logical pages and then link those pages together into a sub web site related set of linked HTML documents).

Hierarchical structure:

Where main pages are followed by subpages. There is, effectively, a Home page for each topic, containing its headline points, each of which may link to more detailed information or information of a lesser importance which makes up the second level and so on.

Linear structure:

When a set of related pages are connected in a sequence which restricts the ability to move through the site. When the visitor finishes one page, he can go to the next page, or back one page, but is given no option to jump.

This can be very frustrating, and should be used only where the rigid order is important, as in step by step instructions, (e.g Windows Help File format) or completion of on-line order forms.

If you are trying to attract the casual browser, this format should be avoided in those pages which are intended to catch the interest, or provide a sample of the site, nor should it be used where the site is providing information for reference purposes, e.g contacts, products, database.

In practice most linear arrangements are merely a part of a larger site, and will provide a constant set of links or buttons along the top or side of the page to allow the visitor to escape

Webbed structure:

A webbed structure is one which allows any page on a site to link to any other page, without any logical framework. This can be through use of a common set or extensive buttons or links on each page, or, more sloppily, by hyperlinks within the text itself.

Such structures can be very disorienting for the visitor, and should be used only where relevant. A classic use is in glossary or in indices, where the originating page is properly organised for searching, and clicking on the relevant entry takes you to the relevant page, and there are links within that page to all related subjects.

Mixed structure:

A combination of one or more of the above structures to form a larger one.

Once you are clear about the content the above types of structure must be applied to ut. To determine which structure best suites the content you have decided to provide, draw an organizational chart by hand, of your site, and then link the various parts together to form the flow between them, as shown in the above examples. This should show how the pages are grouped and how they will be linked to one another.

Here are the rules and conventions for names of files:

1) All file names should be no more that 30 characters long.

2) All life names should be written in lowercase (ie not “LIKE THIS” but “like this”.

3) The file extensions for HTML documents must be ether “.html” or “.hmt”.

4) The initial page of a website (the first page that is loaded) must be named ether “index.htm” or “default.htm”.

On most web servers you can designate one standard name that is the "default" web page for that directory and on most systems that name is “index.html”. This first page can have any name but if this is the case, you must type the this name as part of the URL, but if this page is called “index” or “default”, it will be loaded automatically. (This also prevents the directory index from being displayed)

5) If you use a special editor program to create HTML files, you will not see the ".html" extension on the desktop file name, so in that case, you would chnage the file name to index because under the hood, the computer knows that there is a ".html" at the end.

[4] Planning pages:

To develop a plan for the pages, create if one does not exist, a word processing document that contains the following information:

1) Who is your target audience and their background, skills, interest, values and knowledge. Study your target audience. It may help to look at some of your competitors sites to see how they appeal to their target audiences.

2) What are they doing right? What are they doing that needs improvement? List your audience background, their interests, skills, values and knowledge?

3) What is the purpose of the page? To educate, entertain, provide unique help or information to others, or a combination of these. Again, look at other Websites on the Web for ideas.

4) How dynamic is the content of the page, and how often is it going to need to be updated (daily, weekly, twice a month, or monthly)?

This document should also generally describe: 5) The destinations of the hyperlink (URL), images, and other related files to be used for each page.

6) The location and type of standard header, footer, navigation scheme and text files for each page.

7) The colours and background colour, text colour, link colour, and visited link colour.

8) The Website style

[5] Design principles:

The pages your design or substantially modify should achieve the results stated in the respective section of the Website plan. The following section is concerned with design.

When designing a page it is very important to think about what you are trying to achieve with the site, what is it that visitors want from it. You need to consider your audience when designing pages for the Web. Make sure your visitors can navigate the site quickly and easily, and make sure they can find what they want.

In is important to note that you may have to adjust your writing style for the Web, many to get the information across as quickly as possible.

Web usability studies show that Web readers tend to skim over information rather than read it. Mainly use to it being harder to read much on a computer monitor and that the reading speed on a screen is about 25% below reading the same material on paper. Before designing pages, consider the following design principles:

1) A page should be useful.

2) All the elements of a page should have a purpose.

3) Avoid the use of multimedia (background sound, Quick time movies) unless there is a very good reason.

4) Technologies should integrate seamlessly into the existing Website structure.

5) A page should operate quickly, each page should download within 15 seconds.

6) A page should be structured to allow visitors to navigate with ease.

7) Graphics should be kept to a minimum to allow fast loading of your web pages.

8) Use standard headers and footers for each page.

9) Notwithstanding the long term aims of the Website or subsections of it, make sure anything that goes against ease of use and speed does so for a reason.

10) Use the same background colour throughout your site. (White is most common color)

11) Use the same colour for your text throughout your site. . (Black is most common color).

12) When linking to large files, always give an indication of the file size and if possible the time to download on various modems.

13) User help should be provided when elements are used in a nonstandard manner.

14) Use a common font size and colour for specialised text segments.

15) Establish site wide consistency rules and standards to be followed from the user-interface design viewpoint.

[6] Web design hints and tips:

When placing information on the Website or adding additional web pages, consider the following:

Content of document:

People return to a Website because the site is constantly updated with new and relevant information, not to see flashy graphics, or amazing active pages.

When putting anything on a document, including multimedia, the most important considerations should be the need, relevance and the context. Why is it needed? Why is it needed here? Will the users have appropriate tools to view it.

Advanced technology:

Use of any technology should serve a purpose. The approach should be use of a technology and not the other way round. When addressing the use of nonstandard technology consider:

[a] Where is a certain technology applicable, and why?

[b] Does it help solve any existing problems?

[c] Does it offer any specific advantages?

Except for the purposes of marketing and promotion, functionality (ease of use) should take precedence over all other considerations of technology.

Use of advanced HTML to achieve complected effects requires more considerations as HTML becomes les "standard". The most important of which is that unlike standard HTML, many of these technology are not platform indecent and will cause problems for visitors with bowsers that do not support a give technology.

Pages should be developed tacking into consideration the effects that advanced technology (such frames, DHTML, Jave applications and scripts) will have on bowsers that do not support a give technology.

A good web page does not restrict someone from content simply because they are using a different web browser, it is a very good practice to use only the standard platform indecent HTML endorsed by the World Wide Web Constortium

Appropriateness:

Implementation of an idea using a certain technology should depend on it's usability and it's feasibility not because it looks promising and only if there are the resources to implement it.

Spelling:

Spelling errors will virtually destroy the credibility of the business Once completed writing the content, run a spell checker over the text.

Animation:

Placing any animation on a Web page can distract attention from the rest of the material on the page. Unless the animation deserve that much attention animation should be avoided.

Do not use animated Dynamic HTML effects to move images and text around the screen for the sake of it DHTML is best used to present an interesting interface to condense or hide information until it is required.

Scrolling Status Text:

The status bar is for status messages, for example: the location of the link beneath the mouse pointer, the progress of a page download. People do read these messages. It's unprofessional to hijack this area of the browser for a gimmicky scrolling message.

Java Applets:

Java can take a while to start up in a browser. And should be used with care as if a site is the first visited in a session it will cause a reasonable delay to the visitors. (A Java applet is a small Java program that is embedded in a HTML page)

Platform independence:

Proprietary or deprecated effence should only be used where they do not cause errors in other browsers. Proprietary tags, or HTML extensions, are by definition supported only by one browser, for example Netscape's

<BLINK>, <LAYER>, <ILAYER> tags.

It is strongly recommend that the

<BLINK> and <marque> effects are never used. They distract attention away from the rest of the page, they can't be turned off, and can become annoying after only a short while.

Page Length:

Try and keep pages under 2 scroll lengths long. Nobody wants to read all the way down a huge page to find what they're looking for. This applies mainly to the first page of your site. Break the page down and link to these pages, so visitors can just click the link they want and then view that page.

Use of HTML Frames:

Frames break the unified model of the Web and introduce a way of looking at data that has not been well integrated into the other aspects of the Web. Therefore, they should either be used with caution, or not used at all.

Broken links/images:

Broken links and images are an instant turn off. There's nothing more irritating than finding a link to a page that sounds great, only to get a file not found error. Images are just as bad. Use link checking software which you can find on shareware sites, or use a one off free check at the Web Site Garage.

Feedback:

Developing methods for users to interact with your site is essential for creating a good web site. User feedback is a very important to improving your site. As a minimum provide your e-mail address so that users can provide you their comments, suggestions and opinions. Make sure this is included on each page.

Encourage Bookmarks. Add a note to your pages reminding visitors to bookmark your site. It increases the chances that your visitors will be back.

© I am the website administrator of the The Wandle Industrial Museum (http://www.wandle.org). Established in 1983 by local people determined to ensure that the history of the valley was no longer neglected but enhanced for the benefit of the community.

Source: http://www.websition.com/


Comments