Rick Parsons’ web sites—structure and design

Design—Cascading Style Sheets

My understanding of the concept of HTML is that the page should contain the content and textual structure of a document but not force the visual appearance. This was very clear in the design of HTML up to version two but it lost its way in later versions allowing the author to specify how the page should look. This has been misused by many web designers making pages that are superficially pretty—so long as you use the correct browser, have good eyesight and can tolerate moving images. It has been used by other designers to create pages that are unreadable by anyone, but that is their problem.

This direction has been somewhat redressed in HTML 4.0 and beyond where the emphasis has been put into transferring such visual information to the style sheet, reverting the HTML to its original role of content and structure. This site has been designed with that philosophy in mind. A style has been set in the Cascading Style Sheets (CSS) provided, but this can be over-ridden at the viewer’s (or listener’s) choice using the facilities provided by their browser. So, for instance, if you have a reasonably modern browser, you will see this page in a creamy yellow with navy blue and dark red headings. You are at liberty to change this using whatever override facilities are available in your browser, but even if you use the oldest browser you can find, it will still make perfect sense. I have imposed this philosophy on myself and do not presume to impose it on anyone else against their will, but trust that it will meet the approval of visitors to the site.

The language that has been used is strict XHTML V1.0 (Ref: World Wide Web Consortium) with a couple of relaxations. That is HTML V4.0 with a few syntax changes to make it XML conformant. The style sheets are all written in CSS, mostly level 1. As not all browsers recognise the full fount of type which is in common use in book setting. e.g. em and en dashes & accents, numeric entities have been used (&#nnnn;). These are hard to understand from the source but more universally recognised by machine. I would also like to put certain commonly used images and their corresponding “alt=” into the style sheet, but the standard does not yet allow it. These would be used for layout features such as logos, headers and footers which belong with the visual style rather than the document content. I suppose what I would like is a macro language, perhaps XML will provide this<Grin> Thanks to Alan Flavell, this is now possible for rules.

Some of the design rules which I have imposed on myself are as follows…

• Structure elements like STRONG are used instead of style elements like BOLD.
• Colours, fonts and sizes are (almost) never put in the HTML.
• A choice of fonts is specified always ending with a generic “last resort” font. Even then some browsers choose an unreadable font. The generic “fantasy” font is particularly prone to this so effort has been made to identify real widely available fonts.
• Sizes are (mostly) specified using relative terms, not absolute point sizes.
• Most <IMG> sizes are specified either in the HTML or, in the case of regular style features, in the style sheet. This is done to assist the down load, it is unfortunate that some browsers ignore them, especially in the style sheet!
• Backgrounds are kept light in colour and text dark so that if the defaults are taken (usually black on white) everything is still legible.
• Background images are kept unfussy so that they don’t interfere with the legibility of the text and light for the same reason as above. A fall back colour is provided in case the download of the image does not take place.
• Tables are used where tables are appropriate, not as a formatting tool. An exception to this rule is that they are also used to get more information across the screen in columns like a newspaper rather than have a long thin line of text at the left hand margin, and also for navigation bars. These are being phased out now that CSS allows for better structuring of lists, which is where navigation naturally fits.
• Large images are only loaded on request (in separate pages) and the user is forewarned of the image size. Stylistic images are made as small as possible to speed load times.
• The source is laid out so that it is possible to follow it in a text editor. HTML TIDY is used to “pretty it up” and to check the syntax.
• Links to other sites are tested regularly, at least once every six months.
• I try to spell check each page. This is difficult because I can’t find checkers that work properly.
• Finally, every page has a date last modified with a signature and a link back to the home page where an email address can be found so the author (mostly myself) can be contacted.

Not STRICT items are some features of the Header to break users out of frames imposed by other sites.

Any Browser

There is an intention to make the pages independent of the particular browser, and to achieve this I used to check them against many different browsers—not to ensure that they look the same regardless of the browser used, that would be contrary to the philosophy, but that they are understandable and usable from any browser, regardless of how old, simple or unsophisticated. I must admit that, now the structure of the pages does not change a lot, they are not tested all that often. The browsers tested include…

• Microsoft Internet Explorer V3 (Windows). This version does not implement CSS well—fortunately it does not pick up linked style sheets, so some simple old fashioned HTML renders the page readable at least. I have now lost access to this version so will have to trust to memory and good design in the future.
• Microsoft Internet Explorer V4+ (Windows). Most features used work.
• Microsoft Internet Explorer V4 (Macintosh). Very similar to the above but more features are broken. The ones that I have noticed are “line-height” which is so seriously broken that I can’t use it where I would like.
• Netscape V3 (unix). A very simple browser which basically only accepts the HTML V2 constructs. Fortunately it ignores anything else and still produces readable pages.
• Netscape V4 (Macintosh). A middle of the road browser but see comments for Netscape for Windows below.
• Netscape V4+ (Windows). The biggest source of problems. It supports CSS but not very well with many features broken and with the potential to render pages unreadable.
• Opera V5+ and Netscape V6+, Mozilla and Firefox. Recent acquisitions which look very good.
• Lynx (DOS). A text only browser which handles the “alt=” constructs, though does not separate them from the adjoining text very well requiring me to enclose the strings in square brackets to highlight them. It makes a poor job of tables, not even attempting columns for simple text content—I have to allow for this when designing pages, and at least one still comes out meaningless—I tried! Each page also used to contain a “<LINK MADE=” header to facilitate the “c” reply mechanism used in this browser, however this was prone to Spam Harvesters so I had to abandon it.
• Elvis, actually a VI clone editor but also functions as a text only browser.
• Simply Web (Windows). This is a bolt on to IE4 which makes it talk. Very clever it is too. It includes three sub browsers, a plain IE4, a text only window and one that breaks the page up into it’s inherent structure. Very useful for debugging, but I haven’t used it for a while.

Accessibility

I have tried to make the pages accessible to those using alternative forms of browsing and limited vision etc. I used to use a program called Bobby but this has now gone commercial and is out of my budget.

In particular you will note that…

• Every <IMG> has a corresponding “alt=” to describe it or, where the information is purely visual, the images are contained in separately loadable files.
• Every page has a “lang=en” so that English interpreters are used.
• Frames have not been used—these can make any page unreadable in some browsers.
• Text in images is not used unless the “alt=” contains the same text.
• Links in image maps are duplicated in text only links.
• “accesskey=” is not yet used as I can’t find a suitable way to prompt that they are available. The letter Underlined seem intuitive but the convention is that links are underlined already.

I have also taken into account the needs of Seniors (after all, I will be one eventually) and there is a very good article on this subject by Jacob Nielsen. I was pleased to discover that I have been following his guide-lines for years.

Summary

I have come to the conclusion that this task is never ending—there is always just one more thing that can be done to make your pages more accessible, browser friendly, search engine pro-active… For example, I have not yet used many of the “<LINK…” structures that are available (but not well documented) which are supposed to assist printing. I have not used alternate style sheets for audio, hand held, character only or other specialised browsers. There is a print only style sheet which attempts to save a few trees but I don't know how well it really works.

The list goes on. (My daughter designed the waving flag below—this is the only animation that you will find on this site.)