Last week, Thijs Niks (@ThijsNiks) tweeted enthusiasm for the Journal of Electronic Publishing‘s combined use of browser- and print-friendly layouts. (Thanks, Thijs!) “How do you do that?” he asked. In reply, Bryan Smith of MPublishing’s Publishing Technology Group explains how we prepare content for consumption on screen(s) and in print:
The Journal of Electronic Publishing, like other journals we publish, goes through an extensive digital workflow before reaching a reader’s screen or printer. Central to this workflow is the separation of a journal’s content–text, images, and bibliographic metadata such as title, author, and issue number–from the styling and logic that control how it is rendered to a reader. We didn’t invent this division of labor–similar approaches exist elsewhere in the publishing world (as in the distinction between editorial and production work) and in the world of web and software design (for example, HTML and CSS).
As with all of our serials, JEP’s content is created and stored as XML. Then, we use XSLT to transform the XML to HTML, and CSS to control how it appears in a web browser. When you click the “Print this article” button, a different CSS is applied to the HTML to produce our print-friendly view, which can be printed or saved as a PDF.
The Publishing Technology Group is responsible for making JEP accessible to readers, who might come to the journal through a variety of different devices (e.g., mobile, desktop, tablets), browsers, media (e.g., browser, print, eReader) and applications (e.g., newsfeeds, citation management tools). Our challenge is to facilitate positive yet heterogeneous user experiences. For example, the browser layout and the print layout need not be–in fact, should not be–identical, but both should serve their intended purpose well. There are places where we have done this well, and there are places where we can make improvements.
Much of our effort goes toward ensuring that our digital content is readable in modern browsers, but we also put time into creating an attractive, print-friendly view. This supports printing, of course, but also the generation of PDFs that users might want to send through email, store on eReaders, or simply save to read later.
Here are some of the factors we took into consideration in designing our print layout:
- Preserving context: on the screen, it is redundant for us to display certain bibliographic information (such as the journal name) at the top of each article, because it is already displayed in headers, logos, etc., throughout the site. However, when users print an individual article, they lose the infrastructure of the publication as a whole, and the context that goes with it. To preserve this context, and facilitate correct citation, we include complete bibliographic metadata in our print layout for each article.
- Preserving implicit information: the web is based on hyperlinks, and much of the meaning of a document might be implicitly related through links to other documents. In most cases, on screen we don’t display the URL, but instead link the relevant bit of text. In our print layout, we preserve this information by displaying the URL in brackets next to the linked text .
- Customizing typography: We tailor our browser- and print-friendly layouts to use different fonts, font sizes and spacing that make it easier to read text on the screen or on paper.
- Abstracting presentation: On the web, we use images, colors, and other custom design elements to give each publication’s website a distinct identity. In print, most of this is removed in favor of a consistent, clean, easy-to-read layout. This also allows us to use the same print-friendly styles and templates across our publications.
Less visible to users but just as important for accessibility is our responsibility to properly identify metadata. Capturing this information in a consistent, machine-readable way is one of the central concerns of the semantic web, and is often accomplished by tagging relevant content with identifiers. RDFa, a W3C recommendation, allows content providers to attach metadata schemes and standards to their content. This supports the automated discovery of content released under a Creative Commons license, for example, as well as the export of bibliographic data by citation management tools.
By capturing the correct metadata and making it machine accessible, we add yet another concern to content and display: functionality. Tools will continue to emerge that use metadata to do cool and useful things, and these will allow readers to use content in ways that publishers cannot anticipate. We can’t predict every tool that will be developed in the years to come, but by making our data and metadata available in standard, predictable ways, we can predict that our publications will be ready to be scooped up and used in these new environments.
In December 2010, we released a new design for JEP. Since then, we have been making incremental improvements to the design, as well as adapting it for use across our publications. However, we still have work to do to continue improving access to our content. This includes:
- More device testing: In general, we try to add functionality and features that degrade gracefully, meaning that the limitations of any given device should not disrupt the user’s experience with the content. One clear example is displaying URLs in our print-friendly view: paper does not support hyperlinking, so to ensure that users reading in print don’t miss anything, we display the URLs. A more complex challenge is to test the ever-changing limitations of growing range of devices to be sure that our publications function well as broadly as possible.
- Usability testing: different users have different needs and expectations. While our developers and designers have different opinions, testing against a broad range of users is the only way to add objectivity to the highly subjective process of design.
- Identifying and capturing additional metadata for use by existing and future tools.