Web Matters

Stephen Poley


When I first started putting this site together, I not unnaturally had a look around at other sites on the web, and borrowed ideas from them. As time has gone on however, I have gradually come to the realisation that this is a very bad idea. Unless one is exceptionally lucky in the sites one looks at, one is likely to learn more bad habits than good.

I have therefore written some essays on various aspects of how web pages ought to be put together. The main theme is writing pages that can be viewed in a wide variety of situations – ideally by everyone who uses the Web – without sacrificing the presentational aspects and without needing a disproportionate amount of effort.

General Design Principles

The Essence of the Web Do web-designers actually understand what the Web is for? In many cases there seems reason to doubt it.
Flexible Design Writing pages that look good at all sizes, instead of just one.
A four-level model for web pages A conceptual model to help you put complex pages together in a well-structured manner.
Website Checklist A list of things to check out before opening your site to the public.

Specific Design Issues

Wrong size Fonts Why my font-size is better than your font-size.
Javascript form validation - doing it right There are many sites on the Web that make a mess of using Javascript for form validation, producing something that is unusable in many browsers and unfriendly in the others. This page shows how to do it right.
The ALT attribute in HTML Use and abuse of alternative text for images.
Why you should avoid Verdana The Verdana font is much used on the Web - but it really shouldn't be.

Example Layouts

Layouts which attempt to address various commonly-asked questions, especially with respect to CSS.

Rescaleable canvas A flexible HTML5 canvas that adjusts itself to the window size.
CSS Buttons Producing a nice flexible easy-to-maintain button-bar using only CSS – no images required.
Image Resizing An experiment with using different image sizes to give good support to readers with very different window sizes.
Zebra Tables A frequently-asked question: how do I get tables with stripes in alternating colours? Well, here is the answer, with Quagga tables as a bonus.
CSS Superscript spacing Achieving attractive line spacing when using superscripts and subscripts.
Multi-column layout 1
Multi-column layout 2
A couple of example CSS layouts with one fixed-width and two variable-width columns, which I knocked up in response to someone claiming that it was impossible.
CSS column height example An example CSS layout, addressing one of the commonest CSS questions: how to get a vertical menu bar to extend to the same height as the content of the page.
CSS matching stripes example Closely related to the previous one: an example of how to get matching stripes either side of the content.
A variable-column layout Using Javascript and CSS to get a variable number of columns depending on window width. (It of course degrades elegantly for readers without Javascript.)
Geometric figures in CSS A bit of fun, drawing triangles in CSS.

Other Topics

What every browser user should know This page is mainly aimed at readers rather than authors (although as you’ll see, it’s sort of aimed at authors as well).

It is often thought – rightly or wrongly – that most surfers are very ill-informed about using their browsers. This page aims to rectify the situation.

What - no Javascript? Why I, and many other people, normally have Javascript disabled while browsing.
Sound markup – a concrete example of benefits A data-point in the case for structuring web pages properly: the redesign of a commercial site.
A use for favicons These frivolous little images can actually be useful!
Proper Quotation Marks A couple of scripts to help you get proper typographical quotation marks and dashes into your HTML, with minimal effort.
The CSS ex unit Is the CSS ex unit completely useless? It certainly seems that way.
The Netscape 4 conundrum How much longer should web authors support this browser? (The answer to this is now probably “not any longer”, but I wrote this when the subject was still very much relevant, and left it here in case anyone was still interested.)

This site and Internet Explorer 6

Contact me