[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.
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:
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.
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.
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.
Tyrantula is an interesting, free tool that allows you to look
at the underlying structure of a Web page, doing a text analysis,
analysis and descriptive
analysis, plus information on the host software. You can also view
the source code (color coded), and get statistical information
on the page. It is Mac OS X-only:
Free Ruler is a free, on-screen, floating ruler that can be set
to inches, picas, centimeters or pixels. It is an almost indispensable
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
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
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: