“Technology is so much fun but we can drown in our technology. The fog of information can drive out knowledge.”—Daniel J. Boorstin
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 of HTML experience was immediately hired to design Web pages. And who can forget the results? Web sites of the Boom were often a cyberspace food fight of eye candy and over-hyped technology.
These days, most site design is focused on improving and upgrading existing Web sites. As the economy continues to sag, more emphasis has been placed on maintaining what already exists, rather than breaking new ground. So productivity, ROI, and other measures of efficiency have found their way into the lexicon of Web design.
This focus on productivity translates into Web site designs going back to basics. With the end-user in mind, the core purpose of Web sites is to provide information or make transactions quickly, simply, and without the distraction of long animated introductions, distracting visuals, or multi-hyperlink black holes.
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 Web sites. 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 Web Sites 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 result was usually a mess.
In today’s world, most Web designers begin by developing a concept before creating their actual Web pages. Several techniques have evolved to assist in developing a concept, such as wire framing and site architecting. In any of these cases, a designer defines a starting point and 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, programmatic elements such as dynamic markup language, database connectivity, and Web service support are now defined before anyone begins building pages.
Like a symphony performance, where the music binds each instrument together in harmony, so does the concept definition bind each participant (graphic designer, copywriter, programmer) together in design harmony. And just as the conductor keeps time and manages the performance, the project manager uses this concept definition to coordinate resources and insure that the Web project moves through its various 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 Web site design will ensure that your symphony doesn’t hit any sour notes.
If you want a glimpse of the future of information architecture, check out a new application by UC Berkeley’s Group for User Interface Research called DENIM. This application “sketches” designs and then assists you in hooking them up together, 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 are trying to have an interactive experience. Sure, we tried frames for a while—we all know which way that went. So 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, adds additional control and functionality such as “@media,” which allows the designer to set specific styles for a specific media type.
CSS1 took some time to become widely adopted because there were (and continue to be) browser incompatibility issues. While a lot of problems have been fixed, it is still advisable to do thorough browser testing before deploying a CSS-based design. As for CSS2, well, it’s still new enough that there are lots of deployment problems, so tread lightly.
Another concept of note is “liquid tables.” Tables that stretch and shrink give designers much more creative flexibility by removing the rigid constraints of standard table design. It basically works by setting percentages for width and height, instead of specific pixel measurements. Evolt.org is a good example of liquid table implementation.
But be forewarned—it is a very complex technique that requires a designer to account for screen size as a separate element in a design. Elements such as navigation bars and menus become more complex because placement issues must be accounted for on the page. But well-implemented, liquid pages add a higher level of flexibility. For a good primer on liquid tables, see Rudy Limeback’s article at Evolt.org.
There’s Something About XML…
XML is in one sense a markup language like HTML or PHP. However, because tag semantics and tag sets are undefined, rather than fixed, XML is really a “meta-language” for describing other languages that you—the Web designer—define. To use XML, you write a Document Type Definition (DTD) that describes a series of tags and the elements to be used with those tags.
XML’s flexibility is not only its greatest asset, but also its greatest liability. In order for computer systems to talk to each other using XML, they need to share a standard (in the form of a DTD). This invites a lot of coordination problems, especially if different enterprises create different standards for the same application. Security is also an issue, especially for government Web designers, because DTDs need to be shared in order for different systems to communicate together.
Problems aside, there has been a lot of work done around XML this past year, especially by enterprises with critical content management requirements. Small- and middle-market publishers have been aggressively pursuing XML-based workflows that elegantly store data for both print and the Web, and allow for cross-platform sharing of that data. Plus, these homegrown systems contain business rules and other logic that assist with content routing, deadline management, and archiving.
| Sidebar—XSLT |
|
For Web design, eXtensible Stylesheet Language Transformation (XSLT) is of particular interest. It allows Web designers to define transformations on XML documents and XML-based data, creating presentation structures for end-users. And, XSLT can help transform XML into non-XML formats, such as HTML. It can work behind the scenes on the Web server, or on the client-side with more recent browser updates. XSLT is still a very complicated language that requires some programming sophistication. It has not been well incorporated into visual design tools, either. And unfortunately, today’s browsers don’t fully support direct XML rendering, so most XML-based Web sites still need to transform that XML back to HTML for optimum compatibility. However, as design applications and browsers grow more sophisticated, expect to see more support for both XML and XSLT. |
Just Browsing, Thank You
Every Web designer has his/her favorite browser mishap (lined up end-to-end, they’d encircle the earth eight times), so I won’t add more to the pile. In spite of this, the number of browsers continues to grow—Safari and Opera are two of the most recent entries.
Fundamentally, though, the end-user experience remains unchanged from years past. Content and data are presented in a window, and requests for other pages or data are made through this window. Browsers also continue to be thin-client in nature, requiring the Web servers on the other end to do most of the heavy code parsing before presenting results to a user.
If you really want to glimpse the future, consider events taking place at the extreme fringe of browser concepts. Here you will find applications that break the window metaphor and use visualizations, spider-Web imagery, and other non-traditional elements to guide a user to information or a destination. Some of the more interesting concepts include the Ambulator, the DataCloud, and the Webstalker. These ideas have a lot of potential as the traditional PC/monitor interface ages rapidly and the proliferation of wireless devices and wireless connectivity force the design community to deal with a myriad of new presentation platforms.
What Do I Need to Do About It?
As you approach Web site design, ask yourself the following questions:
- Can I get to information in two clicks?
- Are my visuals distracting or useful?
- What technologies are appropriate and not overkill?
- Do I know where I am in the Web site at all times?
- Can I get back to the front/home page with one click?
- Is my site accessible to disabled users?
This list is simple enough, but many Web sites continue to violate these basic rules and frustrate users in the process. Remember, your competitor’s Web site is only one click away, so removing these barriers above will aid in keeping users (and their dollars) at your site.
Some Final Thoughts
The Boom years distracted us from good design techniques as we were lead astray by a rash of new technologies and competitive fervor.
In today’s more competitive but focused world, providing clean, crisp information and interaction design leads to more productivity on the design side and a better user experience on the client side. Plus, design applications have improved over time, incorporating many sophisticated features that allow designers to optimize their creativity, while keeping the programmatic side in check. What’s more, these tools are no longer accused of writing “bloated” code—something that has in the past plagued these applications.
There are still many emerging technologies to deal with, a growing number of presentation platforms, and some lingering issues in today’s browsers, but it boils down to this—good design is good business.
About the Author
 |
Mark Asher is the Group Product Manager for Web publishing solutions at Adobe Systems, Incorporated, where he is responsible for leading the GoLive Product Management team. He has been managing high-technology products for more than eight years, and has been in brand management for over 12 years. Prior to joining Adobe Systems, Asher was Director of Product Management at Rentals, Inc., an application service provider for residential property managers. Asher has also been a Principal Consultant with Pricewaterhousecoopers LLP’s management consulting practice. Asher holds an MBA from the University of Southern California, and a Bachelors Degree in Psychology from UC Berkeley. |
