Scott Kellum: Art Directing Posts, Sustainably

Scott Kellum (@scottkellum) was speaking at Smashing Conference about art directed posts, these are my notes from his talk.

Early on websites were crafted by webmasters, the content was passed to someone who knew how to code. Today this approach isn't sustainable so we have CMSs like Wordpress where content editors don't need to know how to code - the content get put into a template. The layout doesn't show you what the page is about.

An art directed post is given special treatment to facilitate the content. Given extra layout or style. Create a layout system that can move items round in a template. (Jason Santa Maria 2008.)

The feature well of a magazine is small but the articles get a lot of art direction. Art directed posts are designed to make them look special. Isolate components and make them simple - for example text + image. These components can then have different presentations. This allows editors to create pages without the involvement of designers. By adding a designer you can work within these components and add some custom imagery to tie a post together, working closely with editorial.

Lead time for a post can vary from months to days, need to work very closely with editorial to make sure things get delivered on time.

When migrating a site to a new responsive layout it identified problems with the old lump form content. Worked a lot with high level mutator classes, this allows you to easy modify the layout of the page. The snippet system works very well, each chunk can have a responsive treatment. Moving to responsive meant able to scale back on other channels such as mobile apps.

Added a SASS editor alongside the content editor. By changing mixins and variables in the SASS the editors have a lot of control over the presentation. Create a framework that gets you 90% of the way, the last 10% is making things really special.

This isn't possible without good teams. Owning your own stack means you can change things to suit your needs - like adding a SASS editor to your entry editor. Tools aren't the magic - they enable the end result.

Tent-pole features. Push the boat out on some big feature posts. For these use things like middleman static site generators which then push into the CMS. Use Google docs spreadsheets to manage the custom content structure/schema for editors to work on and it then gets sucked into the static site generator.

Re-use a lot of code but with different details of the styling.

Small teams with a mix of all the skills needed help work on each article.

Snippets are now layout and content, once the layout is built up you can then add the content. Dynamically build pages from the ground up - less fragile. Currently exporting blobs of HTML, using structured data better allows reuse. Improving data structure helps this. NPR pioneered this approach. Marquee does this for art directed posts.

These posts get out to a broader community than our regular readership.

Performance is an issue. Images are the biggest pain point, working with blobs of HTML means that have to use one image tag- difficult problem.