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