Avoiding Tab Spillage

Regular commentator on Sciencetext, Hsien-Hsien Lei of DNA news blog eyeondna.com alerted me to the fact that the tabbed navigation on our sibling site Sciencebase.com spills over if users set a larger than default screen font for in their browser. In Firefox, you can change display font size very easily simply by using the Control key in conjunction with the + or - keys. A Control-0 will bring you back to default.

The tabs on Sciencebase work nicely at default font size, spanning the logo neatly, with nothing spilling over or being to short for the header. But, just one font size up makes the Geeky Bits tab bar spill on to a second line, totally ruining the effect. I am working on it right now, and you might find that by the time this post appears, it will be fixed.

But, it got me thinking, do other sites fail the font text for those people who have bigger or smaller font settings? They most certainly do JohnTP.com, one of my favorite bloggers’ blogs, if you Control-+ it will lose most of its upper menu above the top of the screen and you cannot scroll to retrieve it. There is lots of spillage of the sidebar menu over on technology news site BlahBlahTech too, although nothing goes missing.

Some sites cope very well. Sciencetext itself works just fine at one font size up, although nudge it too and things are not quite so glamorous. Digital Inspiration too, seems to work perfectly even with several upward nudges of font size as does the Pure Blogging site, as does SciScoop.com, at least for one nudge up.

Basically, the problem boils down to one of scalability. If the web designer or creator of a theme allows fonts to be scaled rather than fixing them, then at some bigger than default font size setting displaying the page will take it beyond the readily readable. However, setting static font sizes is not the answer as that simply removes the benefits for those who like to read at a large font size and you are liable to turn them off.

The answer is to ensure your site’s theme is scalable, but give the tabs, links, and navigation enough room to move around when someone ups the ante, otherwise there could be some serious spillages.