Introducing Charles Cooke ONLINE

Web Design

Welcome or welcome back whichever is applicable. the site has had a bit of a re-vamp so you may not recognise it but I hope you have arrived where you want to be.

What is here?

The site is dedicated to providing resources for web authors who are equally dedicated to designing to modern web standards with the confidence that their designs will work and continue to work on the latest, and not so latest, user agents as well as those which will emerge over the next few years. So you will find my User Guides to such excellent software as Nvu/KompoZer and Dale Edwards IE7 script.

You will also find my introduction to the principles of CSS, of all marques, and there will be more to come later.

More miscellaneous, but hopefully equally useful, are Lab Notes on features of HTML and CSS which sometimes cause confusion or for which some may appreciate more explanation.

You will find a slight bias, not only to conformity to published standards but also to the use of open sourced Web design software particularly from the Composer/Nvu/KompoZer line of development.


What’s new?

  • Look and feel
  • Accessibility
  • Consistent navigation
  • Introduction to CSS

The last three of these will be discussed in a little more detail  below. The look and feel may be the most obvious change but is really a by-product of the others.

In addition to these major changes every page has been reviewed and a high proportion revised to correct, clarify or to bring up to date with developments since originally written.

The exception has been the KompoZer User Guide. The reformatting exercise required has been a very time consuming task not to be undertaken lightly. Though the Kompozer User Guide is by far the most used part of the site it is based on a product that is now rather old which will undoubtedly be superseded in the near future. Leaving it as it has been for the past five years may even provide an amusing contrast in approaches.


I need to go back a bit. I had been doing web design for three years when I discovered Nvu. There was then an active forum dedicated to the topic which had several well informed contributors but I could find no guide to the product so, for my own purposes, I started to make notes. I announced this on the forum which generated some interest so I produced a semi-complete Guide as a pdf. Scorn and derision! Why would a html product want a pdf guide! Within two months I had one — a table based html page with the content of the pdf in a single cell!  (I jest not!) This was for Nvu 0.5.

The result was as you would expect. Fortunately from the start I had used some css so I was able to produce a frame based guide a month later based on Nvu 0.7. A couple of months later, and based on Nvu 0.9, I was approached by Daniel Glazman the designer and Linspire the sponsor to ask if they could adopt the Guide for the product.

In spite of this stamp of approval the guide was still frame based and obviously still drew detractors. I started to hone my CSS skills and, by the time Nvu had reached version 1.0, I had a fully CSS-based layout.

What I would like to note is that, in spite of all this attention, no one had mentioned Accessibility nor had I any understanding of its importance in SEO Agencies. In fact for the next three years I went on developing my site in continuing ignorance.

Having spent a working life in an organised technical environment, when writing the User Guide I automatically organised the material logically and numbered it using the decimal system. I was naturally pleased to note that HTML fully supports this approach with its six heading levels so I had applied these right from the start. Little did I realise until quite recently that a well structured system of headings is of the greatest assistance in making a page accessible. So, in fact, right from the start the User Guide has incorporated one of the important building blocks of accessibility while simultaneously overlooking all others.

So for the past two years I have probably studied web accessibility more than anything else and gradually reorganised past work to incorporate the principles I was learning. I plan to write more about this at another time but for now I have tried to incorporate the basic essentials of the W3C Web Content Accessibility Guidelines WCAG (2.0).

Changes you may note are

  • Improved typography — font size, line and letter spacing
  • Correction of areas with poor contrast
  • Better navigation (see next section)

Changes that you probably won’t notice unless you are using a screen reader or prefer to navigate using the keyboard.

  • Fully navigable using keyboard only
  • Better treatment of external links
  • Proper use of table summaries and headers or scope
  • Headings for menus
  • All menus formatted as lists

Consistent navigation

As my site grew so I had tended to invent new navigation systems. I counted four different approaches in use just now. That is bad for returning visitors an well as being difficult to maintain. If you exclude the KompoZer User Guide you should now find only one. What was also bad is that there was no route back from the User Guide to the rest of the site. I’ve had to put a patch in to provide a remedy for that.
You should now find every page using the same approach with a fixed position menu for the page and a scrolling menu for the site.

Introduction to CSS

I started writing my introduction to CSS in 2007 and, to meet an urgent need, published it at the time. However it was not complete and has rested as ‘work in progress’ since that time. I have only now got it completed, greatly extended and fully updated. It is not intended as a comprehensive guide to CSS but rather a guide to the underlying principles. It contains quite a lot of detail but also has links to where more details may be obtained. I have felt it necessary to write it since unless people understand the basics of what they are doing they are likely to flounder for quite a while. Though there are other guides to CSS I hope this may put things together in a way that many people will appreciate.