magazine resources subscribe about advertising

 

 

 








 CD Home < Web Techniques < 2000 < August  

Give Me My Web Space

By Molly E. Holzschlag

I'd like to tell a story about the New York apartments of my childhood. My aunts typically had every piece of furniture brought over from the old country jammed into the place. On top of that they'd have lace doilies, and on top of those, knick-knacks and do-dads and all kinds of stuff. I always felt horribly tense in this environment. I couldn't move around; it seemed as though I would literally suffocate in the clutter. It wasn't that my aunts weren't clean—goodness knows they were immaculate, but they just had so much jammed into an already small space.

Many Web pages are like my aunts' houses—crowded with do-dads and knick-knacks. As a designer, you can choose to make your pages light, if appropriate. Simplicity in Web design can be a very potent technique. This doesn't mean you have to restrict yourself, but that you should place each element with a purpose in mind. (See " Online" for some example sites that have used space in the right and wrong ways.)

If you have a tiny room with no windows, how do you make it look bigger? One thing you can do is paint it white, or another light color. You can also remove all the stuff and furnish it sparsely, simply. Here are a few ways to make a Web "room" appear more spacious:

  • Avoid adding elements that aren't necessary to the page's content.
  • Balance the size and weight of page elements.
  • Make sure there's ample white space between text and images.
  • Don't place too many "containers" on a page.
  • Be aware of your readers' screen resolution.

If you follow these guidelines, your Web visitors won't feel as I did in those cramped rooms—tense and out of place. Instead, they'll want to sit down and stay a while.

Get Rid of the Clutter

Calculated content involves forethought. What's left out results not only in more space—but space that carries significant subliminal impact. Try this: Look at a page you're working on, or one that you use regularly. Examine the elements—text, links, graphics, and so forth. What can you take away? Anything that doesn't need to be there shouldn't be there. Be ruthless.

During my stay as managing editor at webreview.com, we've spent a little time studying its current design. What is immediately apparent is that the site is very cluttered (see Figure 1). So cluttered, in fact, that it detracts from the rich information on the site. By removing unnecessary elements we'll gain space and help people get to the site's rich content (see Figure 2).

Proximity, Weight, and Size

Proximity is how close or how far visual pieces are from one another. By controlling the proximity of objects on the horizontal and vertical lines of a page, you can emphasize a specific object, point the eye over and toward another object, and create a general balance that's visually satisfying to the visitor.

An element's weight will draw the eye. Images that are too large in relation to other elements on the page create a visual sluggishness, much like heavy furniture in a small room. You should avoid this kind of graphic problem and go for smaller, crisper images that are more effectively related to other elements on screen.

Another issue is size—how big the images should be and how far a page should scroll. Images should never be bigger than a single screen, and in most cases, they need to be much smaller. There are exceptions to this, but a designer has to know what he or she is doing to get away with designing a large image.

Here's a task. Open up your favorite imaging editor, and make a canvas that emulates a standard Web screen. Create shapes that mimic page elements: logo, header image, navigation, and text. Move them around the page until you find something that looks balanced and harmonious.

The Meaning of Space

Space is the absence of any tangible piece of design. Yet it is wholly design—and design either falters or succeeds based on how space is used. It guides the eye, it offers a cushion between harder edges, and it allows a place for the mind to rest for a moment before absorbing more data. But space has another place in design: it is a culturally determined one that speaks to why it is seen as so precious.

In an essay called "On White Space: When Less is More," print designer Keith Robertson gets to the crux of why space is so culturally important. "White space," he writes, "is extravagance. White space is the surface of the paper on which you are printing showing through and on which you are choosing not to print." If economics are a concern, he says, the designer will use as much space on a page as possible. But if prosperity reigns, wasting space is a sign of privilege.

How does this relate to a computer screen? Well, space on the computer is prized. Following Robertson's ideas about space, the small amount of visual real estate on the screen demands that refined, sophisticated, and privileged design will have plenty of space.

Regardless of philosophy, it's imperative to save space because it puts breathing room into design. We need it to give our eyes that comfortable cushion, that greatly desired guidance, the moment to pause and absorb the information and the beauty of what lies before us.

White Space

In design, the goal is to use negative, or "white" space wisely, controlling how much or how little of it the site visitor gets to see. It's important to remember that white space isn't necessarily white. It is whatever color or design the background space of the environment is. So, if my Web page is designed with a black background, its so-called "white" space is actually black space. Similarly, if I use a background graphic pattern then that pattern is my "white" space.

Ways to gain white space include: adding margins with table layouts, block quotes, or style sheets; floating images within text, using horizontal and vertical spacing options via the hspace and vspace attributes in standard HTML, or padding options in CSS; matting images on a solid color for additional space control—as long as it doesn't add too much weight to the final file.

So how do you know if you've got enough space? The page will appear balanced, and the elements on the page will work in harmony. For example, the header graphic will capture my attention, but then lead my eye to the next item of interest—some text, or another image. Both the space and the elements are working together to create an integrated, visual experience.

Certainly, learning to work with space takes some practice, and the more you practice, the more you develop a confident eye. Look through various graphic design books in bookstores and libraries and see the ways designers have used space, both historically and in contemporary design.

The Web Is a Container

When I describe the Web as being a "contained" space, I mean that all of the information you see on a Web site is inside a vessel. In fact, more than one vessel holds a site's information. You not only have the confines of the physical monitor to deal with, but you also have the browser window surrounding your design.

Other common things are traditionally framed and matted. Frames are akin to the parameters of a computer monitor; the matting around a picture can be compared to the Web browser's toolbars, status bar, and sidebars. But here's the difference: You don't spend hours looking at a degree or a piece of framed art. You look for a few moments, then you look away. However, many people spend considerable time fixing their eyes on Web pages. Even television and film, with which we engage for large amounts of time, don't always have to contend with the matting of a browser. Furthermore, TV and movie screens tend to be pretty large these days.

Some simple but important tricks for avoiding over-containing Web space include:

  • Use borders within table layouts sparingly.
  • Avoid bordered frames.
  • Use borders around images only where appropriate in a design. A better choice would be to find an interesting edge effect.

Conflict Resolution

Monitors, computers, and video graphics cards work in tandem. One result of their working relationship is resolution: the number of pixels available per viewable screen. As you may know, the lowest resolution in common use today is 640 pixels wide and 480 pixels high. Other resolutions include the very common 800x600, the popular 1024x768, and the luxurious 1600x1200.

The higher the numeric value of a resolution, the crisper and clearer the images the monitor will output—assuming that all the hardware is functioning properly. Ideally, Web designers have monitors that support a range of resolutions, so they can test the way pages will appear at various resolutions.

I've already mentioned that the browser creates a visual constraint, but that's not all it does. Web browsers eat up real estate. The toolbars and status bar of a Web browser will take up a certain amount of the vertical space. The sidebar and scroll bar consume horizontal space. Yes, end users can customize the toolbars on a browser and gain space, but many Web visitors leave their browsers on the default settings, which sucks up the maximum space allowed.

Some options for dealing with resolution concerns include designing to the most appropriate resolution for your audience, designing dynamically so your pages look good at any resolution, and using JavaScript and multiple design versions to accommodate as many visitors as possible.

Had Enough?

Check your work: Have you added margins? Accommodated a variety of screen resolutions? Balanced text and objects so that the eye is led where you want it to go? If so, you've improved your use of space. In today's cluttered, busy Web pages, we could all use a nice, spacious place to rest a spell.


An author, instructor, and designer, Molly has been honored by Webgrrls as one of the 25 Most Influential Women on the Web. She has written and contributed to numerous books about the Internet and the Web. Visit her Web site at www.molly.com.




Copyright © 2003 CMP Media LLC