Fluid / liquid layouts are definitely considered the ‘ideal’ design type right now, and I can’t agree more. I much prefer a fluid design over a set layout. (Yes, I’m aware that the design for this blog is a fixed layout, I’m getting around to changing it one day, truly. I just procrastinate something awful.)
In any event, whether your website design is a fixed layout or a liquid layout — there should still be a measure of fluidity in text sizing. When I use the phrase text sizing
I refer to the fact that users can control the size of text on a page. For instance, they may use the popular CTRL
+ +
to increase, CTRL
+ –
to descrease the text size. Others may use the ability of their mouse scroller to adjust zoom the text size, etc.. While this may seem
to be simple, it’s not quite as straightforward as that.
There are often elements, such a section headers or navigation areas, that break
when zoomed – meaning they just don’t fit in the space anymore. This can happen in a liquid layout also, believe it or not. Many people use horizontal tab-like navigation, made pretty with images behind it. Now, when zoomed too much, sometimes the text becomes too big for the screen size of the viewer, and in the nature of a liquid layout, the horizontal navigation wraps
and continues onto a line below the normal horizontal navigation. In many cases, that can look quite awful. If you use navigation like that, you need to test and see what happens, and design in measures so that if it does wrap – it still can do it in a way that looks good.
For fixed layouts, you get something a bit different – most often that is a horizontal scroll bar in the browser when you run out of room. None of us like those – so its best to test and avoid them if you can.
You cannot account for every possible window size in the world. People will zoom in and out if they know how, it’s like a kids toy, some of them think its just plain neat to see how many zooms they have to do before the site runs into itself. So, how do you accomodate the most people?
My rule of thumb:
Make sure your site can handle two increments both ways (increases in text size, and decreases in text size) without breaking. If you can, then you should be okay.
Here’s an example of me playing
with the LovecraftCountry.com forums:
Original:
Zoomed in 2 steps with CTRL++:
Zoomed out 3 steps with CTRL–:
Break = Zoomed in 3 steps with CTRL++:
So, overall… the best suggestion I have is to always toy around with your zoom… your visitors will.
~Nicole
