I’ve widened the page layout to 920 pixels, from the previous 728 pixels which is the width of a Google ad block (seemed as good a width as any to choose). However some pages, particularly the ‘Programs’ page, were looking squashed. I looked at a few high volume sites (New York Times, Facebook, EBay) and they seem to have settled on 1000 pixels as the default width – any less than that and you get horizontal scroll bars. My website stats tell me that 98% of visitors have a horizontal screen resolution of greater than 1000 (though 20% are just over, at 1024 x 768, boy it’s been a while since I saw a screen that size).
So 920 is the new width, though using the awesome ‘Inspect Element’ tag in Google Chrome
, I can see that some pages appear to spill over a little.
(In the course of this, I read
how to simulate the missing ‘delayed capture’ feature in the otherwise great Vista ‘Snipping Tool’. Open Snipping Tool, press Esc, compose your picture, press Ctrl-PrintScreen to freeze as-is, drag over the now-frozen screen to capture).
Now that I have additional width, I immediately filled half the new space with icons. I’ve resisted using them to now, partly to get more information in per line, and partly because I think that a textual interface is more efficient. But I have to admit that well-designed sites that use icons well, do look better (and now I’m half-way there, in that I use icons. Now I just have to get a good design). I used the beautiful ‘Silk’ icons from Mark James’s famfamfam.com
, a lovely set of exactly 1,000 icons in 16×16 pixel PNG format. They are, as he says, “strokably soft”.
Not every idea I wanted to convey had an exactly-matching icon, so I chose those I thought best fitting. So for program interfaces now I have
for ‘Command Line’, and
for ‘API/Programming’. Hopefully they get the idea across, and I added tool tips for clarification. They are very pretty, but do take up some of my precious horizontal width.
The other icons I use are for ‘Link to site’, for ‘Site link down’ (though it still will link through), for ‘Add monitor’ (email notification), and for ‘Unable to add monitor’. The last is for websites where there is no revision number or release date listed, so I’m unable to provide update information. This affects about 20% of the projects, though usually the less-active one.
I like to get the program interface icons to line up nicely in columns (‘column up’? Is there a verb meaning ‘align in columns’?). I used to do this with an internal HTML table within the TD cell for each entry. This is pretty wasteful and slow – the browser has to set up a table for each line, calculate its width, and so on. So I made up composite icons of the eight permutations of the three individual icons each in their ‘on’ and ‘off’ states. For this as with most of my graphical editing needs I use the amazing ImageMagick
command line tools. The ‘montage’ command allows you to combine multiple pictures into one, in a definable grid geometry, and furthermore can create blank spacing elements, and a transparent background. Simple.
I want to add icons to denote the platform or operating system of each program, which would be very useful though using up still more width. The problem has been finding the icons for Mac, Windows, and Linux in a suitable size (16×16). You’d think the Web would be swimming in them, and you’d be wrong. Probably due to copyright, none of the dozens of icon collections I squinted through had them. The hunt continues.