Our overarching goal, when deciding how to put this all together, was to practice what we preach. We haven't, for the last year, been very shy about telling you what works and what doesn't on the Web. We wanted the site to exemplify those beliefs and to show the rest of the developer community that our previous editorial position wasn't merely rhetorical.
We started with some basic principles: The site must be fast, but still look good. It must be highly usable, while maintaining the visual identity of the Wired Digital collection of Web sites. It must use cutting-edge Web technologies appropriately, while still providing a complete experience to users of all browsers.
To get our pages small, we issued a design mandate forbidding images that existed merely to represent text. Not only does this dramatically cut down on the number of bandwidth-sucking
images on each page, but it gives us a clean "Arial, Helvetica, sans serif" aesthetic and makes every page completely searchable and indexable. In fact, the only place where text does appear in the form of a graphic is the HotWired network toolbar, which defines our page width for us, and a logo, which defines our brand.
Our chosen color palette, too, nods to the imposed constraints of Web browsers. While we wanted to maintain our Wired look and feel, we didn't want to compromise the experience for the large percentage of users still surfing with 256-color monitors. This forced us into some hard decisions about which colors we could use and which would hold together well. The combinations you see throughout the site are all selections from the 216-color Web palette, which will avoid dithering on all but the lowest-end systems.
Finally, we knew it only made sense to exploit some of the newest Web technologies, like cascading stylesheets and dynamic HTML. Still, that would've meant leaving out a big chunk of users who aren't able to upgrade to the latest, greatest browsers. For that reason, we built a series of server-side rules that examine each user's browser USER_AGENT string and send the appropriate pages down the pipe. This may sound like a lot of work, but, as you'll see, our completely dynamic backend template system actually made this a reasonable solution.
next page»
