Web Design Training Blog

In the UK it is now a legal requirement to make web sites accessible to people with disabilities, particularly those with visual visual impairment and those who are blind.

A useful starting point and reference for this aspect of web design would be the W3C page on “Evaluating web sites for Accessibility“.

Some very basic techniques for ensuring that web pages meet with the accessibility standards would include:

• Ensuring that images have alt statements
• Fonts should have a relative rather than absolute size measure. This allows them to be increased in size on the screen using the browsers increase text size capabilities.
• When expressing the size of fonts in style sheets do not use pixels (an absolute measure). The measure that I use is “ems” which is fully scalable. Find out more about ems. Definition of ems
• Ensure that there is sufficient contrast between text and its background. Find out more about colour contrast.
• You can check your web pages using this accessibility checker.

Another aspect of accessibility is the way that the web page functions for people who are unable to use a mouse. It should be possible to use the tab key to reach and operate the links and form controls on a page. The links should incidate what they lead to, either by having explanatory text or alt statements.

I came across an article which explains how to create boxes in web pages. Specifically boxes with round corners.

Adding fluid borders to your box

This article explains how it is possible to create rounded corners without the use of images.

Interesting eh!

One other aspect of CSS is its use in the preparation of formatted (html) EMAIL

How to Create Great HTML Emails with CS

Microsoft has launched its new version of the Internet Explorer Browser: IE7. Far from being greeted with adulation, its arrival on the web gave rise to widespread fear and loathing. We downloaded it to see what all the fuss was about. We also have IE6 which is used for testing sites in the old version.

We are told that some sites would fall apart in the new IE7 - happily we have not noticed any problems with our web sites (so far!).

This article discusses why problems occur with web sites in IE7 and how to fix them

Internet Explorer Version 7 - were you ready?

Actually we are enthusiastic users of Mozilla Firefox! The new version of IE7 changes the layout of the tools and is more difficult to use - but hey its what you’r used to, as they say. There is not much that is new - it’s just rearranging the deckchairs. The main new thing is the introduction of tabs rather than having to open new windows.

Netscape and Mozilla pioneered tabs as a way of switching easily between web pages. Microsoft realised how useful this technique is and followed suit.

One noval feature is that you can see thumbnails of all the tabs you have open - just in case you have so many you have forgotted which one is which.

The web is about words

I am a great believer in the “content is king” school of web design. I found a blog about web design and from there I found a link to a web site about typography.  I like this web page, it does something for me

Web design is 95% typography

Having nailed my colours to the mast and put my head on the line — I just know someone is going to start correcting my spelling mistakes (i.e. typographical errors).   I have a good knowledge of spelling and typography (I used to work as a typesetter before computers were invented) … but I have to admit I am not a good typist.   I type too fast and my eye sight is not so good.  But I am working at a rate at which I don’t take the time to proof read what I have done.

Having said all that - I so hate seeing spelling mistakes and typographical errors on web pages - especially my own!

Modern web sites use html to layout a web page and css to style and format the content.

CSS stands for “cascading style sheets”. In most cases the CSS file is external to all the html pages and a style is linked to each page of the website.

CSS can be applied to web pages in two ways:

1. External Style Sheets

External style sheets are independent files and can be used with multiple web pages. External style sheets have the advantage that changes made to them are effected throughout the web site. Since you can use them with multiple pages, you can easily keep a consistent style throughout your web pages. An external style sheet has to be linked from your webpage using a tag in the head section of the html.

2. Inline Styles

Inline styles can be used directly in the element tag; no external pages or files are needed. To use inline styles, you would just need your web page and elements: a, img, div, span, etc. This is fine if that style applies only to that one page. Inline styles can be applied in addition to external style sheets but care needs to be taken to avoid a conflict between an external style sheet and an in line style.

Where the styles apply to all pages or most pages of the web site they should be created in an external style sheet - this file will have the suffix .css

External style sheets are simply text files. You can create them with a text editor such as notepad. Any file name can be given as long as the file ends in .css

Usually, the style sheet or sheets are stored in the root directory along with the home page (index.htm) and other main web pages.

The authoritative source for the rules relating to style sheets can be found at

W3 web site

Notes and jottings - not in any order

Whilst it is possible to express colours with names (e.g. “yellow”), this practice is not recommended. It is not supported by all browsers and their versions. It is better to express colours using their hex code.
Font sizes should not be expressed in pixels; the “ems” measure is recommended.

Page elements such as a table may be given an “id” name and styles applied to that “id”. This is done using the hash character.

Styles can be applied using the div tag and an “id”.

The application of style classes to tags should be minimised in preference to setting classes that can be used with tags.

More than one style sheet can be applied to any one web page. It is convenient to separate general styling from the styles created for navigation elements.

All pages in a web site need to be connected from the home page in links that spiders can follow. Hence, the home page should have plain text links to all other pages in the web site.

Your web site needs to be linked to other web sites that are indexed in google and which have content similar to your own.

Title tags should be written for each page and should use keywords to describe the content of each page.

Though not essential it is prudent to have a robot.txt file in the root of the web space, especially if spiders are not be told not to index certain pages.

Work on keywords to list words and phrases that people are most likely to type into search engines. Use online keywording resources to find out what people actually have typed into searche engines. These phrases must then appear in the body text of your home pages and other major pages of your web site.

Enter a meta tag description into the head tags of your web site code. You need not bother with meta tag keywords unless you are really keen on pleasing bots (roboting spiders - there no evidence that google reads meta tag keywords).

When training web designers, the bit they have the most trouble with is always CSS. Or at least it takes the most time to explain.

Those who are using Dreamweaver get away with it because all they have to learn is how to work the CSS dialogue boxes.

It is however ome of the most powerful and flexible and time saving elements of web design.

There is however a lot of learn, particularly if the web designer really wants to unleash the full power of CSS driven web sites.

In this area of the blog I want to post some material about CSS that I hope will aid students to really get to grips with CSS.

The key to using CSS is to under what CSS does - what role it plays in the web site and how to organise style sheets to make them easy to use and edit.