Made to Measure

by Allen Tan for Issue № 4

As speakers like Brad Frost and Karen McGrane have maintained for some time, the future CMS wants to treat content like water, to be poured into different containers.

But amidst this discussion of our content’s future, there’s little talk about the future form of the containers themselves. Take a look at pieces from the Atlantic (1,2,3), CNN (1,2,3), and the Guardian (1,2,3), and you’ll notice that articles from the same website share the same template design. This shared layout, filled every time writers publish their stories, was created alongside a homepage layout, a search page layout, and an index page layout, all as parts of a design system.

The trouble with rigid containers like the article template is that they pretend as if all content takes the same shape. The designs don’t adjust to the needs of individual articles: long titles and pull quotes fit awkwardly, and the same visual weight is given to beautiful panoramic photos and to portrait snapshots. Interactive elements struggle to fit inside existing templates, relegated to small sidebars or appearing in popup windows. Long-form features, when they’re not broken up by arbitrary pagination, appear in long columns that are grueling to read. Print magazine designers, on the other hand, pride themselves on integrating these elements into beautiful wholes, keeping readers interested by fitting supporting pieces into the perfect place.

Spread of IL Magazine — Fig. 1 — Spread from IL Magazine.

Print design isn’t something we should dotingly copy, but the comparison points out what we, makers of digital publications, have chosen to ignore. Our work is made up of beeps and blips that can be endlessly reworked, so why are our design systems more rigid than ink locked on paper? The fine work from our reporters and photographers and data artists deserves to be showcased. Instead, our dependence on fitting into template defaults sands away the unique contours of the work.

The problems with inflexible containers can not be addressed at the template level, since they occur on specific instances of content. Unless templates for every possible variation are made, these issues have to be addressed case by case. Publishers are in a unique position to do this, because they make and control their content. The popularity of apps like Instapaper, Readability, and Flipboard have shown readers’ hunger for good reading experiences by providing a stripped down, readable view, but that should only be a baseline for design. Because publishers intimately understand their material, they can put out content-specific design that is beautiful in addition to readable, with a number of visual entry points that turn skimmers into immersed readers, and that so accentuate the unique facets of their content that readers will prefer to read on the original websites and not elsewhere. This added reader attention and loyalty, which is increasingly scarce, will become more and more valuable for both publishers and their advertisers.

Searching for alternatives

A few years ago, Jason Santa Maria proposed the idea of art-directed pages as a reaction to the static template. Using his blog as a testing ground, Santa Maria composed entirely new designs for each of his blog posts, often leaving only the header untouched. The results are beautiful, and the idea got a lot of attention. But this approach is expensive: it’s time-consuming to start from scratch for every post, and it requires a combination of skills—the ability to choose type and color, markup/CSS chops, and an eye for page layout—that’s prohibitive on a large scale. Art-directed pages are made in opposition to the original design, because every article replaces that initial work. Some magazines may want to do this, since they already take on a similar amount of effort in print. But news organizations, which distribute hundreds of pieces in a day, will find it impossible to scale this kind of design with consistency and quality.

So if static templates are too limiting, but per-piece art direction is too costly, how else can we make scalable, sustainable digital publications that are beautiful and accessible? To find a middle path, we can take a cue from the art of the tailor.

If we compare digital editorial design to the craft of men’s shirt-making, art-directed pages would be bespoke shirts—luxury items uniquely made for an individual. On the opposite end of the spectrum are off-the-rack shirts, idealized designs manufactured en masse. Like article templates, these are ill-fitting, because standard-sized shirts can not fit every wearer’s body. But there’s also a middle path, which is to buy a good off-the-rack shirt and entrust it to a specialist, who takes the wearer’s measurements and then shortens and sculpts the shirt to fit. The shirt is, in other words, tailored. (“Tailors” can also refer to the people who make bespoke shirts, but for the purposes of this article, tailoring is only talking about the practice of adjusting ready-made clothes.)

A smarter fit

This type of tailoring is exactly what editorial design needs. Unlike the department store designs we have now, which look great on idealized mannequins and fit poorly in real use, we can have sharp-fitting designs that respect the spirit of the original design, while acknowledging the realities of high-volume production.
For this approach to work for editorial design, three things need to happen.

Flexible design

Designers of these systems will need to move beyond designs that don’t change once they’re handed over. Articles are made of many elements with different visual treatments: headlines, ledes, body text, photos, pull quotes—instead of providing a specific template, designers could supply ranges and options for different elements, along with guidelines on using them.

Like the different adjustments tailors can make to a shirt, guidelines can serve different purposes:

Adjust for fit. To bring in a shirt’s torso for a closer fit, a tailor adds darts to the back. Likewise, a layout designer can specify a range of font sizes, to tighten up a particular long title treatment.
Replace broken pieces. When shirt collars or cuffs get too frayed, a tailor can replace them. A layout designer may allow for elements like the sidebar to be removed in special cases, such as for a feature article with full-bleed images.
Extend or add new features. Tailors can also add unusual elements, like the English Cut, which is a loop within the sleeve that holds a flower. Some of these elements may be silly, but others can be useful in situations like pairing a fixed interactive element with a scrolling timeline.

As an example, here’s what a complete set of guidelines could look like, along with examples of tailored articles.

Design is about establishing a set of relationships between elements. By codifying these relationships as a set of principles instead of a single, stand-alone template, we make it possible for other designers to extend our work (per article) while remaining faithful to its core ideas. This is not to argue that we shouldn’t present complete-looking mockups anymore, of course, but instead of one unchanging design, mockups would demonstrate the design principles at work—and show the expressive potential of the system. Many of us already provide usage guidelines when creating a brand identity, so that future use does not compromise the initial design system—tailoring simply extends this practice to the level of the template.

The right tailors

Publishers must hire or designate skilled tailors within the organization. They should be design-minded, able to understand and apply the guidelines to the articles they’re working on in ways that complement each piece of content. They should also be familiar with the web, able to add markup and CSS styling for each piece. As such, people from either the in-house design side or the production side might step into this role. Because they already have a framework to work from, and because they have both design and production smarts, fitting the design for most articles should be straightforward, and scalable to high-volume production schedules. Consider them your spotters, always scanning and ready to pounce on particular places where design can elevate the content.

A CMS that helps

Content management systems will need to support this type of work. Many CMSs already have per-article custom CSS fields—as shown in the visual guide examples, this alone can be sufficient. Tailors also need the ability to preview and adjust their custom-fitted article designs in real-time within browsers. There are a growing number of tools for this: Livereload, Codekit, Adobe Shadow, or even plain Firebug. Just to be clear, I’m not advocating for WYSIWYG content entry. Writers should not be making stylistic choices and adding crufty markup. As Karen McGrane argues in a recent talk (starts at 03:10):

“It’s a challenge to get past…the marriage of content and form. Sometimes people will criticize me, ‘Karen, you’re saying all we need is this blank, unstyled text and nobody cares about design.’ and I’m saying the exact opposite of that. I’m saying that I know design is important, I know design has to be treated with care, I know that if you want to do a great job of design, if you want to design a great experience for whatever platform you’re designing for, then you’ve gotta design for that platform. And the only way you’re going to be able to do that is if you have a clean base of content to work from. You have to have something clean and structured and flexible, so that you can make the right choices for your platform.”

We’re far from there yet, but McGrane’s point is foundational. Content should be stored in an atomic, style-free way, and then used by tailors to make stylistic choices for a specific platform. We don’t need more WYSIWYG tools—but tailoring will need production-level tools that reliably and efficiently test how content is displayed, everywhere.

Many proponents of responsive web design say that the web should be considered a single platform, not divided into mobile web, tablet web, and desktop web. Unfortunately, many responsive designs use precisely those three breakpoints. I suspect this is partly because it’s easier to manage, and partly because we’re designing for abstract levels of content. I’d much rather see responsive page designs that shift on the needs of individual pieces of content, using media queries as needed when an element’s design breaks:

“I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of ’320px’, ’480px’, ’768px’, or whatever – the web’s so much more flexible than that, and those pixels are a snapshot of the web as we know it today. Instead, we should focus on breakpoints tailored to the design we’re working on.” Ethan Marcotte, in .net magazine

Moving to a tailored design approach, working with specific content, becomes a natural extension for this type of responsive design.

Technologically, a tailoring approach isn’t very different from the design work we already do, but it opens new possibilities. By combining flexible templates with talented tailors, newspapers can begin to introduce strong design on a scale unseen so far: not the plain, minimalist layouts we see in read-later tools or Flipboard, but truly platform- and content-aware work. Magazines can benefit just as much, if not more, since tailored design can reflect pacing and rhythm across an entire issue as well as within individual articles. And, just as web type services allows rich typography to flourish online, tailoring permits designers to draw on more of print design’s history without ignoring the benefits of the web. By pushing hard on understanding what specific content wants, we will get to confront more interesting problems.

Adopting tailoring will be a significant change for many organizations, but we aren’t being held back by lack of technology capability or human skill. We can already begin to do so much better—without waiting, right now, today.

The Ensuing Discussion

(16 comments so far. Add your own?)

∞ Steph said:

YES, GREAT ARTICLE. It’s been entertaining (and awkward) to see publishers handle the constraints of a “one size fits all” approach to content — stock photo, headline, subhead, tags, pull quote in the middle — when the content itself doesn’t call for those constraints. I get it from a production standpoint for a huge media company to be efficient, maintain “brand,” or tie into other semantic content. But starting with the content in plain text only liberates design, methinks. So bring on the tailors!

Reply ↩
∞ Luke said:

Powerful ideas.

It’s interesting to think about the transition from illustrated scrolls and tombs to the press-printed book. I image a similar period of template driven, standardised book design/manufacturing—then a creeping emergence of books designed around the text—then (as technology permits) printed illustrations, layouts and colours specific to the content becomes a more common, though still a careful and specialised, treatment.

I’m new to all of this, but it seems like whenever practice becomes stable in a medium—whether that’s around the idea of a 960px page or a fixed template driven system—there’s opportunities to question, challenge and blow best practices apart by trying to deeply understand the message, the medium and core experience of receiving it.

Reply ↩
∞ Leon said:

I like the idea of tailored content and thought this was an excellent article, but I’m still not convinced that it’s wholly practical.

A traditional print publication has a rigid publication schedule and a fixed canvas. These factors make tailoring design relatively easy.

You can replicate the publication schedule online, but most online publications push content out spontaneously. I think this restricts the amount of time you’ll have to tailor articles, even if you are working to a set of guidelines.

I also wonder whether the mobile viewport makes it difficult to style content so much. Look at JSM’s website now; it’s a simple, one column design that scales well.

Still, I do think The Guardian et al could be more imaginative. A full width template for wide images is a must have.

Finally, do readers really want this level of design online? Reading from a screen is still a pretty miserable experience compared to reading a glossy magazine. Perhaps the Readability level baseline is all you really need?

Reply ↩
1. ∞ Brad replied to Leon:
  
  Good points, Leon.
  Even in print, this concept is not wholly practical. Compare the front page with the travel section. The travel section will have a relatively static schedule and thus more intricate layouts are possible. The front page, however, needs to be flexible until the last possible minute. That’s why they are generally divided into columns and compartments rather than composed designs.
∞ Paul said:

I don’t like giving design guidelines, I prefer to set rules in the system. I like the idea of the Web as a single platform, and plain text is sweet, ie ms word is a pain in the ass, when I worked on overrides in joomla anyway. And I like content as water, with, eg 3 containers the publisher can choose from, but maybe publishers should have more control in the browser, eg drag that pic right and shrink by half, but with limits set by CSS, eg max-width. To me, having to employ someone to tweek designs sort of seems like a weakness of the design system, in most cases. I think the choices should be so easy that any non designer with no knowledge of principles can see the obvious way to go. I suppose the automation of art direction will probably result in homogenized designs and anemic culture, with many missed opportunities for creative communication. Content aware CMS could get annoying like Word does when it thinks you want to do this or that. Indeed the problems of Word and InDesign, Quark, etc are now the problems of the Web. It would be interesting to compare how publishing softwares and CMS developers, etc. approach these problems.

Reply ↩
∞ Christopher Johnson said:

I have often bumped up against the limitations of template-driven design, and have been practicing the “tailoring” technique quietly, for ages. I mostly kept these tailoring practices to myself, out of fear that it would expose deficiencies in my design — namely, an inability to anticipate all conceivable combinations of text, video, re-visioned print artifacts, embeds, interactivity, etc. It is a relief to know that this is a problem for the hotshots of design, and not just for us gifted amateurs.

Reply ↩
∞ Rob B said:

Great article, not thought about design aware media queries before. Experimentation needed! Thanks.

Reply ↩
∞ Brad said:

I have to point out the false premise here. Content was treated like water long before we had website CMS’s. Go ahead, open up a magazine and turn past the pretty pictures and giant titles, and what do you see? Content flowing like water from column to column and page to page.

Don’t let the double-page spread fool you. It only represents a small fraction of what constitutes printed media. Copy is continuously changing, and magazines and newspapers need nearly as much freedom as webpages in the accommodation of such changes.

Back in the day, pre-Netscape IPO, software suites like Quark Publisher and DTI allowed writers and editors to work on stories at Unix terminals while News Designers simultaneously arranged those stories for the printed page. Cover pages, montages, typographical finesse, or complex infographics might lead into the story, but the bulk of the content would trail the “design”, flowing in columns around preset ad holes. The whole industry pivoted on this concept of “pagination”. Not enough ads? Just trim the page count; stories were even strategically written so that the fat was at the end.

Internet readers, on the other hand, are repulsed by pagination. Would you rather be last on the first page of Google results or first on the second page? At the same time, they are more likely to be introduced to your site from the inside out. Deep links aren’t just for search engines; they are the bread-and-butter of the social web.

All of this points to a reading context that is fed by multiple providers and consumed in multiple formats. If your deep-linked, socially-climbing URL doesn’t clearly offer what the reader is expecting, then inflexible layouts, mystery meat navigation, or “buffering…” messages might be more hindrance than attraction.

It is clear that your ultimate goal here is to corral the internet audience so that they will only “read on the original websites and not elsewhere”. I am sympathetic to the revenue disruption that the internet represents for newspapers and magazines. I do hope that they can successfully adapt their business models; I really do. However, I don’t think it’s healthy to use manufactured nostalgia about a print process that never was as the rallying cry for taming the future.

Reply ↩
1. ∞ Erin Kissane replied to Brad:
  
  Hi Brad,
  
  Thanks for your comment. A quick note to help situate some terms: In the context of digital publishing, “content like water” isn’t about visually flowing from page to page or column to column, but about functionally flowing through diverse systems and across devices, websites, apps, etc., often via APIs. That requires structured content stored and marked up in presentation-neutral ways.
  
  Allen’s article deals with enhancing websites as one potential destination—or maybe waypoint—for that flowing content, but if you want to see the larger conversation, Karen McGrane, Brad Frost, Josh Clark, and many others dig into this systems approach in detail.
  
  Thanks,
  Erin
2. ∞ Brad replied:
  
  Hey Erin,
  Newsrooms had diverse systems and devices as well. Writers and editors worked from green screen terminals in parallel with designers and photographers who were on Macs, and don’t forget about wire services or ad designers on PC’s. At press-time, a Postscript workstation aggregated all of the separate content together onto CMYK plates. A disparate suite of applications and OS’s were used to tie all of the systems together. The main difference between that and a CMS is that dynamism in print was mainly expressed in the length of a story rather than in its presentation.
  I can appreciate the merits of the systems approach, and I don’t see them as necessarily exclusive of art-directed pages, either. My major contention is with the romanticized notion that printed content offers websites a tradition of “perfect placement.” In fact, the only items that truly got perfect placement in print were probably the ads. Yes, there are heavily-designed boutique mags that have forsaken ad support and still others that see “perfect placement” as a way to differentiate themselves from the internet. However, if they could have the old print ad market back, I’m sure their design would be more friendly to 1- and 2-column ad holes.
  By all means, let’s develop a pattern language for presentation containers, but let’s not fool ourselves into believing that we will also be inheriting a newsprint/magazine tradition that was geared toward design expression. Allen has clearly chosen to focus on the cover page, while ignoring the vast majority of columns and ads that follow after the jump. He also seems to be preoccupied with preserving eyeballs on the “original website”, not just using it as a potential destination. Again, I am sympathetic to newspaper business models, and I can understand why such a future is attractive for him; I just think his wayback glasses are a bit skewed.
  Thanks for your reply,
  Brad
3. Allen Tan (editor) replied to Brad:
  
  Hi Brad,
  
  I don’t think pagination is a good pattern for web publishers at all. I’m not a fan of doing it for increased page views, or just to insert additional ads, or any other reader-hostile reason. I hope that my call for better designed websites doesn’t suggest any attachment to particular print conventions.
  
  What makes print design interesting to me is not “perfect placement”, but the flexibility in their design systems that support making very intentional decisions. The length of copy may change, but the layout folks can still choose to run text through several columns underneath a large photo that spans that section, or they can run text down a single column with a small image with the same small width. The grid in print lets a designer set out content very quickly in ways that’s appropriate.
  
  This holds equally if not more true for magazines, and beautiful examples from IL and Wired to Bloomberg show that it’s not just boutique mags that can do this. (I also disagree that having content-appropriate design means forsaking ads – it means that the design systems must integrate those ads well. But that’s another topic.)
  
  Now, I don’t believe grids are an adequate solution for the web, considering the multitude of browser sizes and the ideas of responsive web design, but I do think we need to move towards design systems that are more flexible and expressive.
  
  Here are my examples, which try to sketch out what I’m thinking about. They’re a little buried in the piece. http://contentsmagazine.com/tailored/
  
  (And, not to speak for the NYT, but I’m all for letting people read using the third-party services they like. The partnership with Flipboard, for example, is wonderful. My point is simply that publishers have both the most incentive and the most capability to do content-centric design than anyone else.)
4. ∞ Brad replied:
  
  Hey Allen,
  To clarify, I did not claim that ads are exclusive of content-oriented design. Of course, they can and do coexist. However, a healthy ad market (which print can no longer claim) would place some external constraints on the form. Forcing an advertiser to re-orient their ads to your content is a good way to lose advertisers.
  Assuming that there is a profit motive, pagination (via columns and inches) was the device that allowed for maximization of that mission. It was the platform upon which cover pages and big photos were built. If you agree with me that the web’s corollary for pagination is the URL, and you agree that a URL contains neither state nor context, then it would be dubious to think that embedding design cues within content would do anything but add friction to the base transactions of your business — links.
  Now more than ever, internet readers are expecting a vertical well of content, using slower connections, and reading via a proxy. Throw a fixed position map at them, and they are likely to bounce. ( What’s worse, google will track that bounce and suppress your content from that one, unique user. )
  So, if the business-end of the URL needs the baseline readable design, we find ourselves facing the same problem that faced our print forebears; where to put the big layouts? Fortunately for them, a printed periodical comes with state and context, so adding a page 2 jump line is an elegant solution. Not so for the nomadic URL. If we really wanted to look to tradition, we would do well to pay heed to the 90+% of print that flowed like water through predictable columns.
  Really, if you are going to incur link friction with a flexible container, you might as well make it worthwhile by going full-bore art-directed page. In fact, several years ago, nytimes tried art-directed pages, but they came at the cost of being included in their search engine (not surprisingly, print had a very similar problem with intro paragraphs embedded in complex layouts).
  Needless to say, I have other thoughts about the decline of professional journalism that do not include CMS templates. I’m glad that you are thinking about these problems, and I hope you help light the path at a great paper. I just don’t want you to use a small, selective sample of the past to confirm your biases.
  Thanks for the reply, allen. Looking forward to your impact at the grey lady.
5. ∞ Brad replied:
  
  Sorry, I think I wasn’t clear about NYT art-directed pages. They were excluded from there search engine. The joys of commenting from a smartphone…
∞ Ed Mullen said:

Thanks for this, Allen. I have been thinking a lot about this issue as you framed it in the first section lately. That has also led me towards the idea of the art-directed page, as Jason called it. But from there I go in a different direction.

Just as you question the concept of the one-size-fits all template, I question the need for constantly publishing new articles. I think there is a lot of opportunity for developing and revising and evolving single content items.

Not every site has the same needs as newspapers. In fact, the problem with constant updates is that we know the latest, but not the background. I think there is a real opportunity for people to embrace the idea of being a “page of record” on a given topic, managing a set of constrained set of pages, and infuse them with rich design, content, and data. The newspaper concept is still infused with the ephemeral idea of newsprint. Breaking news today, worthless tomorrow except for wrapping fish.

There are some people working in this space. SB Nation and Vox in general seem to be thinking of this. SB Nation has “story stream”. But there is a lot of room for innovation.

Reply ↩
1. Allen Tan (editor) replied to Ed Mullen:
  
  Ed, I certainly agree. We can look at today’s 24-hour television news channels to see where a constant-update environment ends up. You may find Mandy Brown’s piece: http://contentsmagazine.com/articles/babies-and-the-bathwater/ and Matt Thompson’s piece: http://contentsmagazine.com/articles/the-update/ interesting, who propose different ways of addressing this problem.
∞ Jordan Moore said:

“Content like water” is a great analogy. I tend to think of content like a river flowing from its source where we can either embrace its fluidity and let it run its course or we can shape the river’s path.

Some people build dams – static structures that are essentially rigid containers capturing and halting the flow, while others build locks enabling the water to flow in a more flexible but controlled manner and let it work for people using it.

Our containers should embrace the flow, make use of it rather than being a one-size-fits-all entity that doesn’t make the best use of its contents. Coming from a front end perspective, breakpoints are our locks, working with the content and its readers. And just like rivers we need to know what we are working with first before building the lock.

Thanks for an inspirational article Allen.

Reply ↩