- Home
- World Wide Web
- Introducing HTML
- Introducing CSS
- Dreamweaver Interface
- Top Tips
- Putting it all together!
- Design Principles
- Accessibility
- Useful Links
- Glossary
If you see this symbol in the text it is a Link to Glossary with more detailed information
Web Design principles & standards
Design principles
1. Consistent Navigation
Always have a good navigation structure, keep it the same on all pages. Visitors become familiar and remember instinctively the layout of your site.
Use a template page to keep the design and the position of elements consistent so as you go from page to page logos etc don't bounce about!
2. Good colour scheme
Did you know that a site visitor forms his or her first impression about your site within the first nine seconds of a visit? You want the colour scheme to enhance your site and it's content, not distract or confuse your users.
Colour gives users cues as to your site's navigation, grouping of content, importance, relationships, etc. For this reason, colour is an essential element of Web site design.
Always have a good contrast in your background and text. This is important particularly for accessibility reasons
Only use web safe colours, there are 216 cross platform web safe colours that ensure that all colours you define display correctly. We are not sure how important this is now, since more and more computers are equipped with the ability to display millions of different colors, but the choice is left to you.
3. Resolutions
Try and test your site in different screen resolutions, have a flexible layout where possible so your website fills all screens. Most websites are designed to fit screens from 800 x 600 and upwards resolutions.
4.Contact details
Always make your contact details easily available, it can be infuriating looking for a contact number or email. Give alternatives if possible, address, email, phone and contact form.
5. Relative font sizes
Never use fixed font sizes in your websites, another important accessibility issue plus people now have larger monitors and resolutions so the text can show much smaller so they may want to change the font size within the Browser. Using fixed font sizes means that the user cannot alter this.
7. Images with alt tags
Images need to have an aternative description . This is an essential for accessibility and also if there is a slow connection, it may take a while for images to load but it will show the alt description.
If you have an image that is only added for decoration you can leave the alt tag empty, but always put it there as below otherwise a screen reader will read the whole file name, and in the case below it would be meaningless.
<img src="../images/logos/picture_0123.gif" alt =" " width="15" height="15" />
8. Quick Homepage
Images can slow down a page downloading, don't put large or a lot of images on the homepage. Try and keep the homepage file size small, if it takes time to load people will go to another site.
9. Content
Remember that your content is the most important thing on your site! It should be relevant and up to date.
Use the simplest and clearest language appropriate for a site's content.
It should be written in chunks, making sure items of interest are easy to find and read. People tend to scan headings and text to look for information unlike a written document where most people sart at the beginning!
Don't put too much information on a page - a guide is don't have more than three pages worth of content as you scroll down
10. Website Identity
Make sure your website and pages have their own identity use your own logo and colours as you would with headed notepaper. Also make sure that identity follows on from page to page, let people know they are on your site!
11. Site map
Provide a text only site map. This provides a useful overview of the site assisting with navigation and searching. It was said to be particularly useful for screen reader and screen magnifier users and for those with reading difficulties, but could also benefit the majority of visitors to the site.
12. Moving text and images
Avoid blinking or moving text/images.
Blinking or moving text is very difficult to read for those with a visual impairment, dyslexia and learning difficulties. It is also very distracting for those who have difficulty with reading. Go easy on animated gifs!
Avoid scrolling text boxes
People with dyslexia often have short-term memory problems. When using a scrolling text box, they sometimes forget what they have already written. All the information should be on display at all times. This will act to reduce the demand on mental workload for most people contributing to the general usability of the site.
The scrolling marquee beloved of FrontPage users is now a deprecated tag and it is a Microsoft exclusive tag and not in the W3C specification.
13. Privacy Policy/Terms of Use Statement
It is always a good idea to have a Privacy Policy orTerms of Use Statement on your website. This makes it clear to visitors your policy on using any information, whether your images, logos are copyright. Whether they can use any of the information.
You need to make it clear that you are not responsible for outside links and that you have made every effort to check their suitability.
Also very important is letting people know that if they send any information through the website, email or form that you will not use or pass on their information to a third party.
You can find a simple example on the THS Science College website
14. Accessibility Statement
Another useful addition is an Accessibility Statement. It is a place to demonstrate that you are taking accessibility seriously and also provides extra information for visitors to your site - particularly disabled people who need to know about the accessibility of the information and services you provide.
Here is a sample of a simple Accessibility Statement
Web Standards
We have spoken before about web standards and the reason why they are so important to the future of the web and for any web site in the Brief history of the www.
Web standards are important particularly if you are using a WSIWYG editor as you will not see the code behind the pages you are writing unless you want or need to! Dreamweaver has a facility to check for web standards as you construct your pages. It is situated above the document window.
When you see the tick your web page should be valid but if you see the triangle with the exclaimation mark you now something is not quite right!
You can click on the arrow below the triangle to get more information and options and to the right is where you can validate the page or your entire site.
This is a very useful facility and much improvement on the older versions of Dreamweaver and other applications but they do miss out or not interpet some coding correctly. It is always a good idea to run pages through the W3C Validation service for page markup and CSS. You can validate files on a website or local files so you can make any changes before you upload them which is useful. They are fairly self explanitory.
As with all we are looking at today this is only an introduction there are more resources on the links and books page.
Next section Accessibility >>