WEB STANDARDS CREATIVITY

52
Mo’ metro, mo’ style
The New York Magazine (www.nymag.com) website
redesign was, to be honest, something of a departure for
me. My little company, Vertua (www.vertua.com), typically
bills itself as a full-service web shop—or, at least, as fullservice
as an “army of one” studio can be. However, this
project was a welcome change from the norm, as it was
essentially a “code-only” job: the magazine had partnered
with another studio to design the new site and was looking
for someone to work on building out standards-based
templates. (I’d like to make an “Enter the Dragon” joke
here, but I think that would just be silly.)
The template list for the redesign was nothing less than
impressive: the magazine had years of legacy content on
the site, all presented in different layouts and templates.
Furthermore, the magazine’s content management system
(CMS) was powerful, but rather lightweight—much
of the pages’ content is hand-rolled by a team of skilled
but largely nontechnical content producers. How, then,
could a standards-based design make the magazine
employees’ lives easier?
Figure 3-1. The finished article template
In this chapter, I discuss how assigning multiple class values
to an element—in this case, body—can really streamline
your code and make your Cascading Style Sheets
(CSS) much more modular. By writing CSS code that
detects different “toggles” you write into the body element’s
class, your style sheet can style the same markup
in drastically different ways across pages. The result is a
drastic reduction in the number of HTML templates
required and the ability to make radical changes to a
page’s design a snap.
For the bulk of this chapter, we’ll focus on the generic
article template, shown in Figure 3-1.
With the small talk out the way, let’s walk through how to
put this together, step by step.