Delta Tango Bravo

I've recently been working on some concepts for a redesign of a site that uses a text-resizing widget. The audience for the site is primarily seniors, so large text is important. And, before you start shouting that people should use their browser's built-in support for this, many visitors to the site are unaware of such wonderful tools and really appreciate a solution built into the site.

Currently the site uses some fairly intensive server-side checking to remember your text size choice and this involves some pretty messy URLs. So, I thought, I can make this simpler using some simple javascript to change style sheets a la the nice Simplebits color switcher or The Man in Blue's own text-resizer.

Yup, pretty easy. Just use Paul Sowden's handy little javascript (that he kindly posted on A List Apart for everyone to use) and set up a few style sheets for each text size. Working well so far.

Then, I noticed a little problem. Sure, the text resizes brilliantly, but none of the textual images do. This site has some important persistent branding on every page and several pieces contain reasonably small text. Well, I was in the middle of using the Phark image replacement technique anyway, which makes the title images backgrounds set in the style sheet. So, if I mix the two techniques together (Phark's and Sowden's) I replace each of the title graphics in the CSS so they can 'resize' with the text.

If this all sounds a little muddled, have a look at this working example to see what's going on. Using some javascript from Sowden, the small, medium, and large buttons switch which style sheet is being shown. Using Phark's image replacement technique I'm setting background images for the blue title. In this example, I'm also working with a fixed-width layout, so I make it a little bigger with each repsective size to keep the line-length about the same. Zoom on in.

This is by no means revolutionary and I wouldn't be surprised to learn someone else has done this before. But, in either case, it's a handy combination of some other peoples' ideas. Hope you find it useful.