The original version of this article was first published on IBM
developerWorks, and is property of Westtech Information Services. This
document is an updated version of the original article, and contains
various improvements made by the Gentoo Linux Documentation team.
This document is not actively maintained.
The gentoo.org redesign, Part 3: A site reborn
The new main pages
The site so far
So far, www.gentoo.org is showing marked improvement. In the last article, I designed a new
documentation system using XML and XSLT, so all our site documentation is
looking great and is serving the needs of our visitors. However, the look of
the site as a whole hasn't changed; that's because I haven't really touched the
HTML that users see when they initially visit our site. Our main page still
looks the same as it did before.
Well, it's time for that to change. As I mentioned in the first article, our main page is
getting too congested and we have no room for expansion. As you can see, I've
packed quite a bit of content into the page.
I can't continue piling important links and paragraphs onto the main page --
there isn't any room! Fortunately for us, real estate on the Web is absolutely
So, to solve this problem, I'll split our single main page (index.html) into
several subject-specific category pages (index-about.html, index-download.html,
etc.) and create a menu system that will allow the user to easily move from one
category page to another. The default page that loads when a user visits
http://www.gentoo.org will be the "About Gentoo Linux" category page.
This is an excellent choice because it provides general information about the
project that will be of interest to first-time visitors.
Now, I'm going to outline the goals of this new "category page" system, as well
as some general design goals that you can apply to your own projects. Then,
we'll take a look at how the category page redesign meets these goals.
The new category page system needs to be modular. What does this mean, exactly?
Well, at the moment I have "About Gentoo Linux" and "Download/Install"
categories in mind, but in the future I may need to add "About the Team" or
"Support" categories as well. Having the ability to easily add new categories
in the future requires that accommodations be put in place during the design
stage. I'll have to make sure that there's room for additional category links
on my navigation menu, and that the layout of the page is general-purpose
enough so that it can be used to present many different kinds of information.
Then, adding new categories will be relatively easy and I'll be able to avoid
completely redesigning the site, if in a few months I once again find that
things don't fit.
There is a very important second step to modular design -- the use of XML and
XSLT to separate presentation from content. If you've read part 2 of this
series, then you're at least familiar with this type of design. Once I have the
proper XSL template created, I can generate as many category pages as I like by
simply providing the proper XML. And unlike the HTML, my XML will contain no
display-related information; it's pure content. We'll take a look at the
XML/XSLT implementation of the category pages in the fourth and final
installment in this series.
General style guidelines
It's also very important that the new category layout be visually appealing.
Remember, when a user types in http://www.gentoo.org, the "About Gentoo Linux"
category page will appear first, so I want this to be an attractive page. Now,
the word "attractive" means different things to different people, but this
article presents a few good general guidelines that I am using during the
design of the new category page that should apply to almost any Web site.
That boxy look
For general page layout, simple is best. If you're going to organize a bunch of
complicated information, why not use a master table to split the page into
various regions? This will also help to ensure that various parts of the page
line up, which makes for a clean, attractive design. For example, this
particular type of page layout is generally not very appealing:
Figure 1.1: A sub-optimal page layout
However, if the same information is presented using a common master grid, the
site starts looking a lot cleaner:
Figure 1.2: Aligned to a grid, things become less confusing
And remember, the simpler your layout, the more information you'll be able to
pack into the page without annoying your visitors
Text and background color
Next, we come to color choice. I have to admit that I happen to find bright
green text on a dark blue background very appealing. But let's face it -- no
matter how exotic and nifty they may look, dark backgrounds are a poor choice
for text regions on a Web site. People expect to see dark text on a light
background, and I for one think we should give them what they want.
Well, I should clarify my position. Using light text on a dark background is a
horrible choice for presenting paragraphs of information, but can be quite
attractive and functional for your menu bar, or a small list of links. In other
words, inverted text can be a great accent, but go with a traditional color
scheme for your main text content areas; you'll thank me later. This will also
help to ensure that your site looks good on paper.
Besides the dark text/light background issue, there aren't many hard rules when
it comes to Web site design. If you like dark colors, it's perfectly fine to
make the top part of the page dark blue, for example. Now, hear me correctly:
If you make the entire page dark blue, you've done a bad thing. If you make a
portion of the page (preferably a portion of the page that doesn't have much
text in it) dark blue, you might actually be doing a very good thing, because
that dark blue will contrast nicely with your white text area and add some
additional drama to your new site. In fact, a large portion of your page can
contain saturated or dark colors; again, just make sure that your main text
content is presented in a traditional fashion.
I also want to ensure that the Web page is neither too cluttered nor too
sparse. I suppose that all of us struggle with this challenge; some of us have
a tendency to pack so much information into a page that it becomes totally
unintelligible, while others include so many large margins and useless empty
spaces that users are forced to scroll down several pages to find the
information they need. For the new category pages, I want to use minimal
margins -- just enough to keep things readable would be good, I figure. I'll
only use empty spaces on the page if things are truly getting too cluttered.
After all, the whole purpose of these category pages is to solve a space
problem, and it would be good to concentrate as much information into as small
a space as possible, as long as readability isn't compromised in the process.
A high information density has another advantage: Users are less likely to need
to scroll down to find the information they need. This makes the page
significantly more pleasant to use. (If you don't believe me, design a couple
of mock-up pages and see for yourself.)
Content supercedes art
In working on the site layout, I have quickly learned that a Web page redesign
should primarily be used as an opportunity to present content (actual
information that's useful to my visitors) in a readable and meaningful way,
rather than just another occasion to make an artistic statement or to exude
large quantities of -- er -- corporate identity. Not that artistic statements
are necessarily forbidden, but if by making one I hurt the presentation of my
content, then I'm not doing my visitors a favor.
Once in a while, it's a good idea to step back and acknowledge that the people
who are visiting our site are primarily looking for information rather than
zany new approaches to Web design. If this is something you struggle with, be
comforted: I, too, am tempted to focus on artsy stuff and leave all other
priorities at the wayside.
Now that we've covered some of my redesign goals, let's take a look at the new
gentoo.org category pages. Here's the new page that you're greeted with when
you visit http://www.gentoo.org:
Figure 1.3: The new www.gentoo.org main page
I have to say that I'm really pleased with the redesign, and I really like the
look of the new site. Notice how tables are used to break the page into four
regions: the top left logo area, the black menu area, the gray infobar area,
and the white main content area. Also notice that the clean alignment of these
four regions makes the design simple yet attractive.
Now, look at the colors. As I mentioned earlier, I'm a big fan of extremely
dark Web sites. However, because a very dark site is a bad thing, I reached a
compromise: Dark parts were limited to the top regions, and inverted text was
used only in the menu region, the logo and the title for the floating "Gentoo
Linux Features" box. Because these parts of the page aren't used to present
large quantities of text, I'm not going to annoy my visitors. Instead, they
serve as nice accents to the main (white) text content area. Here's a snapshot
of the "Download/Install" category page:
Figure 1.4: The www.gentoo.org download/install page
Another thing worth commenting on: You have probably noticed that the blue
"flying saucer guy" and the red "gentoo" logo are from my original site. I
decided to integrate these graphics into the new design so that the new main
index.html page still looks familiar to my regular visitors. However, I omitted
the "flying saucer guy" on every other page besides the main page so that more
information could fit on the screen. The red "gentoo" logo was kept on every
page because it helps to make the white content area more visually appealing
and draws attention to the category title.
The nav-menu and title
As you can see, the name of the current page is highlighted in bright green in
the navigation menu, thanks to cascading style sheets (or CSS), and the current
page name is repeated immediately below the red "gentoo" logo in the main
content area. While I initially thought that this wasn't necessary, I found
that simply highlighting the current page's navigation menu entry in green
wasn't enough to provide users with an indication of what page they were on.
Despite the clean look of the new site, I am cramming quite a bit of
information into the page. One advantage to this is that under most display
resolutions, a visitor will only need to scroll down to finish reading the main
text. However, all hyperlinks should be immediately visible and accessible,
requiring no vertical scrolling by the user. This makes the site as a whole
easier to navigate -- a big win for usability.
Lost in Xara
Just looking at the site doesn't really give you an idea of what the redesign
process was like. I actually made a number of major logistical mistakes from
the onset of the redesign. My greatest error was to immediately fire up Xara in
an attempt to develop the new look for the category pages.
Once in Xara, I wasted a lot of time focusing almost exclusively on eye candy
rather than on page layout. By doing so, I put the cart before the horse and
ended up creating around 20 design prototypes that I eventually had to throw
away. In the end, these prototypes were of no use to me because they did not
deal with how to present the content.
Finally, I regained my senses, exited Xara, fired up a text editor, and wrotes
the raw text that would appear on the page. Once the content was written, I
developed a general page layout to present this text to the user -- no color
schemes or eye candy just yet. Then, and only then, did I return to Xara and
finalize the new look for the site, developing a color scheme and enhancing our
logo. This time, the graphical design process went smoothly and relatively
quickly because I had an existing framework (the text and layout) to direct my
steps. Without this structure, I could have spent the rest of my life playing
around in Xara, developing thousands of what-if design possibilities for the
When you redesign your site, remember that content comes first, layout second,
and graphical embellishments a distant third. By taking this approach, you'll
end up saving yourself a lot of time.
So, I did make a few mistakes during the design process, but I also did a
couple of things right, and one of them was to allow the Gentoo Linux
developers to review and comment on my work as it progressed. As you may recall
from my first article, my action plan identified developers as my
highest-priority target audience, so getting our existing developers involved
in the design was clearly a wise choice.
Doing this was easy. I just kept an IRC client running and connected to our IRC
channel as I normally do, and then whenever I made any significant progress,
I'd generate a .png snapshot of the current site and post it to our Web server.
Then, everyone in the channel could take a look and comment on my work in
These developers acted as my barometer, letting me know what designs and colors
were the most popular, and what types of layouts worked best. If the site
design became too crowded or complicated, someone would let me know and I'd
adjust the HTML accordingly. When the category page design became more
finalized, I started creating tarballs of the site HTML/images so that
developers could play with the code and make any necessary fixes. Thus, the IRC
channel allowed the HTML to be developed in a truly user-centric way. Last, but
not least, the Gentoo Linux developers really helped me to debug the HTML code
so that it was rendered optimally in a variety of modern browsers.
Well, that's it for now. Join me in my next article when I finally
convert the entire site to a fully-modular XML/XSLT-based system. That should
provide some excitement as well as an opportunity to look at a lot of juicy
behind-the-scenes XML development details!
Read the other articles in this developerWorks series about the redesign of
the www.gentoo.org Web site using technologies like XML, XSLT, and Python:
In Part 1, the
author creates a user-centric action plan and introduces pytext, an
embedded Python interpreter (March 2001).
In Part 2, Daniel
shows off the new documentation system and sets up a daily CVS-log
mailing list (May 2001).
In Part 4, Daniel
completes the conversion to XML/XSLT, fixes a host of Netscape 4.x
browser compatibility bugs, and adds an auto-generated XML Changelog to
the site (Aug 2001).
Learn more about cascading style sheets (CSS) by visiting the CSS page at the World Wide Web
Consortium, or W3C.
Check out Xara.com, the home of Xara
X -- an excellent vector drawing package for Windows. With virtually no
bloat, and blazing speed, it has my personal recommendation.
- Learn more about XSLT at http://www.xslt.com
When you wake up, check out Sablotron, a nice, fast XSLT processor
available from Ginger Alliance