Making Popular Layout Decisions

You’re a Web designer, right? You fascist oppressor. What gives you the right to be so arrogant and close-minded?

Amazing, isn’t it? We’ve only just met and here I am insulting and berating you. And you don’t even know why, though you might have some idea.

Let me clear it up for you: in your last three design projects, you excluded visitors, ran roughshod over user expectations, and generally displayed a lack of understanding of the medium. This is the case no matter what design techniques you used; no matter whose books you read; no matter what you did. You thug.

What the blinking font am I talking about? I’m talking about Web design, which requires a constant balancing of pros and cons, and which does not admit to universally applicable answers. Unfortunately, this means that when you make a choice in how to style your site, you’re going to annoy somebody. Change that decision, and you’ll annoy somebody different.

Let’s take the eternal debate of fixed versus liquid (or fluid or elastic or jello or whatever term you prefer) layout. On the one hand, you have the ability to set your design layout at a fixed width, using pixels or ems or some other fixed unit of measure. This has the advantage of giving you a more-or-less controlled design space, and as a bonus can help overcome some annoying positioning bugs in IE/Win. On the down side, if a user has a really wide browser window, then there’s a whole bunch of white space to the sides of the design’s content; alternatively, a very narrow browser window will invoke the dreaded horizontal scrollbar (eeeek!).

The other choice is to go fluid (or liquid or whatever), using mainly percentages to define the widths of layout areas. The win here is that your content will always fill the browser window, or at least some portion of it, regardless of that window’s width. No ugly leftover whitespace! On the other hand, users with really wide windows will get really long lines of text, which most people find difficult to read; at the other end, a really narrow window can mean single-word lines of text or, worse, some content overlapping other content.

Given the nature of the Web, you picked one or the other of these layout techniques. In so doing, you alienated some users. How dare you be so exclusive?

Okay, okay, time for a confession: I don’t really think you were being exclusive, or arrogant, or a fascist when you made your design decisions. But there are those out there who do, and believe me, I’ve heard from them. You may have as well. Here’s my point: you can never satisfy everyone with your choices of Web design techniques. It is simply not possible.

Let’s consider another ancient Holy War: font sizing. You have pixel-set text, and then you have “scaled” text that uses ems or percentages. The former is more visually predictable, but can’t be resized in IE/Win; the latter is a slippery beast, and can yield inconsistent results between browsers.So you have an approach that reduces accessibility and an approach that reduces design fidelity. Which will you choose? Let’s say you pick “scaled” text, believing that some loss of predictability is worth the accessibility gains. I hope it’s one of those spiffy new Web 2.0 sites with the big friendly fonts, because if you drop the text size so much as a percentage point below the user’s default, you’re arrogantly assuming that you know better than the user what size text should be. After all, if they wanted text to be smaller, they’d have configured their browser appropriately, right?

Wrong. You and I both know this doesn’t happen. Even people with genuine accessibility needs are by and large unaware of the accessibility features already available in their browsers. Just about nobody ever changes their default text size on purpose, and only a few do it by accident (try holding the Control key down while you use your mouse’s scroll wheel in an Explorer window some time).

And yet, those who push the “no font smaller than 100%” point of view are still users, no more or less than the ones who don’t know what a font is. If you leave text sizes alone, you’re potentially annoying one set of users by making the text big and clunky; make the text smaller so it looks better for most people, and you’re annoying those who actually did configure their browsers to default to 12-pixel text. Plus you’re also annoying people who browser the Web with CAD-level monitors that have a zillion pixels per inch and so draw 11-pixel text like it’s on a microfiche. (Trust me, they’re out there.)

So what’s the single perfect solution to font sizing? There is none. As with layout types, you have to weigh the alternatives and pick the solution that best fits the project and the audience. Once you’ve made your decision, you need to remember that some fraction of your users will be annoyed and possibly offended, if they’re particularly thin-skinned. Keeping that fraction as small as possible is a sensible goal; trying to bring it down to zero is a fool’s errand.

This is no great revelation to you, I’m sure, but it’s something I feel needs to be strongly restated. Web design has come a long way, but it’s still an immature field. The technology is not so advanced that we can solve these problems once and for all. Even if we had the technology to do so, I’m not convinced that we even know what the best solutions would be. Sure, there are plenty of opinions, but precious little study and still less experience. That may seem a strange thing to say about a 13-year-old field, but it’s true. The Web is rapidly becoming more than 640×480 versus 800×600 versus 1024×768; now we have cellphones and PDAs and kiosks and wall displays to worry about. How can you design in such a way to accomodate different platforms. The probable answer is that you can’t: you design separately for each class of display. But that’s just my opinion, backed up by nothing more than my view of the world and my time spent in it.

At a certain point, there are no certain answers. Yes, there are many known facts in Web design. JPEGs are better than GIFs for photographs; GIFs are better than JPEGs for line art. (And PNGs are better than everything else, including sponge cake with buttercream frosting and sprinkles, but browser support has held them in limbo for most of a decade now.)

Past those, you have to draw on your experience and professional judgment to pick a given design approach. You have to make a judgment call, one that will appear wrong to some fraction of your users. You have to accept this when you consider what kind of a site you’re creating and who its audience will be, carefully weigh the choices you have to make, and pick the ones that best serve the project’s needs. That involves knowing the circumstances in which your decisions will break down (e.g., a fixed-width design in a very wide browser window) as well as those in which they’ll work wonderfully.

When you minimize the former and maximize the latter, when you bring user complaints to a minimum by bringing your skills to bear on the problem that faces you, then you’ve done your job and done it well. Be proud of that, and don’t let anyone take it away from you.

Comments

6 comments on “Making Popular Layout Decisions

  1. Many now interests how correctly to eat. The number of the people dissatisfied with the figure or health recently has increased and, as consequence, trying to get rid of excess weight. You should pick up a diet approaching you, and also learn to make correctly balanced diet.

  2. Past those, you have to draw on your fidelity 401k experience and professional judgment to pick a given design approach. You have to make a judgment call, one that will appear wrong to some fraction of your users. You have to accept this when you consider what kind of a site you’re creating and who its audience will be, carefully weigh the choices you have to make, and pick the ones that best serve the project’s needs. That involves knowing the circumstances in which your decisions will break down (e.g., a fixed-width design in a very wide browser window) as well as those in which they’ll work wonderfully.

  3. i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..

  4. Pingback: Tagz | "Vitamin Features » Making Popular Layout Decisions" | Comments

  5. Thanks for this post. At some point any serious designer will realize that their own sense of good, functional design is their best guide.

    I think there will always be the camps of zealots who love the rules more than the ideas those rules are meant to promote. This is a good thing. Extreme apathy needs extreme opposition.

    More than anything, I wish the Dark Side and the Light Side could get together and come up with the tools needed to make everyone happy. Technologies built on HTML and CSS are ultimately inadequate. We need more expressive languages for both semantic and cosmetic design. The ones we currently have are not getting better, they're just getting more complicated. We need lower-level interpretive code – get rid of the "browser".

    In the meantime, we need the designers of alternate browsing agents to get their act together and make better products; meet us halfway – we care, but most of our work is not accessibility related because most of our visitors don't have accessibility issues. Apply this pressure to the companies who make your preferred agent; it will be easier than redesigning the entire web.

  6. Thanks a lot! I am just learning Information.
    And php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again…