What makes a good website presentation

The Web Design and Development Process

When we discuss website requirements, there are four recurring statements that we hear requested in almost every single instance.

1. We want it to look good
2. It has got to be easy to use
3. We dont want one of those frustrating home pages that says "click here to enter" or "skip intro"
4. Oh and by the way - we want to be at the top of Google!

A successful website does not happen by accident, Here is a summary of the various stages that make up a typical website development and how we acheive the above requests.

 

1. Keywords and keyword phrase research.

Prior to commencing a development, time is allocated to researching the keywords and keyword phrases that are actually being typed into search engines. This is to ensure that the page content of the website is optimised to match the actual words and phrases that are being used by your target audience.
All of the major search engines ignore keywords that are placed in the "hidden" meta tags and instead choose to read the page content to establish what the page is about.

 

Example of keyword meta tags in source code.

 

 

 

 

 

 

 

 

 

 

 

 

2. Separating Content from Design

 (or why you should not use a design agency to design your website!).

For a website to be effective on the search engines page content needs to be separated from the design.
Graphics cannot be read by a search engine so any text content within a graphic remains invisible. This is also a serious consideration when addressing accessibility issues for disabled users. A good website for a blind person is a great website from a Search Engine Optimisation point of view.

 

Here is an example of how NOT to make a web site.

All content on this website has been incoporated within the design, making it completely invisible to both search engines and visitors with impaired vision who may rely upon a text reader to read the page for them.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  3. The Design Stage. (Beauty is in the eye of the beholder).

A bespoke design is produced using Photoshop and a draft is presented to the customer for approval, this process can take between 1 and 3 days depending on the complexity of design. In direct comparison to the Jane Moore website, consideration is made at every stage on how to ensure that the page content is kept separate from the actual design.  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

   
 If there is to be any movement on the website, this is normally created separately using Flash and then integrated during the development. As Flash presentations suffer similar readability limitations to images, flash is restricted to use within a page and not as a whole page. A flash intro page should be avoided at all costs and is nearly as bad as a "click to enter" page (Jane moore website for example again )!

 

4.The development begins.

Once the design has been approved by the customer the development work will begin.
There are primarily two types of website development, static websites which consist of a collection of pages linked together and dynamic websites that require a database to operate. The type of development will normally be predetermined by the functionality required. Online shops and websites with content management systems (such as www.bnichristchurch.co.uk ) will typically require a database.

The recommended standard for coding websites (as recommended by the World Wide Web Consortium,  w3.org - the controlling body for the internet) is to use cascading style sheets (CSS for short) 

CSS enables the developer to separate page content from design and can allows site-wide style changes to be easily applied. The Spear Solutions Bournemouth website serves as an example of style sheets at work and shows how a design style can be changes instantly  www.spear-bournemouth.co.uk    

Example of a Cascading Style Sheet  

Taken from Trouville Hotel

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Example of a tables based development

Taken from the Jane Moore website (sorry Jane) 

 

 

 

 

 

 

 

 

   

Unfortunately older methods of development using "Tables" are still widely practiced by the majority of web development companies and especially prevelant on budget or "off the shelf" type websites. Using tables in most areas of development is bad practice and will affect your websites perfomance on search engines,its compliance with disability and accessibility issues and much more. 

Only 10% to 20% of development companies meet this standard, so unless you ask you wont be told, insist that your website meets a minimum level of XHTML 1.0.  There is a validation check that can be used on the www.w3.org website to check this.

 Trouville hotel Validation example www.trouvillehotel.com

 

Trouville Hotel completed website 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 A final part of the development is to add the page content and images to the website. To assist the search engines, The text should be semantically correct, ideally with the keywords and keyword phrases weighted by their importance. In HTML language <h1>This is a heading</h1> carries more importance to a search engine than a  <p>paragraph</p>. The page cotent should be weighted with the correct ratio of keywords and keyword phrases.

Additionally, it is a legal requirement that websites comply with the data protection act and the disability and discrimination act (a website is deemed a service and is required to comply) and we ensure that the website meets these requirements.

 

Hopefully this has given you an insight into the stages that go into the design and development of a website.

As a passing thought, remember that a website development should be seen as the starting point and good websites will evolve over time and the true mark of a succesful website should be measured by the return on investment it provides your business.