Symbolic Forest

The redesign is now almost done, which means that soon you’ll be saved from more posts on the minutiae of my redesign. It’s got me thinking, though: to what extent do I need to think about readers’ technology?

When this blog first started, I didn’t really worry about making it accessible to all,^* or about making sure that the display was resolution-independent. It worked for me, which was enough. Over time, screens have become bigger; and, more importantly, more configurable, so I’ve worried less and less about it. When it came to do a redesign, though, I started to wonder. What browsers do my readers actually used.

Just after Christmas, for entirely different reasons, I signed up for Google Analytics, rather than do my own statistics-counting as I had been doing. Because Google Analytics relies on JavaScript to do its dirty work, it gives me rather more information about such things than the old log-based system did. So, last week, I spent an hour or so with my Analytics results and a spreadsheet. Here’s the graph I came up with:

The X-axis there is the horizontal width of everyone’s screens, in order but not to scale; the Y-axis is the cumulative percentage of visits.^** In other words, the percentage figure for a given width tells you the proportion of visits from people whose screen was that size, or wider.

Straight away, really, I got the answer I wanted. 93% of visits are to this site are from people whose screens are 1024 pixels wide, or more. It’s 95% if I take out the phone-based browsers at the very low end, because I suspect most of that is accounted for by K reading it on the bus on her way home from work. The next step up, though, the graph plunges to only 2/3 of visits. 1024 pixels is the smallest screen width that my visitors use heavily.

Admittedly there’s a bit of self-selection in there, based on the current design; it looks horrible at 800 pixels, and nearly everyone still using an 800×600 screen has only visited once in the two-month sample period. However, that applies to most of the people who visit this site in any case; just more so for the 800-pixel users. Something like 70% of visits are from people who have probably only visited once in the past couple of months; so it’s fair to assume that my results aren’t too heavily skewed by the usability of the current design. It will be interesting to see how much things change.

I’m testing the new design in the still-popular 1024×768 resolution, to make sure everything will still work. I’ll probably test it out a fair bit on K’s phone, too. But, this is a personal site. If you don’t read it, it’s not vital, to you or to me. If I don’t test it on 800×600 browsers, the world won’t end. The statistics, though, have shown me where exactly a cutoff point might be worthwhile.

* For example, in the code of the old design, all that sidebar stuff over on the right comes in the code before this bit with the content, which does (I assume) make it a bit of a bugger for blind readers. That, at least, will be sorted out in the new design.

** “visits” is of course a bit of a nebulous term, but that is a rant for another day.

Keyword noise: accessibility, blogging, browser, design, resolution, web design, width.

Another design point that’s come up as part of the Grand Redesign I keep promising you: tagging. The little bundle of links at the bottom of each post that I didn’t really think did very much.

I was a latecomer to tagging. When this site first started, it didn’t have any for the first month or so. After a while I started adding them, pointing them to Technorati. Back then, the site was running on WordPress version 1.5.something, and it didn’t have any built-in tagging support. I was trying to avoid using too many WordPress plugins, and I didn’t think that tag management (as distinct from tagging per se) mattered all that much; so I wrote all the tags manually. Like this, at the end of each post, with the <a> element repeated for each tag:

<small>Keyword noise: <a class="tag" rel="tag" href="…">tag1</a>, …</small>

Which worked, quite well; there was a visually distinct “tag” class, because I wanted tag links – which all led to Technorati back then – to be visually distinct from regular links which would go to whatever they were about.

Things move on, though, and WordPress has since gained built-in tagging functionality. Given that I’m redesigning the whole site, and putting in new built-from-scratch layout templates, I thought I may as well switch to using a more organising tagging system. For one thing, it means less typing each time I write a post. All that code up above is replaced by one little chunk in the template:

<p id="thetags"><small><?php the_tags('Keyword noise: ', ', ' ,");?></small></p>

This one covers all the tags, calling a Wordpress API function to pull them out of the database and convert them into HTML. I know all those commas and quotes look a bit confusing; but really they’re not that bad. And the point is: this is in the template, not in each post. That bit of code there only has to be written once; the previous chunk had to be typed out every time. The most awkward part is that WordPress isn’t flexible enough to let you set the class of each link individually, hence the <p class="…"> at the start.

The big change this leads to, though, is that the tag links no longer point to Technorati. Now, they point back to the site itself: tag page requests generate a page containing every post marked with that tag. And, already, that’s shown that people do indeed click on the tags. People, particularly people coming from searches, do seem to use them. Whether they find them useful or not is another matter, of course, now that they point back within the site and not to a broader variety of opinions on the matter; but they do get used.

Doing it this way means that I put more tags on each post, simply because there’s much less typing to do. Conversion, though, is going to be a bit of a job. Right now there are 760-odd posts on this site, all of which I’m having to reread and re-tag. It’s going to take a while, but hopefully the majority of it will be done by the time the new design is finished.^* The only problem with this transitional phase is that: the current template is, because of its age, completely unaware of tags. So it doesn’t really know what a tag-based archive page is; so when you click on a tag, there’s no explanation as to what you’re looking at. I’m not sure if this is going to be a problem for you readers or not; and, hopefully, it’s only going to be a short-lived situation.

The word “folksonomy” has often been used to describe this sort of tagging system. I’m not sure it’s an ideal term for what I’m doing, though. “Filksonomy” might be more relevant: a bit like a folksonomy, but rather more whimsical and silly.

*** In any case, there are plenty of other parts of the new design that also need each post checking and potentially editing.

Keyword noise: blog design, blogging, CSS, design, filksonomy, folksonomy, HTML, tagging, web design, Wordpress.

As I mentioned recently, I’m embarking on a Grand Epic Ground-Upwards Redesign of this site, because, well, the design hasn’t been changed since I first set it up. I knocked it together in a few days holiday in August ’05; back then my holiday year ended in August and I often had a few spare days at the end of the month where I had nothing to do and needed to keep myself occupied. In 2005, this blog was the result.

Anyway, my point is: it was put together in a bit of a hurry, with most of the design code ripped out of a standard theme I downloaded, without me really understanding what each bit did. The design’s always had a few rough edges, and there are lots of things that I’ve meant to develop further but never have. Hopefully, some of those points will be addressed, attacked, and taken by storm.

Thinking about the design, though, and what I want it to achieve, has made me think about one of the things I was most unhappy with when I first put this site together. One of the things I liked about this theme when I first saw it was:^* the little boxes for the date on each post. You know, these ones:

But one thing I didn’t like, though, was the cardinal number. Maybe it’s because I’m English, that that’s how I was taught, but when I read a date, I always read it with an ordinal number. “January 11^th”, not “January 11″.

I can’t remember, to be honest, if it was possible to fix that easily when I first started using WordPress. Possibly it was, possibly it was something that’s been added later.^** In any case, I didn’t fix it. I know I tried to, at one point; but abandoned the fix and didn’t go back to it. Then I forgot the issue, until, coming back to the redesign, I tried the fix again the other day. When I retried it, I remembered that I’d given it a go before. Because this is the result

Those two extra characters mean that on most days, the text is just marginally too long to fit in the box. The box gets pushed down. Which isn’t so bad; but, it doesn’t always happen. You can’t necessarily know what the date box will look like; how it will relate to the elements around it. Moreover, I don’t know how it will look on other computers, where the fonts have slightly differing metrics to mine.

There are ways to fix it, of course. The box could be slightly wider. I could make sure that the horizontal line always comes underneath the date box, although that might leave annoying white space under the post title. The question, though, is whether it’s worth doing. However many times I tweak it, I’m not sure I’d ever get it quite right based on the current design.

And so, this all is partly why I’m going to start pretty much from scratch. The risk is that I’ll reinvent the wheel; the upside is that at least I’ll know how it works from its heart.

* and still is

** To be pedantic: it’s not a feature of WordPress itself, it’s a feature of PHP, the underlying language. I’m too lazy to go back through PHP’s version change logs and find out when the feature in question – the “S” character in date formatting strings – was added.

Keyword noise: beauty, blogging, CSS, design, perfection, PHP, tweaking, web design.

Regular readers might have noticed that yesterday’s post was a bit of an experiment. In case you didn’t spot what the experiment involved, here’s a clue:

Ever since it started, this blog has gone in for copious footnotes, on just about every post,^* flagged up with stars in the usual way. One thing I’ve never been entirely happy with, though, is that the more footnotes you have, the more stars each note requires. A fifth or sixth footnote starts to get unwieldy, as some previous posts have demonstrated. So I’ve been idly thinking about other ways to indicate a footnote: symbols, numbers, or something else.

You can tell I’ve been idly thinking about it, because it’s taken me over three years to try an experiment with using numbers instead. I’m not really sure, though, whether I like it or not. K, I know, definitely doesn’t like the new numbered style; she was almost tempted to leave a comment saying “Bring back the stars!” so she must care. Or I could try out a series of different symbols, instead of a line of stars. More experimentation might be called for.

* When I first started drafting this post, it didn’t have any. “Oh, the irony”, I thought to myself, “of having no footnotes on a post about footnotes.” Fortunately, one soon came to me.

Keyword noise: asterisks, blogging, design, footnote.

I’ve recently been reading a book about design history, about the design of an icon. Mr Beck’s Underground Map, by Ken Garland. It is, as you might imagine, about the London Underground Map, concentrating on the period from the 1930s to the 1950s when it was designed by Harry Beck. In many ways it’s a sad story – Beck, throughout his life, felt that he had paternalistic rights over his map;^* London Transport disagreed, treating the map as its own property. Which, of course, it was. In the 1960s, when London Transport turned to alternative designers, he became obsessed with producing his own versions, in the hope that London Transport would take his design up again.

Nowadays, Beck is always remembered as the map’s creator; his map was the first in Britain to abstract the network and present it topologically. The modern map, though, isn’t really based on his. It’s based on one of its 1960s successors, by Paul Garbutt; it was Garbutt’s first design that settled on black-and-white interchange symbols, and the modern proportions of the lines.

Design archaeology is hard, sometimes. There aren’t any old underground maps on display at stations, because they’re all outdated. Sometimes, though, you can spot things still lurking from days past. Some of the Phase One Victoria Line stations still have signs unchanged since they opened, in the days of the first Garbutt map. The northbound platform at Green Park, for example, has what looks like an original line diagram on the wall: it has a dotted-circle for National Rail interchanges, a characteristic of that time;^** and Highbury and Islington is shown as a Northern Line interchange. It’s interesting to see. There aren’t any Beck-era signs anywhere on the underground, as far as I know, which is something of a shame; but it’s good that there are still examples of old designs surviving. It’s good to have history around us.

* or “The Diagram” as the book calls it throughout. Which, technically, is right.

** The modern double-arrow “main line railway” symbol was introduced in 1964, off the top of my head, but didn’t become widespread for a few years

Keyword noise: books, cartography, design, Green Park, Harry Beck, Ken Garland, London, London Transport, London Underground, maps, Mr Beck's Underground Map, Paul Garbutt, underground, Victoria Line.

Going back on last week’s post on Jakob Nielsen‘s top ten blog design mistakes: his Number Two Mistake is: no author photo on the site. Thinking about it, out of all the mistakes on his list, that’s almost certainly the most commonly-made.

Faces are better-remembered than names, he says. People will come up to you because they recognise you from your photo, he says. How many bloggers actually want that to happen to them, though? I know I don’t. It makes you personable; it improves your credibility if people know who you are.

I said before that I don’t believe it would give me any extra credibility. I don’t think you need to know what I look like in order to believe the stuff I write here; and frankly, I don’t care whether you believe it or not; I know myself how true it all is. Thinking about it again, though, I’m a bit suspicious of his reasoning; and what makes me suspicious is: comparing his theories to the way newspapers work.

If you look at most national newspapers – I mean, British ones – their regular columnists will have byline photos. You know what they look like, so, the theory goes, you should trust them more. Columnists, though, aren’t there to write things you need to trust them about. They’re there to write down their opinions, which may well be – and often are – complete bollocks. The news pages, which are the parts you’re supposed to believe are true, don’t bother with byline photos. They don’t always bother with bylines. These people, though, are the ones you’re supposed to trust, and their words are supposedly more trustworthy because of their relative anonymity.

Of course, this all breaks down when you consider that most bloggers see their role in life as over-opinionated commentators, not the byline-free just-the-facts news types. I wanted to mention it, though, because it’s a different angle on how trust works in the media. Who do you trust more?

Keyword noise: blogging, byline, credibility, design, Jakob Nielsen, journalism, media, newspapers, trust, usability, web design.