Lay It Out
Adaptive design:
It’s all about to happen
This lesson was learned the hard way at Condé, by spending a lot of money and getting a very small return. There are customers for the apps, and there are advertisers, but the cost of producing them pixel-by-pixel, extruded from magazine layouts, is prohibitive. And while the iPad has 90 percent of the tablet market, there’s the smart phone market to consider. As a yardstick, the social portal Flipboard added 20 percent to their iPad audience the first week after launching their iPhone app. And an Android app might bring more.
Dadich was interviewed by the alert Paid Content correspondent, Robert Andrews. In another post, he defined the problem: “As publishers extend their print titles to iPad, they can choose either to repurpose the paper originals, which can seem lazy and ill-suited to the touch screen, or to custom-produce interactive apps with a native interface in mind, which is expensive.” Mike Goldsmith, editor of the British magazine Future, told Andrews that if his magazine group made custom apps for all their 60-plus titles, it would “bankrupt the company.”
Meanwhile, Dadich, who called Ready-Media templates “a huge setback for designers and magazine makers,” is talking about adaptive design. He may still want to design all these magazines by hand, but the move to multi-platforms has led to some rethinking of production time and budget. He now realizes that that print and digital editions need to be designed together. The goal is “to take a piece of content and put it on 15 different screens and still have a very consistent look and feel.” Which means: “Print considerations are really being heavily influenced by design conventions in [the] tablet.”
Condé is an Adobe partner, and Dadich is looking forward to CS6 and the liquid layout feature that adapts page layouts to different screen sizes and proportions. (There’s a video demo from Adobe Max with the Paid Content story, and also on YouTube.)
Once you start working with adaptive design, you use templates whether you like it or not. A plain template contains the geometry and the style sheets to make a page. An adaptive template adds the rules that make these elements work together on different page sizes—and maintain the feeling of the design. As with dynamic web sites which have been around for a while, a designer realizes that the combination of changing content and frequency forces you to use templates. There is no time to do everything by hand. Changing the target page size adds complication. Adding updates and news sections adds more. So you tend to limit the number of different kinds of pages, and settle on a reasonable number of templates that can be adjusted to fit the content.
I’ve yet to try the Adobe offering, but the video shows two important features. With its liquid layout, the Digital Publishing Suite creates a single file instead of separate files for landscape and portrait views on the iPad and other size screens like the seven-inch Kindle Fire. And rather than pictures of text, the new DPS uses fonts. This should make the file size of these DPS apps much smaller than the half-gigabyte tonnage that the Wired app is famous for.
The idea that Adobe is making adaptive design tools is a delightful thing. Designers are familiar with Adobe tools, and magazine designers will find it easier to make the transition away from fixed-size page design if they can do it in InDesign.
But whether you are writing code or the software does it for you, adaptive design requires a different mindset. It’s not page design as we used to know it. Now we have to think about the relationship between the elements—between the pictures and the text, between the headlines and the decks and so forth. Defining the rules that adjust these relationships is the essence of adaptive design. With InDesign, the designer will set the preferences for the “struts and cushions,” just as a designer twiddles the CSS knobs and switches in Treesaver or adaptive HTML.
You can’t worry about the exact position of objects, the “pixel-perfect” details of page layout. Instead you concentrate on the visual content and the things people have come to expect on web sites like the ability to share and comment.
Scott Dadich and other magazine designers took Ready-Media for one-size-fits all design, and they didn’t like it. But this venture is really about adaptive design, which has more to do with the way you use templates than what they look like. Now Ready-Media is working on adaptive web sites that match the print design themes. When the new version of DPS is released, we’ll produce templates for Adobe’s liquid layout as well.
Most customers supplement Ready-Media templates for InDesign with hand-built elements, and/or customize the designs to fit their needs and their taste. Customers can carry their design style sheets and content tags from print to web to tablet to smart phone—or back again.
This doesn’t mean print is going to disappear, or that hand-built design (what I call artisanal design) is over. But publishers who want to distribute on print and on the web, or on tablets, or smartphones, or all of the above, will move to adaptive design.
And Adobe is in position to take a good crack at this market.
But Dadich and other Adobe customers will continue struggle with the workflow. The solution (“a workflow and a system to support these multiple design outputs”) is not yet defined. InCopy or Woodwing can handle InDesign workflow, but what about the web site? For example, what if Condé Nast thought it would make sense to merge the resources of Wired.com and Wired magazine. Would they still have two content management systems?
Smaller publications, or publishers who are moving from the web toward the tablet (i.e., Slate) may find the Adobe solution print-centric, resulting in a cumbersome workflow and big file sizes for each issue. I doubt an Adobe liquid layout edition will weigh as little as a CSS-based adaptive web site—or a Treesaver edition. If you think like a web designer/developer, then you favor adaptability, currency, interactivity and speed over pixel-perfect design. And then you’ll want to connect a social layer, aggregation, heuristic filters, personalization, subscriber account management—and ads.
The logical workflow is to put the content in the center, manage it with a neutral CMS, and connect the staff so that they can assemble different products on different platforms. My colleagues at Ready-Media and a number of developers in the Treesaver community have been working to integrate open-source CMSs, such as WordPress, Expression Engine, Drupal and Locomotive.
I’ll write more on content management as we get closer to announcing CMS options. In the long run, the workflow tail may end up wagging this dog.
Meanwhile, I’m happy that a talented and influential designer like Scott Dadich is talking about adaptive design.