Building AoW2 Heaven, Part 2

Don't forget to check the blury image at the top of this page, which is slightly less blury than on the previous page!

I finished my last entry stating my initial "cut & paste" concept was ultimately a bad design that was quickly modified. Looking at the two concepts above, can you spot the major design flaw? Hint: look at the header (i.e, top portion).
.
.
.
.
.
The problem with the main header is that it's simply too ridged. While I really like how the rotating screen shot has a little home up there, along with a convenient place to put the news headlines, all of that stuff in between the left and right header pillars completely fills up the space, and that's no good because its too rigid and can't scale to different screen resolution sizes.

One has to take into account that visitors will be viewing your website in different resolutions, which means a key feature you must factor into your design is that the site can easily scale to meet those varying resolutions.

The current standard (or default) resolution size is 800x600. The PC gaming industry itself is a good litmus test of what the present-day "industry standard" resolution size is. While just two years ago many games supported 640x480 resolution as the default size (e.g., Icewind Dale), today the minimum supported resolution for Icewind Dale II is 800x600, although (obviously) higher resolutions are supported as well. Personally, I have my screen resolution set to 1024x768.

With these principles in mind, a site must fit nicely into a browser window at 800x600 (i.e., no side scrolling required), but must also look good at higher resolutions like 1280x1024 (or higher). I had initially pushed for a default resolution of 1024x768, figuring that AoW2H would be a very active site for at least two years, and by that time the "industry standard" resolution size may have increased to 1024x768. However, since a design based on 800x600 still looks excellent at 1024x768, it was decided to stick with 800x600 as the default design size.

While we're on the subject of browsers, lets talk for a minute about something many website designers overlook: browser compatibility. There are a lot of them out there, and lots of different versions too! Internet Explorer ("IE"), Netscape, Mozilla and Opera are the big ones. Tack on about 4 different versions for each of those browsers and you have a compatibility nightmare.

As we were messing around with our earliest designs, here were some of the anomalies Angel Nojd encountered when viewing the same page with different browser versions:

• Netscape 4.73: Everything looks like garbage, more or less. But this browser is simply too old to worry about.
• Netscape 6.2.1: The page looks good, except that the pillar dividers are missing their middle section.
• Opera 6.01: The header and the footer ruler don't extend all the way to the right. The pillars are missing their middle section.
• Mozilla 0.9.8: The left pillar extends only down as far as the left side has contents. The right pillar extends only as far as the right side has contents.
• Internet Explorer 6.0.26: Everything looks the way its intended it too, with the pillars extending all the way down to the bottom horizontal ruler.

Currently, HeavenGames attempts to make its sites compatible with IE 5.0, Opera 4.0, Netscape 6.2, and Mozilla 0.9.7. Netscape 4.7 is being abandoned because it's a very old piece of software that is awkwardly outdated. As Angel Zen puts it, "[Netscape 4.7 is] the equivalence of trying to run a train on asphalt."

But I digress; back to designing AoW2 Heaven. So, what to do about the header? I liked using the "pillars" from the game interface to separate the left-hand side ("LHS") and right-hand side ("RHS") navigation bars, but the top bar had to go. The center news/content section could be easily scalable (as pure text always is), but the main header graphics would need to be severely modified or thrown out completely if we couldn't get them to easily scale to different resolution sizes.

After a few experiments, we decided to pull out all the screen shots and headlines from the main header and went with a simple straight bar header, similar to Age of Mythology Heaven and Dungeon Siege Heaven.

A straight bar header like this one, with graphics balancing at either end, is easy to scale because the middle is simply a texture pattern. It's also a convenient place to put the title of your site, and to showcase a little bit of the game graphics (which, you'll recall from the first installment of this article series, was one of our design goals). We made several concept headers, all of which you'll see in a later installment of this article series. Jayhawk made the header seen below. One of the problems with this design is that the header has a thick line across its base (the dragon frame segment seen later in this article), and when placed upon the nav bars creates a fat "double line."

click for larger image

So, this is shaping up nicely. We have a scalable header (with the site name and game graphics), a center news/content area, and LHS and RHS nav bars. A clean, efficient structure.

At this point, the design structure was shaping up nicely, but looked pretty drab. I especially didn't like the uniform black (it looked too much like Game Banshee!). I thought the news could stay black (ala Dungeon Siege Heaven), but I wanted to see some colored texture backgrounds for the main header and the LHS and RHS navbars; just something to spruce it up a bit. But what to put there?

While examining some of the earliest screen shots, we noticed there was a subtle texture behind all of the writing on the game interface. It was dark and had just enough texture to offset it from solid black. A good possibility for the news/content section.

If you're viewing this on an LCD screen, like a laptop, the texture may be hard to see.

click for larger image

We also liked the parchment color/texture from the diplomacy screens. Especially the "Circle of Evermore" rune/watermark, representing the six spheres of magic. Another candidate for the news/content section background texture. Jayhawk tried adding that rune in a header concept. The rune would ultimately be incorporated into the header, but in a more subtle way.

Around this time, one of the first major conflicts arose amongst the staff members: what will the primary colors of the site be? Dark? Light? Grey? You want to try and stay away from a "grey" site. Typically, the text isn't all that easy to read. The site your're visiting right now, AoWH, could be considered a "grey" site, as could Zeus Heaven.

I was favoring a dark site with light colored text. Personally, I find it very easy to read light text on a dark site. Nojd, on the other hand, believed a brighter site, with dark text would be easier to read (although he admitted a dark site looked better, it was harder to read). We would spar over this issue for the next several weeks, experimenting with both styles (all of which you'll see in a coming installment of this article series). Nojd's words back on February 12, 2002, however, would be prophetic:

Quoted from Nojd, The Swedish Oracle My ideal mix would be dark background/light text for navigation bars and other smaller areas on the site, and light background/dark text for longer articles.

At the same time we began playing around with the graphic details, we also took a closer look at some of the remaining problem areas. The most obvious being that our site design was still too wide for 800x600 resolution.

The causes of this problem were the LHS and RHS navbars; they were simply too wide. The minimum pixel width for the site was was 800 pixels, which meant each of the navbars needed to be 150/160 pixels max (including the divider graphic); they were currently 187 pixels with the pillars.

Why 160 pixels max? Because the advertising banners need to fit into the main content section between the nav bars. If the nav bars are over 160 pixels wide, you are going to have ugly issues with ad banners pushing the RHS navbar off the screen at 800x600 resolution viewing size.

We liked the pillars and tried several things to make them work, from a gradual tapering of the size, to cutting them down a bit:

click for larger image

But with those skinny divider lines, the top bar of the navbars look much too bulky; there was essentially a double-line and was wasteful. Bluecollarheaven was the first recognize the pillars just weren't blending too well with the direction the site design was heading, so ultimately the pillars were completely eliminated.

Well, now we were without navbar dividers, so we rooted around in our spare parts bin to see what we could find. We also examined more game interface screen shots looking for inspiration. We had these super-thin gold frames, some various mouldings, and also a small segment from the larger dragon frame graphic in the game (which we had already incorporated into one of our main header concepts).

After some mix-and-match experiments, the thin gold frames were too small; the dragon frame segment was too big; but one of the mouldings was juuuuust right! 160 pixels on the nose! Add to that a slick new header by Uncle Zen (can you spot the 'Circle of Evermore' rune?) and the site design really started coming together. It finally began to look like a publishable website.

click for larger image

No sooner had we nailed down our design structure then the seemingly endless days of color tweaking and debating were about to begin. At this stage it was still a very dark website; something that would be endlessly debated over the coming weeks. But that debate will have to wait until the next installment.

By the way, since I'm a lawyer I love legal disclaimers. All of these original designs and the arrangement and/or placement of any AoW2 game graphics into an original design are Copyright © 2002 by HeavenGames, LLC. The unauthorized reproduction, copying or imitation of these design images is a violation of United States and International copyright law.

<< Part 1

Introduction

Part 3 >>