Everything In Between

In Poker, a little knowledge is a dangerous thing. When you’re an absolute beginner, no one can possibly predict what you are going to do. But sit down and play a few hands, get a feel for the game, and suddenly you’re just a fish in a sea full of sharks.

The same can be said for Web Design. Put a text document up on your web site and what can go wrong? Not that much, yet. But start marking that document up with some basic HTML and things can get ugly very fast if you don’t know what you’re doing.

New Web designers, and even experienced ones at times, constantly ask about screen resolution. They’ve realized that a design meant for a 1024 by 768 display isn’t going to look very good on a display sized at only 800 by 600 pixels. And since we’re working with the infinitely, personally malleable medium that is the Web, web page authors don’t know ahead of time what screen resolution we’ll be using to view their pages with. This can be a real tricky problem.

But like our Poker problem above, the solution is to keep learning new design techniques.

It is interesting to observe that newcomers to Web design only run into this problem when they begin to desire pixel-perfect control over their designs. They elect to wrap their content in a <div> or <table> of fixed-width, and that’s when the problem hits them. Before they made such a rigid design choice, however, the document flow took care of all their resolution-related worries and their pages would stretch with the browser viewport the way the tide is pulled by the moon.

So when I run across a web designer having trouble with this issue, I like to remind them that percentages are their friend. Flexible layouts can be far more elegant than a fixed design ever could. Rather than define a fixed measurement for any element’s dimensions, its dimensions can be sized in relation to its neighbors (or in the case of the root element, the browser viewport). This is known as liquid design.

But even this has some limitations, especially when said viewport becomes really tiny. That’s why a compromise using a resolution-dependant layout can often be the best of both worlds. The key is to realize that differences in hardware, software, and configuration settings will make a page look a bit different wherever you go—and to work with that instead of against it.