The Stripey Site: Appearance

All the webpages were created ‘by hand’ using Vim. I’ve tried assorted HTML editors but none of them seem to help the process, several of them hinder it, most produce code that is nowhere near valid HTML, and some give the impression of adding superfluous tags at random. Vim, customized appropriately and with a few HTML macros is definitely the way forward.

The graphics (all both of them) were created with The Gimp. The stripes I drew free-hand; it took a few attempts and a little bit of tweaking to get them to tile neatly, then it was trivial to edit the colours for the different sections. The logo went through a few filters to create the soft outline effect.

File Types

Using style sheets gives greater control over the appearance, and keeps the HTML cleaner as well. The disadvantage is that it isn’t supported at all in older browsers. I decided not even to try to render the Stripey ‘image’ in such browsers, partly because some things just can’t be done and partly because it makes the HTML much messier, having to insert colour change tags whenever using a heading, etc.

I felt it was better to make sure that there was no colour information at all in the HTML file, so that without style sheets the pages get rendered entirely in the user’s default colours. This is vastly preferable to a half-way situation which can lead to things like text being in a colour defined in the webpage but against the user’s default background, which could be anything.

For this reason, the background stripes are defined in CSS rather than in each pages’s <Body> tag (and people without CSS browsers will be wondering what all this mention of stripes has to do with anything). It looks OK without CSS; it’s very 1995, but cos the headings have heading tags around them, etc none of the information is lost despite the rather boring appearance.

For (non-photographic) images, png is a better file format than gif. Unfortunately png isn’t supported in older browsers either, so I’ve compromised: the site logo is a gif cos it’d look really odd to have an ‘error’ icon in the corner of each page. However all the background stripes are pngs, on the basis that browsers new enough to understand CSS tend to have png support (and if a browser doesn’t do CSS, then it doesn’t really matter what format is used for the files that it isn’t going to access!)

Browser Compatibility

I wanted a fairly simple site, nothing too flashy, none of this using graphics for text or borders that have to line up exactly or anything: I just wanted normal-sized text in reasonable positions, for it to respect users who have purposefully adjusted their settings to have smaller- or larger-than-average text, and for all the information to be accessible in any browser, including Lynx.

Until I started, I didn’t think that was a particularly demanding set of requirements. Now that I’ve just about met them, I’m amazed how many little things browsers can do differently to each other.

Just getting body text to be a sensible size was a major problem. At one point I gave up, then had a brainwave which involves getting bugs in Navigator and IE to cancel each other out. I also encountered an absurd problem with bullets that I still haven’t worked out yet (and I avoided by replacing round bullets with little chevron things), and it seems there’s quite an art to placing tags so as to induce line breaks in the Lynx version without affecting the display in graphical browsers.

When I get some time I’m planning on writing up the experience.

Technical Details

Software

File Types

Browser Compatibility