21st Century Web Design Essentials

Reflect for a moment on the Great Internet Buildout of the late 1990s. It's not hard to wax philosophical about the Web's beginnings, when anyone with a few hours’ worth of HTML experience was immediately hired to design Web pages. And who can forget the results? Websites of the boom were often a cyberspace food fight of eye candy and over-hyped technology.

These days, most site design is focused on the improvement and upgrade of existing Websites. As the economy continues to sag, more emphasis has been placed on maintaining what already exists, rather than breaking new ground. As a result, productivity, ROI, and other measures of efficiency have found their way into the lexicon of Web design.

This focus on productivity has seen Website designs go back to basics. With the end user in mind, the core purpose of today’s sites is to provide information or make transactions quickly, simply, and without the distraction of long animated introductions, overblown visuals, or multi-hyperlink black holes.

So let's take a look at the basics of good Web design, as well as some of the current tools and technologies available to assist you in creating powerful, usable Websites. We'll also look at some concepts that are out there on the bleeding edge of design theory and browser technology, just to keep you on the edge of your seat!

Good Websites Start with Good Web Design

In the heady days of the Buildout, Web designers went straight to page design, building the overall concept and user experience one Web page at a time. Only after all the pages were built were they connected together—the results were usually a mess.

In today's world, most Web designers begin by developing a concept before they create their actual Web pages. Several techniques have evolved to assist designers develop a concept, such as wire framing and site architecting. In any of these cases, a designer defines a starting point, then builds out the various parent/child relationships between pages, documents, external links, and so on. In addition, a separate "link framework" can be defined to point to documents or external destinations. And of course, today, programmatic elements such as dynamic markup language, database connectivity, and Web service support are defined before anyone begins to build any pages.

Like a symphony performance, where the music binds each instrument together in harmony, so a Website’s concept definition binds each participant (graphic designer, copywriter, programmer) together in design harmony. And just as the conductor keeps time and manages the performance, the Web project manager uses this concept definition to coordinate resources, and ensure that the Web project moves through its milestones as scheduled.

Current Web authoring software programs, such as Adobe GoLive, provide Web designers with information architecture, user experience definition, and other design tools. With this kind of toolkit, you can architect a better user experience up front. Whether you create this roadmap for yourself or for a team of graphic artists, designers, and copy editors, a well thought-out site design will ensure your symphony doesn't hit any sour notes.

For a glimpse of the future of information architecture, check out a new application by UC Berkeley's Group for User Interface Research, DENIM. This application "sketches" designs, then helps you hook them up together, before exporting the designs as HTML.

1% Perspiration, 99% Presentation

It seems ironic that a communication medium with the potential to provide rich information to billions of people is designed around tables. Tables are optimized to display tabular data in rigid boxes defined by height and width—which is great if you're reading a spreadsheet, but awful if you’re trying to have an interactive experience. Sure, we tried frames for a while, but we all know which way they went. So, just what are designers left with?

Cascading Style Sheets (CSS) seem to offer the most promise for unchaining design from the restrictions of tables. Simply put, CSS enables designers to separate the style of information from its structure.

Typographic elements (fonts, sizes, and so forth), colors, and other design elements are divided into a separate set of HTML that is leveraged for all the data on a page, which helps avoid fatter elements such as image maps. CSS is reusable across multiple pages, which adds to its versatility. CSS Level 2 (CSS2), an upgrade from the original CSS spec that's been in use for several years now, provides additional control and functionality such as "@media," which allows the designer to set specific styles for particular media.

CSS1 took some time to become widely adopted because there were (and in fact continue to be) browser incompatibility issues associated with the technology. While a lot of the problems have since been fixed, it is still advisable to complete thorough browser testing before deploying your CSS-based design. As for CSS2, well, it's still new enough to suffer from a number of deployment problems, so tread lightly. See HTML Utopia – Designing Without Tables Using CSS, Parts 1 and 2 for the ultimate introduction to this topic.

Another concept of note to the burgeoning Web designer is "liquid tables." Tables that stretch and shrink give designers considerable creative flexibility, removing the rigid constraints of standard table design. Liquid table design basically works by setting percentages for width and height, instead of specific pixel measurements.

But be forewarned—liquid design is a complex technique that requires a designer to account for the users’ screen size as a separate element in a design. Elements such as navigation bars and menus become more complex because a range of placement issues must be accounted for in the design. Regardless, well-implemented, liquid pages provide designers with a higher level of flexibility. For an introduction to on liquid design, see Nick Wilson’s article What is Liquid Design?. And for a good primer on the topic, try this article by Rudy Limeback.