Fluidity and Text Sizing by Nicole Hernandez
Fluid and liquid layouts are definitely considered the 'ideal' design type
right now, and I cannot agree more. I much prefer a fluid design over a set
layout. For text we know that relative sizing (meaning the use of em, ex, and
percentages) are preferred over the use of pixel sizing.
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, if a Firefox user they may employ 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 a simple observation, and one that is of little importance, 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 it's
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.
If you follow that rule, you should be safe under the normal conditions of
someone who surfs the web with a constantly set increased or decreased text
size (at least of a reasonable amount). Overall... the best suggestion I have
is to always toy around with your zoom... your visitors will.
You can view some sample screenshots of what can happen to a zoomed site by
going
here (the original posting).
About the Author
Nicole Hernandez is a web developer with a specialty in web standards and
accessibility. She is the owner of Website
Style and publishes technical articles on her blog called
Beyond Caffeine.
|
