Lost in space[r]

Orbitz.com thumbnail image I was looking up flights to Miami on Orbitz.com today for an AIGA design conference I’ll be attending in November. I came across this awkward rendering [.gif, 48 KB] of their much-touted “matrix display”. All missing images pointed to http://www.orbitz.com/d.gif, presumably a transparent spacer gif. I think it ironic that something supposed to be transparent can cause an interface to change so drastically if it happens to go missing. continued

How to Build a Portfolio

I’ve been debating how to build out my portfolio pages for the last few days. The current pages are all flat files that required a ton of work to create, and have been a nightmare to update. I’d like to create a portfolio section that uses one template and pulls all the data in dynamically. It’s not necessarily the template or the scripting to build it that I’m concerned about. But I do need to make sure the means of storing the portfolio data is as flexible as possible. I want the ability to insert pieces into the middle of a category, to sort by name or category, to rearrange or rename categories, and to be able to attach a number of larger versions available for each piece.

Teaching CSS

I’ve been planning out the structure for a CSS workshop we’ll be offering to Lycos designers and developers sometime later this month. I’ll be collaborating with Steve Mulder, a colleague of mine in Boston, who wrote a book on style sheets when CSS was still brand spankin’ new. I used a simple outline that Steve sent over a few weeks ago as a base for a more detailed version of what we plan to cover. I’m planing on 5 sessions spread out over 3 days, with time in between each session for practical excercises or informal questions. The first session will be geared for a broader audience so that product managers and other employees can join designers and developers in learning why CSS is important.

In looking through the outline, I’m realizing this is a lot to cover in three days. We’ll be dealing with a mixed audience. Some of the designers have begun playing around with style sheets, or have tried using them for personal projects. Others haven’t even seen a declaration yet.

Any designer who originally came from the print world can pick up CSS very easily. The language used is mostly a carry-over of traditional desktop publishing vocabulary, with some alterations to cover technical limitations or more specific characteristic handling. Designers who didn’t get the pleasure of manually kerning “1”s in Illustrator, or collecting fonts and images for QuarkXPress output won’t be too disadvantaged, but at worst, may have to learn new lingo or ways of thinking about formatting.

Measured accessibility improvements

Tom, a colleague and IA in our User Experience group in Boston, took the time today to run some Wired News pages through the Bobby accessibility evaluator. For comparison, he tested both the old and new WN designs, along with Cnet’s News.com. As I noted in one of my own tests about a month ago, the site is still not perfect from an accessibility perspective. But the tests and comparisons Tom reported back show the new design will help us make significant progress compared with the old design (and the design of our competitor). The report showed the following: continued

Time for major surgery

I started batting around ideas for a redesign of stopdesign.com a few weeks ago. Today, I actually made progress by sketching out some rough ideas and planning a simple architecture. The site has basically remained untouched in the four years since I launched it when I founded Stopdesign. Since I’ve made very few updates, it has become merely an outdated brochure of a 3-4 year-old portfolio and philosophy statement. Everything here is still applicable. But I’ve learned and done a lot since I wrote the first few lines of html code behind this site. continued

Well said

When Eric Meyer visited last week, we pressed him for a quote or two about the Wired News redesign. I was blown away with what he sent back. While his comments were intended for the press release and the story our Editor is writing, I asked him if I could reuse the quotes here, to which he agreed. I think his comments will get edited down for the release. But to me, they’re worth including in their entirety here: continued

Issue-based content

Finally had a chance over the last two days to begin thinking about the Wired magazine site design. The current site is riddled with usability problems, poor architecture, and a very awkward design. I can be brutally honest about it, because I worked on this design over four years ago. The site’s current design was based on a model we were using for all HotWired Network sites back then. A model we abandoned long ago after learning many of the problems that showed up during user testing. continued

Versioning CSS and images

We implemented a secondary version control technique for Wired News images and CSS files this week. Images and CSS files have been moved one level deeper than they were, into a folder named according to the current release date (ie: 20020917). Each major revision or addition we make can be grouped into a new version release, and each dated folder will include every image and CSS file, so that all files can be referenced relatively, without needing to reference anything outside the dated folder. For instance, all CSS files will temporarily live in /news/v/20020917/css/, and all images will live in /news/v/20020917/images/ until the next major version change. (The v folder stands for “version”, and exists purely to group all of the dated release folders together so they don’t clutter up the root of /news/.)

The Akamai URI strings provide one means of version control and make it possible to update cached image and CSS files. But we want to ensure we have direct control over how and when the files get updated. Chaning the timestamp in the Akamai string may lead to unpredictable results across all their servers. But we can know for sure the new files will be re-cached if we change the date version number of our file’s physical path.

Missing style sheets?

We moved some of our CSS and image files to a different central server today which we can all reference for design and development versions of the site. I almost immediately noticed that Mozilla and Netscape browsers weren’t rendering our pages using styles anymore. A search on Google turned up this article on Netscape’s DevEdge, which pointed out that some Apache and iPlanet web servers have an incorrect mime-type set for CSS files. An incorrect mime-type will cause Gecko-based browsers to ignore the entire CSS file when thrown into “strict mode” by the DTD. Changing the mime-type on our Apache server solved the problem.

Meeting Mr. Meyer

Eric Meyer came to the Bay Area this week to take care of business at Netscape’s headquarters in Mountain View. So while Eric was in town, he and I set up a time to meet each other and talk about the Wired News redesign. He came by our office this morning and we went over everything from high-level concerns of mine, to specific details of the markup and CSS. He even helped fix a couple of minor issues that happened to jump out at us while we were reviewing the site. We headed over to MoMo’s afterwards to grab lunch.

It was an honor (and a lot of fun) to spend just a few hours with Eric. He knows the CSS spec and browser rendering discrepancies better than I know the information on my own business card. He’s incredibly smart, very knowledgeable, and friendly to boot.

I now have three of the books he’s written about CSS, and I really like his writing style. The way he writes makes complex concepts easy to understand. He breaks ideas down into logical pieces, identifies and defines terms you should understand as you need them, and manages to do it all in a friendly, familiar tone that makes reading technical descriptions a pleasure. Whether you’re just a beginner and know very little about CSS, or you’ve been turning to CSS for a while now to make your life a lot easier, having a Meyer book nearby is a great reference and teaching tool for the details you can’t remember or understand.

About the author

Designer, advisor, father. Former creative director at Twitter. Previously led design teams at Google, Stopdesign, and Wired. Disney geek. Giants fan.
  • Follow @stopon Twitter
  • Douglas on Facebook
  • Douglas on LinkedIn