Washington Apple Pi

A Community of Apple iPad, iPhone and Mac Users

Calculating Pi: Redesigning the Washington Apple Pi Web Site

By Lawrence I. Charters

Washington Apple Pi Journal, reprint information

[See related article]

The Washington Apple Pi site premiered with a new look and feel in September 2003 after a lengthy incubation. The Pi site, like most busy World Wide Web sites, has been in a constant state of evolution since it first appeared in the last millennium. In the spring of 2003, we decided on a more serious and studied redesign effort. Dozens of people were consulted on what was needed, what was desired and what was possible. Numerous proposals were suggested, and half a dozen people mocked up a few working pages, while a couple others drew out sketches.

It soon became clear that virtually everyone is, quite legitimately, qualified to be a Web critic. Novices have concerns about ease of use. Pros have concerns about efficiency, conformance to standards, and subtle elements of style. Alpha geeks are eager to use the very latest versions of server and browser technologies. All told, there were several hundred suggestions (dating back to early 2002), with a great many of them in conflict.

In the end, the redesign was mostly the product of two people: Sheri German and Lawrence Charters. Many others reviewed the site in various stages, and made valuable suggestions, but these two individuals wrote all the underlying code and pages.

Significantly, they’ve never met. Nor have they ever had a conversation on the telephone. All the work was done through electronic mail (several hundred messages) and joint remote editing of HTML pages on the Pi server.

In the dazzling bright world of the 21st century, you really can undertake a major collaborative effort without ever meeting your collaborators or holding a face-to-face meeting. Through E-mail, you can talk about children, the weather, work demands, politics, the decline of English, good movies – and redesigning Web sites – and get real work done.

The opening page of the Pi Web site as of January 18, 2001. Note the classic Washington Apple Pi logo (reversed from that shown on the Journal), the text section describing the Pi as part of the banner, and the colored boxes for different sections of the Web site.

The Two Towers

While the World Wide Web isn’t that old (the first Web server in the U.S. debuted in December 1991, in an all-text format), it is more than old enough to have gone through several generations of technology, developers, designers, advocates, critics, and gurus. In that short period of time, one lesson has come through loud and clear: redesigning a Web site is one of the most dangerous things you can do.

To artists, a redesign is an opportunity to be artistic. To technologists, it is a time to show off technology. To managers, it is a time to exert management – especially on those unruly, undisciplined, and frequently non-communicative artists and technologists. (Being called “non-communicative” by a manager is one of the more interesting ironies of modern society.) To critics, it is a time to complain. To organizations, it is often a time to shine – or die.

Redesigning a Web site can kill an organization. The dangers are numerous, but here are the more common ones:

• The redesign takes up too much time and money, killing the organization. Some businesses have invested so much in their Web site designs that they lacked the capital, and energy, to continue in business, and folded;
• The redesign is so cutting-edge that it is unusable. Several dozen sites were so enthralled with the PNG graphics format when it first came out that they redesigned their entire sites with nothing but PNG images. Unfortunately, the vast majority of Web users at that time were not using browsers capable of viewing PNG graphics so, despite the clear technological advantages of the PNG format, the sites (and the organizations) died: nobody could see them. This problem is not unique to PNG; countless other sites made similar errors by investing heavily in some non-standard technology, and suffered a similar fate;
• The redesign is so “heavy” it is unusable. “Page weight” is one of the most commonly ignored factors during a redesign, yet it is also one of the most critical: if a page is so loaded with graphics or text or tables or animations that it loads very slowly, impatient Web viewers won’t try very hard to visit. A common mistake is for a designer to fall into fantasies of greatness: “Well, CNN [or Disney, or Toyota, or IBM, or some other household name] has pages just as graphics intensive.” But unless you are as famous as Paramount Pictures or Apple Computer, visitors won’t stick around, and nobody will see the site;
• The redesign is simply annoying. “Annoying” is subjective, and can take many forms. One common error is thinking, for example, that purple text on a black background looks very edgy and state-of-the art; to most people, it is simply hard to read and annoying. Some designers think “mystery meat” navigation – where the user is forced to hunt and click on various unlabeled oddly-shaped graphics to find their way around – is cutting edge, but most visitors find it simply annoying. Other designers believe an opening page which tells you to wait while a massive Flash animation downloads is state-of-the-art; most people, again, think it is simply annoying. Generally speaking, almost any site that was “redesigned” with animations, graphics and funky text simply to look “cool” will be found, in the end, to be annoying. Annoying sites die, though probably not fast enough;
• The redesign banishes text in favor of graphics. This is actually fairly subtle; what’s wrong with graphics? The answer is: graphics should not replace text. If your opening page gives the name and purpose of your organization, and you decide it would look better done up as a nice graphic with state-of-the-art typography, you’ve rendered it invisible. By far the vast majority of most Web visitors come to any given site via search engines, and search engines can’t “see” graphics; they only index text. Even Google’s famed graphics search engine actually indexes the names of graphic files and their text ALT tags. By redesigning a site with little or no text, the site vanishes from search engines – and people stop coming to visit;
• The redesign throws everything away, and starts over. This is the most common fatal mistake. If you start from the premise that a given Web site has content, and the content has attracted visitors, or customers, or fans, or users, then throwing the content away is obviously a bad idea. Browser bookmarks no longer work, links from other sites break, and search engine entries are useless. For all practical purposes, the site has died – and yet managers, interested in exerting “management control,” or designers, interested in exerting “artistic freedom,” make this error more often than any other.

Obviously, a redesigned Pi Web site should be an improvement on the old. We needed to avoid coming up with something that was annoying, or that depended on some technology not generally available, or that sucked up so much time and resources that it became an oppressive burden, impossible to complete. After stripping away all the usual methods of killing a Web site through redesign, we came up with two main goals: preserve content, and improve accessibility.

What, exactly, does “content” mean? Simply stated, the Washington Apple Pi Web site is huge. While Apple and IBM have Web sites that dwarf the Pi’s, in fact the average Web site is four pages, or less. The Pi Web site, in contrast, has thousands of pages, some of them written nearly a decade ago (the original site ran on a PowerBook 140). It serves as a “site of record,” telling the world not only what the Pi is currently doing, but what we did ten years ago, or even 25 years ago.

Every month, the most commonly viewed pages on the Pi site are the opening pages, contacts pages, and forthcoming events pages. But the most heavily visited sections of the Pi site are those devoted to reprints from the Washington Apple Pi Journal, or photo essays and meeting reports from past meetings and events. While the average Web site gets only around 5,000 “hits” a year (yes: per year); the Pi Web site gets far more traffic every day.

“ Accessibility,” the other main goal, has many different meanings. In the simplest sense, it means: can someone actually view a page before expiring of boredom? Despite predictions that “everyone will have broadband” in the 21st century, most Internet users aren’t even sure what “broadband” means, and still use dial-up modems for access, so the redesigned site needed to load as rapidly as possible, even over a modem. We also had to assume that some Pi members would stick to older browsers, slower machines, and small monitors. While we didn’t make any special effort to handle PDAs or the needs of the visually impaired, we also tried not to do anything that was obviously incompatible with such access.

There was another kind of access almost as important: access for content providers. Over 100 different individuals have written pages for the Pi site, ranging from SIG (Special Interest Group) pages to documentation for various Pi activities to configuration pages to meeting notes. We wanted to come up with a template that would take care of the look, feel and basic navigation, and leave the content providers – Pi members who volunteered (or were volunteered) to handle specific sections – to worry about the content itself.

The opening page of the Pi Web site as of December 11, 2003. The Pi logo has been modified to make it more horizontal, the description of the Pi has been removed from the banner and placed in the text, and the side navigation has been collapsed into expandable buttons.

Return of the King Content

Of course, there were some other considerations, too, with perhaps the biggest being “branding.” When you look at a Web page on the Pi site, is it obviously a Washington Apple Pi page? This seems a trivial question, but Washington Apple Pi has, since its founding, been misidentified as being in Washington State. The Pi site has tried to overcome this by having a red, white and blue color scheme, and by using the Capitol dome in the logo. Yet we still receive E-mail from vendors asking “where do you meet in Seattle?” and “Can you arrange a visit to Microsoft for us?” One vendor representative, after doing a demonstration at one of our General Meetings, was even quoted on his firm’s Web site as saying he was treated warmly by the “fine folks at Washington Apple Pi in Seattle.” He flew from San Francisco to Dulles and back and thought he was in Seattle?

Our challenge, then, was to see if we could enhance the “branding.” Inspired in part by the vividly colorful interface of Mac OS X, we experimented with using more saturated colors to emphasize the red, white and blue color scheme. (Evergreen green, in particular, is out.) This requires a fair degree of subtlety, since thousands of organizations in and near Washington, DC, drape themselves, and their Web sites, in the US flag. We didn’t want to appear to be a political party, or a lobbying group, or a Beltway bandit vying for a government contract.

While we were working on the idea, another group in the Pi was investigating the idea of a new logo. This actually caused us some momentary panic: do we proceed with our existing logo, or wait and see if someone comes up with a new one? Since creating a good logo is a complex task that can take months, and sometimes years -- you need something that can be blown up large on a poster, but also look good on a business card – we decided to “proceed until apprehended.”

Through the judicious use of server side includes (SSI) and cascading style sheets (CSS), we also had a fallback strategy: we could change – everything – with relative ease. Server side includes allow you to define a portion of a Web page – typically the banner, side navigation, and footer – as independent pieces of code that are never actually part of the Web page code itself. The server, in response to requests from visiting browsers, assembles the page dynamically, from component parts. External cascading style sheets use a similar idea to control the look of text and layout on a page, without actually being part of the page code. If the Pi were to adopt a new logo tomorrow, we would (after first grumbling about all the work involved) change one simple text file, add one new graphic element – the new logo – and all the pages would magically change in an instant.

When the new design premiered in September 2003, the planning paid off. The content was still there, but it certainly didn’t look the same, and under the hood there were vast differences. Content was still king, but with a new wardrobe.

Fourth book in the trilogy

There is still much work to be done, thousands of pages, in fact. Many of the Pi pages were created so long ago that no special HTML editing tools existed, so they were written with TeachText, and are by no measure compliant with the new, improved, Web Standards-compliant design. Converting thousands of pages over to the new design will take lots of volunteer time. Some pages, such as photo galleries of various Pi events, may never be converted; they work fine as is and, except for not following the new layout, there is no compelling reason to spend the time to convert them. On the bright side: for those pages that are converted to the new design, CSS and SSI technology will make future redesigns very easy.

At least one huge section, “Electric Pi,” the reprint section of the Washington Apple Pi Journal, requires special attention. This is essentially an entire Web site within the Web site. Do we simply use the main site design for this section, or do we come up with a separate design that gives it a distinctive, but related, feel? We’re still debating this issue ourselves, and may not even have an answer, much less a design, by the time this article appears in print.

We’ve tried, in this article and the companion article, “The Revolutionary Pi,” to give some idea for the challenges, considerations, technology and techniques involved in undertaking a major Web site redesign. This effort involved a large cross-section of Pi members, with varied interests, different types of expertise, and occasionally differing goals. Eventually, it all came together.

Even if the two main designers, living less than ten miles from one another, never managed to meet.

Resources:

Tyrantula is an interesting, free tool that allows you to look at the underlying structure of a Web page, doing a text analysis, content analysis and descriptive analysis, plus information on the host software. You can also view the source code (color coded), and get statistical information on each individual graphic on the page. It is Mac OS X-only:
http://www.animalaesthetics.com/tyrantula/

Free Ruler is a free, on-screen, floating ruler that can be set to inches, picas, centimeters or pixels. It is an almost indispensable tool for checking on the width of a Web page, since Web users are willing to scroll vertically, but hate to scroll horizontally. During the redesign of the Pi site, we wanted a design that would just as well at 500 pixels across as it would at 900 pixels across, and Free Ruler helped us check our work. It is Mac OS X-only:
http://www.pascal.com/software/freeruler/

BLT (Braxton’s Link Tester) is a great tool for “auditing” Web sites: you point it to a Web site, and it checks all the links, reporting back missing pages, graphics and other elements. As of this writing, the current version (version 0.2) works fine with Mac OS X 10.2, but will not export results under Mac OS X 10.3. The author has said he’ll look into it when he has a chance. It is free and, as mentioned, Mac OS X 10.2 only:
http://www.braxtech.com/blt/