Art Directed Articles. Still a Good Idea?

I was recently quoted in a tweet about this and I thought it might be worth a revisit and new discussion.

Re Art Direction "This is more than just a trend, it's just a good idea." ~ @chriscoyier Still? And, is AD plugin the best way in 2013?

— James Burgos (@JamesBurgos) October 13, 2013

The idea of an “art directed article” is that it is designed specifically for the content of the article. It might share some characteristics from the parent site (it probably should), but lots of design elements change to suit the specific article. Layout, colors, type, backgrounds, images, interactions… all custom just for the article.

Here’s a simple example on Jason Santa Maria’s blog (who has championed this idea):

Was this just a trend?

I’m going with: yes and no.

Yes

• I see far less of it these days then in its hayday (2009-2010). I totally jumped on the bandwagon at the time. It was fun, but I didn’t stick with it.
• There used to be two dedicated “gallery” sites dedicated to the idea: Blogazines and HeartDirected. Both offline.
• Some examples have deteriorated over time. For instance this post that is about posts like this.

No

• The sites doing it have shifted somewhat from individuals to large organizations.
• The sites that are doing it these days are taking it to all new levels of impressiveness. See the examples section below.
• Good design is good design. If you can design a page that enhances the content, that’s a good idea that transcends a trend.

How do they hold up over time?

Let’s see if we can collect some real data. This article lists 20 sites with art-directed posts, with two examples per site. Let’s rate how they held up in the four years since 2009.

2013: Art direction only survived on 18/40 articles. Less than half.

2016: Down to 13/40 articles still in good shape.

Of course this is a very small sample size and there is nothing to compare it to. It would be interesting to compare against another roundup from 2009 of a totally unrelated topic and see what shape those URL’s are in.

Did responsive design influence things?

2009 was a bit before responsive web design was “a thing” as we know it today. It’s easier to customize a design in a fixed environment than a fluid one.

Want the text “Kapow!” lined up right next to Batman’s fist in an article about old comics? That’s fairly easy to do when you can count on that fist being at the exact same place at all times. But likely you’ll need that graphic to shrink and grow to accommodate the screen size. Now you’ll have to get tricky with how you position that text. And likely about 50 other little minor adjustments you have to make as the the screen size available goes from tiny to huge.

It multiplies an already time-consuming job.

Did a focus on performance influence things?

Often what happens with art directed articles is:

1. Serve everything you normally do
2. Plus more stuff! (e.g. extra images, extra fonts, extra CSS, etc)

There is definitely a more-is-worse vibe going on on the web right now. A common theme in art directed articles is adding stuff like interactive maps, scrolling effects, animations, and super large images. All of that stuff is heavy and slow when it comes to web performance.

That doesn’t mean you can’t do it right and progressively enhance, but that’s yet-another-difficulty. That may be contributing to less enthusiasm for art-directed posts.

How can you plan for the future with your art-directed articles?

Websites will change. It’s going to happen, so you need to plan for it. The customizations to an article you make now might not make any sense to that same article in a new template. Did you change the background on .article-wrap { } – well maybe that’s an <article class="module"> now, so that custom CSS doesn’t do anything.

The trouble is, redesigns are generally for the better. They accommodate a new advertising structure. They make a non-responsive design responsive. They increase performance. Whatever. We might want to be totally gone with the old design and totally in with the new.

Here’s some options for various scenarios:

• Preserve the article exactly as is. This is how Jason Santa Maria’s site works. Posts that were art directed under a certain version of the site get served under that version forever. He’s doing it, so clearly it’s doable. There are WordPress plugins that change themes with a URL parameter, so I can imagine you could code something that shows a different theme based on a publication date.

  In talking to some folks from The Verge (and companion sites), they plan to either serve a legacy template specifically for these URL’s, or “flatten” the page into a one-off static page. Either way, they design remains forever.

• Update the design. It shouldn’t be off the table that you just revisit the articles when you redesign and fix them up to work with the redesign. Time permitting, this is probably the best option.
• Build them outside the template/theme/CMS from the start. If the article doesn’t rely on a template anyway, it won’t break when you update that template.
• Revert to a normal template. Worst case, just remove all the custom art direction. It’s a fairly common approach to just add assets to customize a page anyway, so removing them will hopefully allow the content to drop back to a normal looking article. Hopefully the markup wasn’t so customized that it breaks. The lesson here: use namespaced classes that will likely have no future meaning.

Whatever you do, don’t just nuke the article or redirect it to something unrelated. Because.

More Recent Examples

New York Times: Snow Fall
The Verge: John Wilkes Booth
New York Times: Russia
Travis Neilson: Fun with jQuery .show()
Complex: Danny Brown
The Washington Post: Great Falls
LA Times: Concrete Risks
New York Times: Tomato Can Blues
New York Times: The Jockey
Daniel Mall: Entertainment Weekly Site
Trent Walton: Human Interest
Polygon: Watch Dogs

Let’s check these out in another four years!

So what’s up?

Is it / was it a trend or not? Do you dig it? Have you done it? Is art directing a post the kiss of death for it over time? Can you think of other ways to handle an art directed post over time? Any more interesting examples?

And to answer James’ question from the tweet up top: I think Dave’s fork of the Art Direction Plugin is still the best way to go in WordPress-land, if what you are trying to do is essentially add CSS and JS.

Oh and I’m totally mis-using “art direction” here. Sorry about that, but I feel like it’s kind of the name that’s been applied to this thing.