Icons Worth One Word Each

A month ago I added icons to most program names and listings, to show the platform the program runs on, and its user interface.  I used to have this information only listed on each program’s page but I’d like to make it more obvious before you click on a program, what it runs on, and whether it’s GUI or not.  I try not to use images where words can work, but words like ‘Windows’ take up a lot of horizontal space.

So this guy and its permutations are for the operating systems.  To get them to line up
plat_win_mac_linux.png
when stacked above each other in a table, I made all the constituent icons 16 pixels wide
with a 1-pixel space either side.  So the 3-wide icon group is always 54 pixels wide.  The icons themselves I made up myself just by shrinking logos and then cleaning them up a bit with a graphics program.  I put them together along with 16-pixel wide transparent spacers using the amazing ImageMagick.  They’re actually 50% transparent as with so many of them on a page, they were looking a bit overpowering, particularly the Apple icon. 

The interface icons are a bit less intuitive, and I debated whether to include them.  I have hover-text explanations on them so after reading that once or twice I hope it’ll be
interface_gui_cmd_lib.png
clear what they mean (they are ‘GUI’, ‘Command Line’, and ‘Library’, in that order).  They’re also 16 pixels wide; I got them from famfamfam’s beautiful ‘Silk’ icon set.  Categorizing by interface probably isn’t as important to a lot of users, particularly as most Windows programs are GUI, but for Linux (and hence Mac) power users, it’s nice to be able to find the command line programs.  And for super users, programs that provide programming libraries or APIs are just wonderful.

The name of the icon group is systematic so I can create it in the CGI programs, the image files are named like plat_win_mac_linux.png for all 3 platforms as above, or plat__mac_.png for just Macintosh.   I put them into groups of 3 to avoid lots of little sub-tables, or tables with dozens of columns, and yet still get them nicely aligned horizontally.  They seem to load pretty quickly despite the front page having 68 of the platform and interface icons.  They’re only about 2 kB each (ImageMagick is frugal with bytes) and the browser will cache them, so they each should only need to be loaded once. 

The tip text Javascript comes from Dynamic Web Coding’s ‘Tooltip’ library.  This is a really nicely designed and implemented library with all sorts of features.  I felt guilty for not learning Javascript and doing it myself, but this passed in about 10 seconds.  This is a good library and I’m fine with licensing someone else’s code.  I next want to incorporate their ‘Scrolling Divs’ library for the screen capture images.

Comments are closed.