Over the coming weeks we will be writing a series of articles looking at the importance of maintaining a good design/content ratio on your new or exisiting website. Web designers often face the challenge of having to tone down a potential clients vision on how the new website will look, in order to achieve the results expected in the search engines. 9 times out of 10, nearly any look or functionality is achievable, but has to done in the right way to avoid increasing load times, using non standard code, or keeping the focus on good web copy.

A good example of this is when a client wants to use Flash within their website, as content on a flash website has to be scripted in the right way to be indexable by the search engines, and is normally best avoided if targetting a national audience in your SEO campaign.

Moving on we will be covering the following:

• Using cascading style sheets (CSS) to achieve the web design you want
• Best use of Flash in your website, and when you shouldn’t use it
• Image driven navigation vs. text links
• Accessiblity and compliance within your website
• Setting your websites goals and priorities
• Knowing what to expect from an experienced web developer
• Best practises in search engine optimisation

Others will be added as time goes on, but the above is an outline of what we would like to achieve with these articles.

Using cascading style sheets (CSS) to achieve the web design you want

Any web developer stuck in the dark ages of tables and image only design/layout should be hung! Using tables generates a whole lot of messy code, they completely defy all rules of content storage and retrieval by mixing design with content,  and above all, tables were not created to do this job! Why use tables for something when you have CSS, which can achieve a much tidier and better looking result.

For those who don’t understand what CSS is, here is a simple explanation:  CSS is a web techology/language created to layout and style web documents created in markup(the standard web code format). It is generally used to seperate document design from document content, which gives many benefits. The main benefit for most though is the fact that these style sheets can then be linked to with one line of code from your main document, meaning the likes of google/yahoo/bing only index your content, and not unneccessarily indexing design. This means they only have the information you want them to have.

For those with a technology phobia, please turn away now! I am going to show you the difference between the code you would use in your document to generate a 2 column layout in CSS, and then by using tables.

The CSS is not only more logical and clean, it is much shorter, making it infinite times better for search engine indexing.

The parts where it says “id=[name]” are calling design and layout elements from the CSS code where there will be matching entries to tell your web browser how to display that information.

The other huge advantage is when it comes to styling header tags. If you want the title of your content to be in a slightly bigger and bolder font, and maybe to have a different colour, you can tell the style sheet to display them however you want. The advantage being that you then wrap the text you want to display in “<h1>” tags. This not only tells your browser how to display that text, but it also tells google that that text is more important than any other text on that particular page, therefore the rest of the content should follow the same theme.

We will carry on looking into Design and Content in our upcoming series of articles.