Plan for Deterioration

Yesterday, Rob showed me an interesting article on subtraction.com called Designed Deterioration. In the article Khoi Vinh talks about how the simple act of using an object has a positive or negative effect on the object's design.

Vinh points out that certain items, after prolonged use, actually improve their design aesthetic. A cast iron skillet doesn't get old and dirty, it gets seasoned – it looks nicer, it cooks better. My home has reclaimed wide pine floors full of knicks, knotholes, and nail holes. We've made the conscious decision to leave the floors unfinished. Yes, three coats of clear polyurethane will look beautifully pristine for the first 24 hours, but as soon as someone drops something, that scratch will stand out. By leaving the floors in their natural state, new scratches and dents continue to add character and wear well.

Vinh goes on to mention how tech items generally don't age so well. Those scratches in your iPhone don't add character – they drive you insane. The aluminum PowerBook was designed, as Vinh points out, with the "assumption that it would remain perfect forever". As anyone who's ever owned a laptop can attest, it won't.

Designing something with the assumption that it will never succumb to environmental deterioration is hardly a new concept – even if it is a foolhardy one. Michael Pollan points out this concept in his book Botany of Desire, referencing the gardens of Versailles:

In 1999 a freak December windstorm laid to waste many of André Lenotre's centuries-old plantings at Versailles, crumpling the garden's perfect geometries. When I saw the pictures of the wrecked allées, the straight lines scrabbled, the painterly perspectives ruined, it occurred to me that a less emphatically ordered garden would have been better able to withstand the storm's fury and repair itself afterward.

As web designers, can we design websites that stand up to the elements of a client's windstorm?

Assuming that most modern websites are driven by some sort of content management system, the general workflow goes like this:

1. The designer creates comps in photoshop.
2. The programmer creates dynamic tools and implements the design.
3. Everything looks perfectly nice and lined up.
4. Then, the client logs in to the admin section...

I love clients as much as the next business owner, but without failure, you can count on your client doing at least four of the following:

• Posting blog headlines with 489 characters
• Posting a single photo in the Slideshow section, prompting questions like, "the Next and Previous buttons just reload my page."
• Not posting any news stories for the first 8 months
• Discovering the <blink> tag
• Entering 300% more content than you designed for
• Entering 300% less content than you designed for

Everyone looks at the finished website and wonders why it's not as nicely ordered as the Photoshop comp.

This is a difficult problem to solve. One of the purposes of comping is to sell your design to the client. Also, the designer inherently wants to make the comp look as perfect as possible. How can we produce comps that look good and account for real scenarios that the client will eventually impose?

Step #1: Wait for real content

Don't do a design comp until you have real content to work with.

If the client can't come up with five real calendar events to comp, they probably don't need an online calendar. It's better to solve this up front. Conversely, maybe the client comes back with ten calendar events happening every weekday – that will certainly effect how you design your calendar.

Step #2: Don't align the bottoms

However, the only reason this comp works is because of its precise alignment. On the web, precise alignment is a little harder. It would be nearly impossible to align the bottoms of all that content, in all browsers, across all operating systems. Scrap this comp and scrap the idea of aligning the tops and bottoms of your dynamic content.

Step #3: Design for nothing

As part of our quality control testing, someone usually deletes all the dynamic content just to see what happens. On a successful site, there will be helpful messages in place of that content.

If there's no dynamic news, what does the user see?

• A blank page
• A giant red box with the text:
  Error: No News (ID#394)
• Or, a nicely designed page with the message:
  No news available — We're constantly updating our site, please check back soon. In the meantime visit our calendar, home page or learn more about us.

Plan for deterioration

Don't impose false content limitations to accommodate your design. Clients don't want to hear, "You can't use that long blog headline because it will break our fragile design". The design should expect and then deal with misuse, over-use, under-use and deterioration from the client.

Unlike the gardens at Versailles, a website should stand up to a strong wind.

Unlike the aluminum Powerbook, a website shouldn't look appalling if it incurs one, single, tiny scratch.