Website Design That Works Part II

In this final part of ‘Website Design that Works’ we will be discussing how to structure your website and learn all about CSS, web standards and usability. If you need a refresher of the discussions on the previous article please visit part one for a recap. Most of these lessons are used with Dreamweaver, so the basics of Dreamweaver are required. You can go ahead and purchase Dreamweaver here insert code. Now lets get started.

Test, test and test again.

Now that you are armed with a png file of your homepage its time to do some usability testing with it. What is usability? Well usability is testing your website to see how easy it is for people to use This doesn’t require a large budget or lots of people to do usability testing, just use your friends and family to begin with. You should test your site at every stage. Try to use a cross section of people of various age groups and backgrounds as these people will search and use your website differently.

Insert your png file into a html page within Dreamweaver and upload the page to your server. Then get some people to look at it and see what they make of it. Try not to tell them, if you can help it, what the website is going to be about. This will allow you to get better feedback as they figure it out from themselves. Any website should be instantly recognisable as to what its aims are. If the usability testers don’t get that instantly then you should make some modifications until they do. Ask them about the colour scheme you have chosen and just generally get their thoughts on the project. Don’t get too upset if some people say it sucks, as this is all good feedback that you can use to improve your site.

Creating your first page.

Once you have defined a new site and opened a new page in Dreamweaver its time to start creating your index.html page. Straight off the bat you should write your page title and description, for more information on this see the section on ‘what are keywords?’ in part one. Once you have written your keyword rich title and description add some Meta data.

Keywords Meta data

Inserting keywords into your code so search engine spiders can see them is really not that important to search engines these days. I would however still include them as you never know what the future holds and they may start holding more weight in the future. Don’t just fill your keywords description tag with words you think are relevant to your site only use words or phrases that are actually in the content of your webpage. This is why you should wait until you have all your content written before inserting your keywords. Make sure you separate your keywords with a coma.

Div tags verses tables.

Should you use div tags or tables? Well in my option you should use both by definition tables are used to hold tabular data, but sometimes tables are just the easiest way to go, for structuring forms etc. Just remember to add captions and comment tags to the table to help with accessibility.Div tags should be used for the most part partnering with CSS (more on CSS in a moment). Dreamweaver has some created CSS templates you can use to get started in structuring your website.

CSS the basics.

CSS, which stands for cascading style sheets, are used to add style to the elements on your page. You can create a separate style sheet and link it to your html file or embed it straight into your html document. You can assign classes to an element which can be attached to tags.

You can also assign ID’S or pseudo-class selectors which can only apply to one specific element. There are great advantages of using CSS rules as one change of the rule will take effect site wide, for example, if you wanted to change the font colour for the H1 tag you would only need to change the rule once and it will ripple through your site on every page that is linked to that external CSS file.

One thing to remember about CSS rules is your .css file can get a bit messy if you don’t keep things structured. You should always give your rules generic names so you can remember what it actually does and try to bunch rules together with a similar theme or that are assigned to specific pages. This avoids the process of locating them again becoming laborious.

It’s a good idea to put comments into your CSS file for example  /* home page table elements */ to give you a better idea of what’s going on and anyone else who might be making changes to your CSS file will have a better idea of what applies to what.

Dreamweaver CS3 has a new feature which allows you to move your rules up and down your file, which is a welcome addition. For further reading on the subject of css I would recommend you read the following books.The CSS Anthology: 101 Essential Tips, Tricks and HacksEric Meyer on CSS (Voices (New Riders)) 

Adding images.

Now that we have the structure sorted you can start by adding images in gif, jpg or png. In my option images are like flash should be used sparingly. Over the years I find myself using less and less images as “content is king” and people are for the most part visiting your website to read your great content not marvel at your pretty graphics. However there are times that images are needed to convey things that text alone just can not,  e-commerce websites for example.Always remember to add alt tags to your images. These should be no longer than a couple of lines, you should also include some keywords in your alt tags as again this will help with SEO. Another thing to note is if you can’t convey your image in a couple of lines of text you should enter the long description tag which will link to a file where a longer description can be found. This can be very beneficial the blind or people with vision impairments.

Content is King

“Content is king” is an old cliché in the website design world and like most clichés it rings true. I can’t stress enough about the importance of your content as this is the most important aspect by far when designing your website. Writing good engaging web content is so vital in your website project and will keep visitors returning back for more. At the end of the day that’s what you want, and if your are writing web copy to sell a product you should try to reach people on an emotional level and include lots of emotional words in your copy. This should be followed by a clear call to action. There is a great tool I discovered for inserting emotional words into your copy. Visit Paul Galloway’s site and use his tool to Replace Rational Words With Emotional Words.

For more information on this subject I would recommend you read this excellent book by Maria Veloso Web Copy That Sells: The Revolutionary Formula for Creating Killer Copy Every Time 

Navigate don’t Alienate.

Now its time to add your navigation. In my option all navigation should be an unordered list (please don’t use graphics for this as search engines are blind and will have difficulty indexing your site, also not good from a SEO standpoint). Placed mainly vertically near the top of page and horizontally down the left of the page navigation should be clear and generic and make it clear where you are sending people. Your navigation should be separated into two kinds: utility links and main navigation. Your utility links are links like sitemap, contact us, about us and your main navigation should be links to the main parts of your site i.e. Service pages.

If you want to add images to your links you should style your unordered lists with css to add background images and always remember to style your link a:link, a:visited, a:hover and a:active in that order. A good way I remember this isLOVE HATE.

Your links should also have a title tag describing what the links are. No need to add it to them all just the ones of most importance. Also for accessibility purposes they should all have a tab index to help people with mobility problems, who may not be able to use a mouse tab index code: tabindex="5".

A good tip for inserting tab indexes is don’t start your tab indexes with 1,2,3,4,5 etc. as this will cause you problems when you add links to your navigation as you will need to renumber them all. If you tab index them in increments of 10 for example 10,20,30,40,50 this will leave you room to add tab indexes without having to renumber. Another good idea here is to add access keys code: accesskey="k" for people using text browsers.

Whilst pressing the control key then your selected access key visitors can go straight to the page the link specifies. This is kind of like shortcut keys but remember to list these somewhere so visitors know what your access keys are. Don’t forget to test them as most browsers and applications use shortcut keys for different things and you don’t want to override them.Another good accessibility tip is to add a skip to content link nearest to the top of the page as you can insert a named anchor to your content and link to it.

This is also good for text browsers so visitors using them don’t have to tab all the way through your links to get to the content. It is also good for screen readers. Your website should at the very least validate to priority one of accessibility standards.For more information and further reading on accessibly I would recommend this book by Joe Clark Building Accessible Websites

Dreamweaver templates

Now you have got your all your page elements in place, a great feature Dreamweaver has is Dreamweaver templates. You can save a page as a Dreamweaver template and then create pages based on this template. This is a huge time saver as all you need to do when you make a change is modify the template and all pages will be modified instantly.

More testing

Now you have got your template created you need to check if your html and css validates, also check the accessibility of the page. This should be done early, as mistakes will be made and better to correct them now before things get out of hand.

To check your html and xhtml confirms to the W3C (World Wide Web Consortium) standards visit their html validater and run your page through it to see if it validates, if it doesn’t make the desired change that it specifies. Sometimes it can be unclear what the problem is so another good tool to use for this is total validator.  It can give you more incite to the problem. While you are at it you can go ahead and use W3C’s css validator tool to validate your css file.

Next thing is to check how accessible your website is. You can use the total validator tool to do this but another excellent tool for this is watchfire’s   WebXACT service.I’m afraid your testing isn’t over yet; you now need to test your page in all major browsers including Firefox, Internet explorer, Netscape and Opera to name the most popular ones. Also in even older versions if you can.

Text browsers are also needed as a lot of handicapped surfers will use text browser and your website should be structured to work easily with them. Opera has a great feature for you to simulate a text browser but you should go ahead and download lynx and test it in there as this is the most popular text browser.

Screen readers should be your next test but it can be difficult to test as these can be very expensive but you can try to get one on trial to get the idea. Generally if your website works good in a text browser the likelihood is that it will work ok with a screen reader, and don’t forget to check your pages on different screen resolutions as well.

Creating the rest of the website

When you are happy with all your testing you can now start creating all your other pages based on your Dreamweaver template. Just create a new page based on the saved template you have and repeat for all pages. Some essential pages to include are sitemap, contact us and about us. When creating about us and contact us try and not call them this if you can help it. For example call it ‘contact Hamish paints’ as there are millions of pages in Google’s index called about us (including some of mine). As for a sitemap you should include all the pages of importance in your sitemap.html page and give them a little description which will help your visitors and search engines alike.

Creating a file structure

Try to include as many of your pages as you can in the root folder and give them keyword rich names. Don’t include spaces between words use _ to separate words because if you use a space this will show up as % in the code. Keeping your pages in the root folder will help your website get indexed by the search engines quicker.

Further reading

These following books links are for purchasing in the UK to purchase them from the USA click here.The CSS Anthology: 101 Essential Tips, Tricks and HacksEric Meyer on CSS (Voices (New Riders))Web Copy That Sells: The Revolutionary Formula for Creating Killer Copy Every Time Building Accessible Websites

In conclusion Well that’s all for now folks, this is just some of the basic topics that I think will put your website in good stead for the future. If all this seems too daunting you can always use web site builder software to create your website.Please feel free to use this article on your website all that I ask is a short link back to me Website design, hosting and web builder softwareThank you and good luck.Kevin Gallagher.