The Text Zoom Test for Web Pages
I read a lot of web pages. Unfortunately, most of them use font sizes that are too small for me. So I use the "Text Zoom" feature of my browser (Ctrl++, Ctrl+-, and Ctrl+0 in Mozilla) to make the words bigger.
I have noticed that some web pages don't respond well to this treatment:
- The fixed width column: This happens most on "news" sites. As I increase the font size, the column that contains the text does not grow with it. I end up with a couple of words per line.
- The crazy rules: This happened on at least one weblog that I read regularly. It uses horizontal and vertical rules to separate different areas of content. As I increase the font size, the texts grow as I expected, but the rules jump all over the place, clashing with the text.
- The overlapping layers: This happened for some of the weblogs I read. As I increased the font size, different regions of the page grow into each other, obscuring each others words.
- The disappearing header: Again, on a blog, as the font size increases, the area reserved for the page header remains constant, clipping off first the sub title, then increasing percentages of the bottom portion of the main title.
I suspect most of these are caused by hard coded pixel sizes, and shouldn't be that hard to fix.
Could you please take a moment and do a few text zooms on your web pages for me?
Thank you!
Re: The Text Zoom Test for Web Pages
Re: The Text Zoom Test for Web Pages
Got there before me on csszengarden. Got to love their putting content in images and referencing the gifs from CSS with misleading URLs.
Even using em widths and heights isn't perfect for obvious reasons. If you want things to line up without using tables, then you have run out of options.
I'm utterly amazed how difficult this is to get through to people. If you want to separate styling from content, use CSS. If you want to separate layout from content, do it server side.