magazine resources subscribe about advertising

 

 

 








 CD Home < Web Techniques < 2001 < August  

Clean Up, Flatten Out

By Molly E. Holzschlag

When I first started in Web design, I grabbed at everything that came down the assembly line: graphics, animation, Flash. If I didn't use something, I read about it and tried out the code, the software, or the technique. I experimented, and I loved it all. In my frenzy, I made some offensive mistakes, and I still make them. But I'm learning a lot, and one thing I'm noticing is that my bad habits have sometimes gotten in the way of designing aesthetically great sites that embrace today's recommended markup and related practices. It's like being a self-taught guitar player. I'm innovative but encumbered.

In our rush to build the Web, we've fallen into some really limiting habits when it comes to both our visual designs and our technology presentations. The more I study markup—especially in the context of XML—the more I'm convinced that the solution to our design woes lies in the essence of markup, and not in the fun frills.

In my early days as a Web designer, I had friends who'd been in the computer industry for years, had been using the Internet for email, Telnet, FTP, and Usenet. They hated graphics, even hated the idea of GUI access to the Web. They made fun of me for anticipating the possibility of a visual Web, much less a media-rich Web.

It's odd for me—especially with my love of broadband and clever Flash design—to come around to a purist point of view when it comes to visual Web design. Perhaps I'm not as radical as the friends who once teased me, and I don't regret my experimental frenzy one bit. But now it's time for all of us to pay attention to what we're doing, why we're doing it, and for whom. We're challenged to grow into the new wireless and alternative design options.

To formulate a successful contemporary design, we must first study visual design mistakes, examine the alternatives, and find solutions in markup. When we integrate visual design concepts and today's recommended markup options, we make a surprising find: A Web site can be aesthetically appropriate and completely cross-browser, cross-platform compliant.

Where We Went Astray

We tried to make the Web multimedia, but it isn't. Multimedia means multiple media forms operating in an integrated environment. However, the Web was never meant to be a platform for simultaneous delivery of multiple media forms. It was originally created for text. It can deliver multimedia, but the Web is at root a text environment with links as an added component.

The ability to link from one document to many other supportive or referential documents meant that we could break free of the more linear constructs that defined books. When the Web became a graphical environment, it was no longer just text that was linked. Rather, graphics or other media became the objects of this hyper-environment. And so emerged hypermedia. This extension beyond the linear structure is what makes it "hyper," or more than what we had previously experienced. Hypermedia is what makes the Web especially intriguing.

Hypermedia Versus Multimedia

There are very important differences between multimedia and hypermedia. Multimedia is dimensional, and while it's almost always interactive, that interactivity is restricted by context. Hypermedia can also be described as dimensional, but in a less literal sense. Hypermedia adds dimension to a two-dimensional space by attracting a critical mass of people who keep it vibrant and constantly alive. This "dimension" has yet to be defined, but its impact is obvious. Context is less critical for hypermedia than for multimedia, and hypermedia is more organic—it's defined by interactivity, while multimedia more closely resembles a presentation.

Consider more traditional delivery methods for multimedia, such as CD-ROM presentations or kiosks with touch screens. Access is pretty much limited to one person—at most a few—at any given time. The Web can be extremely human in a way that these devices cannot. The fact that we're present in interactions with one another on such a massive scale changes the scope of visual communication—or all communication—greatly.

However, the limitations and ungainliness of multimedia somehow found their way into the visual design of the Web, and it's not a good fit.

Because the Web emerged from a text environment, it's unlikely that most people thought "TV" when they first saw pages in Mosaic. As far as I recall, a graphic looked ungainly against a mid-gray background. Everything was clunky, too big, too slow, or too heavy.

We began creating dimensional objects for Web sites when 15-inch monitors were all the rage. Consider what a mistake it was to try to create dimension on a screen that small. We did it anyway, and we set a very poor precedent. (After all, now that portable devices are all the rage, screens are only getting smaller.)

Today's average monitor has a 17-inch screen, only slightly bigger than a breadbox. Bear in mind that I'm purposely not talking about resolution here, I'm talking about physical size, mass. It's ridiculous to try to stuff so much onto a page. Whether it's text, graphics, media—I don't care. We don't need so many bells and whistles. Simplicity is almost always beautiful, and even at its worst it's not offensive.

So why do we continue to stuff our pages until the seams strain? It all started when we recognized the Web as a possible platform for multimedia, and then decided that multimedia was the best way to use the Web. Sadly, this marginalized hypermedia, as evident in the vast proliferation of debris left over from early days of design—overblown graphics, dancing GIFs, and pages that come complete with soundtracks. We tried to make the Web multimedia. And frighteningly enough, we're still doing it. It's wrong, and it's limiting.

Let's examine what we're doing with design. Isn't it possible that we compromised our ability to explore a uniquely fresh hypermedia environment by imposing an existing notion of multimedia instead?

Why do we want to create objects and place visual ideas in a Web environment that is so obviously visually flat? I think we're striving for something that's tactile. We've tried to make the Web something we could happily touch instead of embracing its more abstract qualities: a nonlinear approach to the flow of thought and information, and an interactive dimension that—while not tactile—promises rich experiences for the user.

Boxed In

Unfortunately, our problems don't stop with multimedia clutter. Once we've swept away the excess, we'll have to deal with the rigid, angular pages left behind.

Rectangles are completely limiting. We've allowed ourselves to be bound by the de facto system of a Web page's infrastructure, particularly in terms of content and shape. We're taking the physical mass of a 17-inch monitor and essentially pasting more rectangles inside its rectangular frame. Borders within borders of content with more borders.

What's even more interesting is examining the markup we've been using to achieve our layouts, namely tables and sometimes frames. Again, we're working on very rigid, rectangular models. The same is true for those few angels who've found a way to make CSS positioning work for them. A box-model still rules the day.

Why do we try to box everything in? Global human expression is filled with curved shapes and structures—circles, spirals, and spheres. Yet those of us in the Western world favor lines, angles, and rectangles. We've revered and respected the linear for so long that the phrase "thinking outside the box" has become synonymous with revolutionary innovation.

Look at a wall in your home. If you have a nice painting or poster, it's probably in a rectangular frame. Windows are rectangles; doors are rectangles. This shape makes up a lot of our world. And that's fine, but we have sky out there too. A screen has no sky.

What it does have is more rectangles. You have a frame around the monitor, your browser frames your content, and some people put borders and frames into the visual design of their pages. For those of you who eschew borders and frames, you're still building on a grid system, which frames the infrastructure. So how do we open things up, give our screens a little bit of sky?

It's a fascinating problem. While CSS2 offers all kinds of powerful border, spacing, and padding options, we've had a solution in CSS1 all along: the use of color and type to achieve shape within the inherent design. If you put all of that into a style sheet, and leave only your content in your markup document, the content will still be accessible by any other platform and device.

Design the Future Today

Several principles will help designers shift away from the legacies of our early mistakes. Let's move into an integrated methodology of client-side development that marries markup and visual aesthetics.

Flatten Your Design. If old belief systems suggest mimicking the tactile world, but adding dimension isn't working, then let go. Get flat.

The Web, at least onscreen, is still a two-dimensional space. This is mechanically true because graphics are displayed in two dimensions. From a technical perspective, you can tap into extremely clean HTML or XHTML combined with CSS. Your site is then readable on every browser, platform, and appliance.

You've separated your formatting and presentation effectively, and you've flattened everything. You have no bevels, no buttons, no shadows, no light sources. You have no tabs, no drop-down menus. You do have color, and you do have content. I'll tell you what to do with that in a minute.

Stop Being Square. It's nearly impossible to break out of the rectangular systems for visual Web design. But contemporary design should open up confined space or create new ways of looking at old space.

Wherever you can, avoid creating lots of rectangles unless you have a specific reason for using them (such as for expressing containment and security). Focus instead on the parts of shapes: lines, curves, and angles. If you do use rectangles, leave them flat against the background—don't add bevels or drop shadows, or any dimension at all.

Ironically, this reduces file size, too. The more effects there are in a graphic, the harder it becomes to compress.

Use Very Few Graphics. I'm convinced that the best designs use only graphics that are absolutely necessary. If you limit your use of graphics, the ones you do use will grab much more attention, especially if they're well planned and well placed.

Use text for links, rely on CSS for effects like removing underlines or creating rollovers. Rely on color for fonts, headers, and all link options. Again, use CSS wherever possible to separate the presentation from the markup, keeping the markup itself very clean.

Keep Scripting and Multimedia to a Minimum. Hate me if you want to, but in most cases, scripting, Flash, Shockwave, and QuickTime elements aren't necessary. Sure, if you're building the next big alternative rock band's Web site, go get happy. And independent Flash artists—you keep doing what you're doing. But when it comes to most commercial site design situations, rely on clever CSS color schemes and keep your markup as uncluttered as possible.

Flatten, Simplify, and Separate. Contemporary visual design should strive to be flat. It should denounce old belief systems about what kind of medium the Web really is and just visually embrace its simple dimension.

Flat design is not only an aesthetic or reactionary choice; it's also a choice that integrates perfectly with Web markup methodologies. This means successfully separating content and presentation, which positions your site for the Web, for wireless, for backward-compatible browsers, for anything.

Today's Web sites remain frighteningly poor in terms of visual design and markup practices. I'm convinced that in their current state, Web standards and visual trends are perfectly matched to offer the best visual design and the cleanest, most platform-versatile offerings around. Learning to balance these issues is the best gift we can give to our audiences, and ourselves.


Molly is the author of numerous books on visual design and Web markup. She holds an M.A. in media studies from New School University. Visit her at www.molly.com.




Copyright © 2003 CMP Media LLC