I finally added in a style switcher, to allow users to select between viewing the site in either a fluid or fixed (default) width layout. Up until now, the layout has been a fixed one, restricted to a width of 780 pixels, so that it remains usable in even 800×600 resolution screens. Before you so smugly point out that hardly anyone you know runs at 800×600 anymore, recent facts seem to indicate that up to 1 in 5 screens are still at this resolution – so you must be able to design for this, as having to scroll horizontally greatly reduces usability.

However, this design constraint also imposes some problems on people with higher resolution screens who want the website to use more of the available space. (I personally run at 1280×1024, but prefer the smaller, fixed width as easier to read due to the smaller line lengths.) Well, taking a cue from some websites out there, I decided to implement a style sheet switcher that would allow users to pick which format they wanted. It’s now available – see that icon in the upper right corner that looks like this?

Simply click on it to toggle between a fixed a fluid-width layout, and view this site how you like it. At this time, I have no plans to add other different styles, as in my mind a simple switcher like this is all that’s needed. And, I don’t really feel like a re-design at this time; I think this current design is good at least for a few more months. (On a somewhat unrelated note, I’m currently working on a WordPress theme for public release though, stay tuned for more details.)

How’s it work?

The script I used was an older one, written by Paul Sowden for A List Apart. It’s almost five years old, but still works great with a few slight changes. What’s cool about it is that it saves your selected style in a cookie, so upon return, the website will know which format you prefer. So, while Firefox users have always had the ability to switch style sheets, this script adds to that by saving the user’s selection for future reference. The script also works fairly well across browsers; I’ve tested it in the latest versions of Firefox, IE and Opera.

I’ve also made it so that the script downgrades well – if for some reason, JavaScript is not enabled on a user’s browser, the style switcher icon will not be present. They will still be able to switch styles if their browser provides this functionality, though.

One hitch I ran into was with the use of this script with the IE7 fixes library by Dean Edwards. Using IE6, the style switcher doesn’t quite work; when clicked, the styles do not toggle, but the settings are saved via cookies. Thus, a reload of the page is needed to see the effect – not exactly ideal, and it makes it look completely broken. So, for the time being, I’ve disabled the IE7 fixes, and so far, nothing seems to be whacky with the layout of the site when viewed in IE6. (Dropping the IE7 scripts also will save about 24 KB in bandwidth per page viewed in IE as well.) There are other javascript style sheet switchers out there, so I may give them a try to see if they’re compatible, or if I have even more time, try to write my own. But the “problem” might be with the IE7 fixes.

Not that I mean to putdown the IE7 fixes – they’ve been a great asset at times when I’ve been too frustrated to figure out why IE was borking on some piece of CSS. I highly recommend IE7 if you’ve been pulling your hair out over some layout problem. I haven’t yet had a “real” problem with it, but as always, I try to use this sorts of fixes as a last resort – let’s see how long I can hold out for, and let me know if you notice any layout problems.