Em 'n' em

I've started looking more seriously at scalable websites - or elastic sites, whatever you want to call them. Basically, replacing my pixel measurements with ems so that as the font sizes increase and decrease, the constraining elements on the page expand and contract accordingly.

I did this by attacking a fixed width site I'd built using pixels, with the font size described in ems. I went through and converted the pixels to ems and kept increasing and decreasing the font size in firefox, IE and Opera to test how the site worked. It actually seemed to convert pretty smoothly. The main problem I encountered, was addressing image placement. For instance, if you have a site with a 780px width, the top banner can be an image of 780px. When you increase the font size, the width of the site doesn't change. However if you set the width to ems and increase the font size, the width of the site adjusts accordingly and suddenly your 780px width image is left stranded, surrounded by space.

To try and tone down this problem, I created a wider image and feathered the right hand edge to the background colour, then aligned this background image to the left. As the width of the site expanded beyond its default width, the image just gracefully faded to the background colour rather than jarringly halt at a set width. Not perfect, but a reasonable solution I felt!