Grow your CSS skills. Land your dream job.

Art Directed Articles. Still a Good Idea?

Published by Chris Coyier

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

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):


The standard article template on the left, an art-directed article on the right.

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.

Avoid Contact with Eyes #1 Same
Avoid Contact with Eyes #2 Same
An Idea #1 Reverted to regular template
An Idea #2 Reverted to regular template
The Bold Italic #1 Minor updates, mostly the same
The Bold Italic #2 Minor updates, mostly the same
A Brief Message #1 Offline
A Brief Message #2 Offline
Chris Coyier #1 Updated and OK
Chris Coyier #2 Not updated, little weird but mostly OK
Coldheat #1 Reverted to regular template
Coldheat #2 Reverted to regular template
Danny Garcia #1 Offline
Danny Garcia #2 Offline
David Desandro #1 Old link broken, article at new link is same
David Desandro #2 Old link broken, article at new link is same
Dustin Curtis #1 Minor updates, good shape
Dustin Curtis #2 Minor updates, good shape
ESPN Outside the Line #1 Same
ESPN Outside the Line #2 Same
Gregory Wood #1 404
Gregory Wood #2 404
Hazardous Ink #1 Redirect to Homepage
Hazardous Ink #2 Redirect to Homepage
Hip-Hop Quoted #1 Same
Hip-Hop Quoted #2 Same
Jason Santa Maria #1 Same
Jason Santa Maria #2 Same
Kyle Fiedler #1 404
Kyle Fiedler #2 404
Pumpkin King #1 Shows wrong article
Pumpkin King #2 Shows wrong article
Rad Nauseam #1 Redirects to Homepage
Rad Nauseam #2 Redirects to Homepage
Tony Dewan #1 404
Tony Dewan #2 404
Travis Gertz #1 Redirect, minor updates, good shape
Travis Gertz #2 Redirect, minor updates, good shape
Trent Walton #1 Minor updates, good shape
Trent Walton #2 Minor updates, good shape

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

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.

Comments

  1. Permalink to comment#

    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.

  2. 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.

  3. 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!

  4. Thanks for the link Chris!

  5. Kevin
    Permalink to comment#

    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.

  6. Calvin
    Permalink to comment#

    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.

  7. 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.

  8. 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.

  9. Permalink to comment#

    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.

  10. Crispen Smith
    Permalink to comment#

    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.

    • Jodi Warren
      Permalink to comment#

      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!

  11. Permalink to comment#

    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.

  12. 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/

  13. Permalink to comment#

    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.

  14. 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.

  15. 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!

  16. Brendan Patterson
    Permalink to comment#

    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

  17. Colin Leger
    Permalink to comment#

    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.

  18. 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.

  19. 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

  20. Dlacrem
    Permalink to comment#

    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.

  21. Permalink to comment#

    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.

  22. Permalink to comment#

    Build them outside the template/theme/CMS from the start.

    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.

  23. 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.

  24. 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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".