The web is littered with broken static layouts that don’t scale with resolution or font size. The need to fix this crap is becoming more pressing as display resolutions increase. The problem is far beyond aesthetics – even today, many popular sites become horribly broken and unusable when font sizes are increased. I’ve illustrated the problem with screenshots and I’ve outlined a few solutions that all web designers should consider.

Before I start, let me say that I’m not mad at any of the sites I mention. I’m just mad at technology.

What do I mean by static layouts?

Websites are viewed by people under wildly different conditions: different operating systems, browsers, resolutions, and font sizes. Most know this, but designers seem to build sites that only work in specific environments. We’ve grown past designing for single browsers as we did in the dark ages, but what about different resolutions and fonts?

Some sites declare themselves to be a static width, say, 700 pixels. That looks fine if your browser is maximized and you’re using a 1024×768 resolution; but what if you’ve got your browser sized to only half the width of the screen? Then you get a horizontal scroll bar. Reading with a horizontal scroll bar is synonymous with pain (which is bad).

What if the resolution is 1920×1200 and the browser is maximized? Then that 700-pixel site becomes a tiny sliver in the middle of a huge browser, and the visitor becomes frustrated that you’re wasting all of that screen space.

Even more insidious are layout elements containing text which are precisely sized using pixels. Pixels do not scale with the font size, so as fonts increase (or decrease), your layout will become out of wack.

But who cares – who increases their font size anyway? I’ll tell you who — ask any elderly person with a laptop. The screen is too small and the resolution too high to be able to read text. Solution? Boost those font sizes up. In fact, I suspect a large number of people want to boost their fonts up but are badgered into chronic, worsening eye fatigue because most webpages just don’t work with bigger fonts. But the number of people increasing font sizes will only grow as laptops keep getting higher resolution displays.

How bad is it? Oh it’s real bad

I’m sure everyone has run into layouts that are fixed width; you’ve seen them, they’re annoying, they prevent you from resizing your web browser.

But the problem with font sizes is not well known. If you cruise the web with fonts turned up, I’m sure you’re familiar with the horror. If you don’t, I’m going to illustrate it with some screenshots of websites viewed with font sizes increased.

Ever seen one of those little “digg this” buttons? They’re literally all over the web, and they’re usually sized in pixels.

I’m assuming that’s 240ish diggs, not 2000, but it would be great if I could actually see the number. Keeps me from clicking it every time I see it.

Even worse

Google Adwords from OSNews, sized in pixels. Google/OSNews/whoever is sure wasting bandwidth showing me ads I can’t read.

Worst of all (this belongs in the hall of shame)

That’s a screenshot of me trying to set a flight date on orbitz.com. This shows just how harmful static layouts can be. The little, obtrusive popup calendar is sized in pixels, meaning the designer assumed all people would be using the same fonts as them, at the same size. The result? Almost all of the calendar is cut off and it’s shamefully unusable. Where are the rest of the dates? Orbitz lost real business because of this — I literally closed my browser when I saw that, disgusted, and found another site to book a flight.

What to do about it

If you’re a web designer, read below. If you’re not a designer, email the owners of broken sites and tell them to read below.

Making a site that’s completely fluid with CSS and modern browser quirks is hard; don’t kid yourself. However, making a site that’s good enough and that will not cause visitors to curse you and your children is not difficult.

Variable width / fluid layouts

If you haven’t already, make your site at least somewhat variable-width. This means define your width as something variable, e.g. “width:100%”.

A few artsy sites can get away with fixed-width layouts, but everyone else should design for flexibility. I realize some sites don’t look good when they’re really wide, and some look bad when they’re too small. That’s why CSS introduced the max-width and min-width properties: give your a site range of widths so it will work under many conditions.

A minimum width of 500px and a max width of 1000px or 1200px is usually enough to be usable by most people (see it in action). Internet Explorer doesn’t support these properties, so you may have to do a few backflips and incantations to get them working.

But I want my width to be the size of a print paragraph!

If you write essays and want the page to read like print (such that there is a “readable” number of characters on each line), fine – just make sure the layout is sized using characters (i.e. em units) and not pixels. If a user increases their font size, your page’s width won’t grow if it’s defined in pixels.

Coping with font sizes…

… is actually pretty easy. It’s easy to debug because it’s so easy to test. Open your website, and hit CTRL++ a few times in Firefox, or CTRL+[scroll wheel] in Internet Explorer, and you’ll quickly see how your site behaves under different font sizes.

If you put text inside of a graphical container, make sure that the container can stretch to accommodate what’s inside of it. Do not make one big bitmap image, set it as the background for your text, and hope the text doesn’t flow out of it, like these guys did:

Instead, use containers that are fluid and can cope with content that changes. It may be a little more CSS and markup, but you can put all kinds of content in there and the containers will display beautifully.

If you have text in a menu, make sure that menu can stretch both horizontally and vertically.

This is admittedly hard for horizontal menus, but a horizontal menu should be treated just like a line of text. If the browser gets too small or the text gets too big, it should wrap to the next line! You can see both good and bad form on the same site — the popular registrar namecheap. They have two horizontal menus, one right on top of the other. The bottom one wraps the text (good behavior), the top one doesn’t (looks terrible when fonts are big). Go figure.

I realize that there are many more fancy things you can do, like wrapping layout elements to the next line instead of simply resizing them as the browser window is resized. But that stuff is dang hard. If you’re just worried about not pissing people off when they visit your site, the tips in this article should do you just fine.

Spend a little time, try to help fix any sites under your power that are broken. Maintain the sanity of the web.