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.
Link from 2009 | Status in Oct 2013 | Status in Nov 2016 |
---|---|---|
Avoid Contact with Eyes #1 | Same | Gone |
Avoid Contact with Eyes #2 | Same | Gone |
An Idea #1 | Reverted to regular template | Still there with regular template |
An Idea #2 | Reverted to regular template | Still there with regular template |
The Bold Italic #1 | Minor updates, mostly the same | Redirects to Medium article |
The Bold Italic #2 | Minor updates, mostly the same | Gone |
A Brief Message #1 | Offline | Still Offline |
A Brief Message #2 | Offline | Still Offline |
Chris Coyier #1 | Updated and OK | Updated (again) and (mostly) OK |
Chris Coyier #2 | Not updated, little weird but mostly OK | Not updated, little weird but mostly OK (still) |
Coldheat #1 | Reverted to regular template | Back to being art directed! |
Coldheat #2 | Reverted to regular template | Back to being art directed! |
Danny Garcia #1 | Offline | Still Offline |
Danny Garcia #2 | Offline | Still Offline |
David Desandro #1 | Old link broken, article at new link is same | Same! |
David Desandro #2 | Old link broken, article at new link is same | Same! |
Dustin Curtis #1 | Minor updates, good shape | Gone |
Dustin Curtis #2 | Minor updates, good shape | Gone |
ESPN Outside the Line #1 | Same | Same |
ESPN Outside the Line #2 | Same | Starts to load like it’s going to be fine, then some JavaScript whisks you away to a 404 |
Gregory Wood #1 | 404 | 404 |
Gregory Wood #2 | 404 | 404 |
Hazardous Ink #1 | Redirect to Homepage | Redirect to another site |
Hazardous Ink #2 | Redirect to Homepage | Redirect to another site |
Hip-Hop Quoted #1 | Same | Same |
Hip-Hop Quoted #2 | Same | Same |
Jason Santa Maria #1 | Same | Same |
Jason Santa Maria #2 | Same | Same |
Kyle Fiedler #1 | 404 | 404 |
Kyle Fiedler #2 | 404 | 404 |
Pumpkin King #1 | Shows wrong article | Shows wrong article |
Pumpkin King #2 | Shows wrong article | Shows wrong article |
Rad Nauseam #1 | Redirects to Homepage | Redirects to Malware |
Rad Nauseam #2 | Redirects to Homepage | Redirects to Malware |
Tony Dewan #1 | 404 | 404 |
Tony Dewan #2 | 404 | 404 |
Travis Gertz #1 | Redirect, minor updates, good shape | “Service Unavailable” |
Travis Gertz #2 | Redirect, minor updates, good shape | “Service Unavailable” |
Trent Walton #1 | Minor updates, good shape | Same! |
Trent Walton #2 | Minor updates, good shape | Same! |
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:
- Serve everything you normally do
- 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.
Honestly, I LOVE the idea of them in theory and even have some published on my personal blogs. (with the original intention of doing them many more) but the reality is that they take just WAY too much effort to create on an ongoing basis which I why I think many jumped on the bandwagon but quickly fell away when they realized that a 2 hour blog post became a 20 hour blog post that really didn’t garner much more in terms of traffic.
While they are wonderful experiences that I love I wouldn’t read a blog because it was art directed nor would I not read a blog because it is not.
And as mentioned I think mobile really through a wrench into things. An art directed post is a ton of work to begin with, making each and every one uniquely responsive is just insane.
Yeah, you’ve pretty much hit the nail on the head there.
Maintaining a blog with consistent art-directed posts is extremely time consuming.
Then when you throw in the ideals of mobile first and RWD…… nah. More effort than it’s worth.
I really like some of the stuff that Teehan+Lax has done with their work roundups.
I think these kinds of posts should hold up well overtime because it’s a reference to the work you’ve done.
Except that their art-directed pages go up to 70MB+
Which is extremely disrespectful to their users. Every link to a Teehan+Lax page should be treated like a PDF link:
http://www.teehanlax.com/story/medium/ (WARNING: 70+MB, 100% CPU)
I actually like art directed blogs and both Jason’s and Trent’s are the best examples out there IMO. I really enjoy (and appreciate) the time they took to make it that way. This effort makes the reading experience more enjoyable and I’m a sucker for visual stimulation…what can I say.
A suggestion when using Dave’s plugin for WordPress…
Name your classes and id’s with a prefix. Something like “
art-direction-
” or “ar-
“The reason for this is I’ve gotten myself into trouble naming something I actually have in my main style sheet. Doh!
Thanks for the link Chris!
It’s important to decide what’s code and what’s content. Custom ‘code’ for art directed articles should really be considered content, and should be saved with the article.
Doesn’t solve all (any?) problems, just don’t stick custom CSS/JS/HTML in your main code files.
Word
I still love the occasional blogazine post. They’re beautiful. For maintainability, I think everything should be packaged with a page that may not be able to get it elsewhere later, so standalone HTML pages are what I’ll be doing.
Excellent overview, Chris. I think perhaps art direction is now where RWD was circa 2009: everyone agrees that the idea is sound; what we lack is a rigorous set of techniques that will really enable it to take place in the majority of sites. We barely have the language to discuss art direction on the web, especially in the age of responsive design, much less make it happen with easy, straightforward tools.
My impression is that a lot of people are nibbling around the edges of the problem: I know my own contribution definitely falls into that category. From a technical perspective, new CSS proposals, such as Adobe’s Regions and Exclusions, will allow art directors to be able to take their place at the web design table, with the suite of techniques they’re used to from print ready to go. I think it’s likely that we’ll eventually reach a critical mass of tools, techniques, and a maturing visual language that will enable and popularize art direction on the web, but it’s going to take a few more years of development.
I still really like the concept and continue to try and add some form of art-direction capabilities where possible… it’s just pulled back to things that are easy for myself or clients to update in their CMSs.
It’s actually getting easier to create modular design systems that can be art directed/customized on the front-end using UI libraries and awesome tools like SASS… It’s the back-end that sucks. It’s still incredibly difficult to create an easy-to-use customizable design system in most content management systems.
A great layout plugin for a CMS that let’s a user easily choose from a set of pre-designed page modules, with color options, content types, etc. would make a big difference in my world.
Pitchfork currently does this with some of their feature articles. They combine it with responsive features and parallax video and images. It’s quite cool.
Here’s a better example – Pitchfork Cover Story: MGMT
I also was going to mention Pitchfork’s AD posts. The recent Daft Punk cover story was pretty epic.
I sort of feel like web design is a bit of spinning plates gig and lately we’ve all been pushing really hard on the RWD plate, the Progressive Enhancement Plate (whether you are a proponent or a detractor it’s in the air) and the Performance Diet plate. Sadly, that’s a lot of plates at the end of the day. Hopefully once those plates are all fully in motion we can start to look at the AD plate again and get it back to full spin. At least for designers private spaces AD is fantastic idea, any zine, serious blog, sectioned resource, should be looking at the benefits… but there are only so many hands to keep those plates in motion.
Absolutely agree. The reality is that many people are either solo freelancers or working on small teams pressed for time and budget. Without having the luxury of time, something’s got to give. Hopefully there’ll be some revolutionary tools coming along to make our lives that much simpler, but I sure as hell haven’t got time to create them!
The problems that people seem to be associating with “art directed” are all problems due to bad design. You can make well designed art directed posts that are not 70MB in size, progressively enhanced and responsive. Trent Walton does it all the time.
It does take more work. But that‘s a complaint some people have about RWD too. Does‘nt mean we should just give up and call it a bad idea.
My work just recently did a highly art directed article for a local alt-weekly here in town about a contentious road issue 30-some years in the making.
There’s some cool stuff you can do with it but struggling to find the price / benefit sweet spot for both ourselves and our clients. RWD has definitely increased the time it takes to pull off a project of this scale.
Project link for the curious:
http://www.c-ville.com/the-bypass/
I think it would be time-consuming when you have to design an extra template with different bit of design and then make it compatible to other things like RWD etc.
I think that it’s about balance. I’m in the middle of a portfolio site overhaul and we’re looking at something I guess you might call ‘semi-art-directed’ There are constants, but the remaining variables are big enough to give the page its own distinct identity – without having to write crazy amounts of code bloat to get it to work.
There is always going to be a place for the art-directed blog, but like all options available to us, it is not always the right solution.
That is exactly what I’m currently convincing my team to adopt. All too often ‘art directed’ posts are trying to change everything. I think we should treat customisation in the same way as themes.
Most of the layout etc should remain the same, and we should only play with colours, images and fonts.
That way, worst case scenario, later they just become the same. And best case scenario, we can sometime reuse the same theme for more articles in the future.
In this way, when going through a redesign, it should be easy enough to update all the themes to continue giving them a unique look and feel.
Thanks for mentioning my site. Interestingly I’m re-writing http://hiphopquoted.com from the ground up with HTML5, webfonts, SVG, responsive views etc as it was done so long ago with now outdated technologies. It’s taking a while though!
Do you think the fantasy interactive (fi) case studies fall into this category? Theyre definitely custom to their content
http://www.f-i.com/work/all
Art directed articles is an approach I have used on my site, pumpkin-king.com, for many years. Embarrassingly, the two links to my site that you reference in your article return the wrong one these days (they are defaulting to the latest article). This is due to a recent redesign to make the site responsive.
As you point out in this article, turning art directed articles and templates into a responsive presentation is a challenge. For my redesign, I used the “update the design” approach and rebuilt each article one by one into new, responsive templates. This was obviously a big project, as I am sure anyone who has done a similar migration can attest to, and I decided to start with a handful of the most current articles (and those which analytics told me were still attracting quality traffic) with the intention of adding the rest over time. This meant that I could get the new site, and the benefits of a responsive redesign, live without being held back by the time needed to add EVERY article. The downside is that some of the older pieces, like the two you reference in this article, will return the wrong content until I can get them added.
The way I publish these articles had changed quite a bit since I began using it in 2009. I write much less often than I used to, in large part because of the time it takes to design and develop each article – a task made even more challenging now that the site is responsive. Still, when I decided to redesign the site earlier this year, a point where abandoning this art directed approach would’ve made sense, I decided to stick with it because, even after so many sites that were using this approach have backed away from it, I still find value in publishing article this way.
If it was a fad, I hope it comes back. Responsiveness probably did play a roll in smashing this down but if we limit ourselves by imagining what can we do this week we’re going to loose out on great design.
I think it’s still a good idea but has it’s place. Out of the millions of bloggers out there most shouldn’t use AD. But looking at the examples from NYT, they used it on ‘major’ articles, not the cat in the tree blog post. Articles that will be referenced, articles that need animation to explain things.
I agree that having a blog with only art-directed posts could be very time consuming. But I also think you can find a balance, take a look at the things Vox Media is doing (The Verge, Polygon, SB Nation): not ALL the articles are art-directed, most of them use the same layout, and then you have a couple of features posts that got art designed. Balance.
This article inspired me to publish my own thoughts about why I continue using this art directed approach and what has changed for me now that I have moved my articles into a new, responsive design – http://www.pumpkin-king.com/blog/art-directed-articles-then-and-now
I can understand the thought behind art directed case studios, even if some seem like more work than the project those case studios are talking about, because the function of those studios is to show off what you can do. But for blog articles it seems too much, I wouldn’t do it, unless the article was something really special.
As a web designer I would love art directed articles to become a new trend, it would open a new market for me, and a market that requires a bit of effort and a lot of continuity, but being completely honest, I think they’re not worth the time unless you can afford perfection.
Until recently I was the Web Publications Coordinator for TXCPA. We have a lot of great print designers working for us and my original directive was the “Make it look as much like the print as possible.” The coding was fun and I learned a lot of CSS quickly. And I was able to come pretty close to the print, in spite of having to support IE6 and without much CSS3 support (2008-ish).
What killed the art direction was not the amount of time it took to code. It was the demise of print (due to budget cuts) and the inability – or lack of interest – on the part of the top print designers to learn to design web pages instead of print pages.
At the same time, there was a push by management to move to a cms. Not sure how they felt that would help as it would would require more skilled – and therefore more expensive coders.
Wordpress would never support the kind of layouts we did in the past, and while Drupal was better, it still wasn’t conducive to doing layout and design based on content as opposed to which views/regions/nodes you could stick content into. Personally I found it quicker and easier to code everything from scratch.
Pages became boring three-column affairs.
Now the pendulum is swinging back the other way. We are using Bootstrap/Foundation, making jQuery features easy for those who aren’t javascript experts, and the new challenge is making engaging mobile sites.
And management is recognizing that there are opportunities online to integrate graphics, text, video and data visualization in a way you could never do before. And the print designers who have embraced the web as a medium are now the ones working on the high-profile projects.
I’ve been doing web work for 20 years (That’s 140 person years right?) and the one thing I’ve learned is that everything old is new again. We are now worried about bandwidth and scaling to different screen resolutions just like we did when most people were on dial-up.
Art directed articles have been replaced with sitewide “art directed templates”, where each article follows the same style but is so well-designed, it looks like it was art directed just for that article.
I have to straighten it. The main point of the art directed blog is about overriding the default style with some new style rules to get a different look. If we made articles with their individual template that is 100% different, then it is not an art directed article/custom post. It’s just a static web pages that are included in the blog archives.
An art directed blog should have their HTML, CSS and JS framework, whatever the risk.
I used to have an art directed blog on Tumblr (iamsteve_dot_Tumblr_com — link now dead), where I created a basic theme and then was able to art direct my posts over that. I have since moved over to GitHub (http://theartdirectedjournal.github.io) and am still going strong. Each “article” is actually a web page in and of itself. I realize that it is a bit hacky and a cheap skate way of doing things, but it worls for me. I art direct my posts because it is fun.
I personally do not like the idea of any template being universally good enough to accomodate all and every of my posts, so I started to create my own webpages,just to be able to publish things the way I think they deserve, rather than using a blogging service of any kind. I am just an amateur in html and css, however, I agree that designing individual pages for individual contributions forces you strongly to select the most important topics. If you spend weeks designing a single webpage, you really must become selective on your subject. My subject, in general, is sound. I am trying to make people aware of that listening to “ordinary” sounds is interesting, as much as it can become very emotional, if you start listening carefuly. So I need to create individual visual presentations for individual acoustic situations, if I want to convince anybody about the individual beauty of sounds. Thank you for your interesting web, Ill try to make use of your professional advices in my amateur work. JL