My Thinkpad T61p widescreen has a very high resolution – 1920×1200 – but the physical screen is only 13 inches wide. This equates to approximately 18 characters per inch when using a word processor and when reading many web pages. Even with setting the operating system for things like “use large fonts” etc, most pages display tiny fonts. I will admit some of this is my eyes but it is most predominant on this high DPI display. The majority of the trouble was when reading web pages so I started increasing the font size in Firefox, first just hitting “CTRL-+” and then latter, installing the NoSquint plug-in. What I noticed was that some sites were making bad assumptions about the display font size. This manifested itself in text running into other text or text overlapping graphics. The problems begin when a web designer assumes both horizontal and vertical  screen real estate. When text can wrap and expand, pages work pretty well. Even when layout needs to be better managed, it’s possible to leave some “breathing room”. Obviously, accommodating for a wide range of scaling is not reasonable, it’s not out of reason to allow for 20% or even 50% increase. Here are some examples …

The most common errors occur in the banner of a page. The three examples above – IRS.com, CNN.com, and MSNBC.com were all viewed at 120% 0f normal. The IRS website loses an entire line of links. Without moving the cursor under the button bar, a user would never even notice there is an entire row of links. Over at CNN, there is left aligned text together with right aligned text and anything in between gets crushed. MSNBC has a search box in the banner and it grows left into the corporate logo while the “sign in” to MSN space falls off the right.

Amazon.com does a pretty good job at handling display changes. The image on the left is at 120% and the one on the right is 150%. The “Shop Departments” menu on the homepage was not as forgiving. The text can expand beyond the underlying graphic.

Probably one of the more interesting is the pop-up on Microsoft.com. The “Click to Install” text is not part of the button and thus can wrap onto a new line and below the button’s graphics.

In most of these cases, the issue is the web design separates text from graphics but expects them to stay in lock-step. In early web design, the solution was easy – the text was part of the graphic. This practice fell out of favor as accessibility became a priority. Screen readers can read the text of a webpage but can not read graphics. There are a number of ways to address screen readers – “alt text”, “tags”, alternate pages, and separating the text from the graphics.

It’s easy to make a graphical and visually appealing web site. It’s more difficult to make it accessible. Screen reader support has been the big priority. Color support has been another priority. I think text size should get more attention.

The advent of mobile devices, higher resolution screens, the UMPC fad, and web TV, dictates we revisit the construction of web pages. Perhaps HTML has reached the extent of its applicability. It may be time for some structured XML to focus on web sites with multiple possible renderings.