The struggles of having an elastic layout
For the moment, I’m working on a fairly big project where the interface design will be elastic. What do I mean by elastic? Basically, there are three ways one can choose to design the interface’s relation to the visitor’s resolution and web browser window size:
- Fixed
- The layout is fixed in pixels and won’t take any consideration to the resolution or the window size.
- Fluid
- The layout flows to fill the whole window, no matter how wide or narrow it is. This layout can be set in pixels,
emor any other desirable unit. - Elastic
- This is, in my opinion, the best one. It isn’t fixed, but it also stops from getting too wide for, for instance, wide-screen users. You can specify a maximum width and a minimum width and then you let it flow between those two values depending on window size. The units for this type can also be either one that suits best: pixels,
em, percentages etc.
Since I want my font to be scalable, and consequently the width and height of some elements resizable to go with that, I’ve chosen to use the em unit for most cases. This is to make it work in the different versions of Internet Explorer in Windows, since they can’t handle user resizing of a pixel-based font (as opposed to Firefox, Opera and Safari, amongst others).
It’s really invigorating to create something that’s so scalable and flexible, and I really do believe this will help targeting more end users and will make the web site become more usable and accessible for them. All the people involved in the project who have seen my HTML prototypes have really liked it and they think it is a great approach.
But naturally, creating a this isn’t without gripes. My biggest annoyance is web browser bugs, where number one on that list is rounding errors. If I have, for instance, a background color on an element and the font is resized, some elements will have a different height in Firefox than in Internet Explorer. This is because the em unit calculates the elements’ boundaries depending on what fontsize is used, transforms it to pixels to render, and inevitably this leads to different rounding sums. Firefox definitely seems to be the worst at this.
The key to solving this is to find a certain unit where all (read: most) web browser seem to agree on the rounding for different sizes. So, for the moment, I’m on top of things and I really like the web site I’m working on. But it’s an everyday control task, to make sure that it’s consistent.
