WEB STANDARDS CREATIVITY

152
Issues with the design
The project presented many challenges. It was a redesign, so there was legacy content, a history in terms of brand, and a certain
level of user expectation that comes with all redesigns. These all had to be considered.
The CSS was a particular challenge. Not for the reason you may expect, though. You thought I was going to say Internet
Explorer browser problems, right? Aha! Well, no, that wasn’t the problem.
I was lucky, as a designer, to be working for a dream client who basically said, “Oh, ignore browsers that aren’t standardscompliant.”
Of course, I asked if they were sure. At first, I couldn’t quite understand why, but I quickly realized it was
because we were dealing with a pretty much locked-down audience in terms of recommended and supported software.
Within the IBO, Firefox is actually the recommended browser. Of course, Internet Explorer is still a majority browser for the
IBO’s audience, but I developed the design with Firefox as the primary browser to ensure the code was as standardscompliant
as possible. I turned my attention to Internet Explorer 6 afterwards, adding workarounds to ensure it worked in
that browser, too. It was nice that the target browsers allowed me to keep hacks to a minimum.
As I was saying, the challenging thing with this project was how to manage the CSS.
The customization options for this site were plentiful. All of these options would be saved into a user profile, which meant
the system had to remember what font size, layout, and so on the user had saved. The brief stipulated the user had to be
able to change the layout (fixed or flexible) and the type size. Also, there was a zoom layout for the visually impaired. In
addition to that, the two sites, the OCC and the WRC, both had to share common elements such as grid and typography; the
only difference was color. It was a complex problem if all this was to be addressed using different style sheets.
Overcoming these issues wasn’t particularly easy, but was helped enormously by the project process that was undertaken by
the IBO and myself. There were specs, wireframes, use cases, and concepts—all the sort of documentation you would expect
in a project of this size. However, the process was small and intimate with the client. There was iteration after iteration. Solving
problems together, I’d say, was the real success of this project.
Conclusion
I didn’t deal with CSS hacks in this chapter. Why? Well, I think they are out of scope here, and could confuse
the explanation of constructing the grid. You can add hacks in if your design requires it. There is further hack
coverage throughout this book, and CSS Mastery (friends of ED, ISBN: 1-59059-614-5) contains comprehensive
information on hacks.
What I have created here is a simple grid system, not just columns.
To the casual observer, this is nothing more than a three-column layout using standard 250px wide columns. However, I carefully
constructed the grid, considering all of the compositional options available to me using this six-column grid system. This
allowed for a wide variety of layout options that, importantly, relate to each other.
For posterity’s sake, and to give you an idea of how radically different the new design is, I’ve included a few screenshots to
show the before and after states. Figures 6-18 and 6-19 show the OCC site, and Figure 6-20 shows the WRC site. I’m sure
you’ll agree, the new site stands head and shoulders above the old.