 |
It appears to be a reader’s market. More written content is freely available than ever before, accessible in just about every format you could imagine. If you want it on paper, you’ve got it. On screen? What size, friend? We can shrink, stretch and stitch it all together every which way because, really, we’re just talking about words here… Or are we?
As soon as I ask that question, several others quickly follow:
- Is content so flexible?
- Is content’s most basic unit the word? Or is it, perhaps, the message?
- In today’s reader’s market, what of the writers and the designers who make reading possible?
- And are we building tools that honor their work, too?
These questions didn’t randomly pop into my head one day. Nor did a design problem get me thinking along these lines. It was while reading — for pleasure — that I noticed something was wrong. After experimenting with a few different services that let me save articles to read later in a much more reader-friendly format (what I’ve come to call “reading advocacyâ€� tools) it occurred to me that in the process of extracting content from its original context and accessing it elsewhere, I might be losing some information along the way.
I decided to see for myself by examining several pieces of content and comparing how they look and function in a variety of incarnations: the printed page, the Web and eReaders. What I found was both encouraging and, for a designer who loves to read and write, slightly troubling. I’ll warn you in advance: there are many examples below, but I think they’re all necessary in order to convey an accurate picture of just what happens to content when we start moving it around. To properly set it up, let’s first briefly look back in history.
A Very Brief History of Content and Design
Long ago, when we humans first began writing things down, there wasn’t a clear difference between pictures and words. In the earliest examples of writing, symbols depicted nameable things — a bird, a mountain, fire, rain. You could combine a few pictograms to communicate something more sophisticated, but that got writers only so far. Some concepts are difficult to describe with images alone. The development of primitive accounting records, though, further abstracted writing.
In order to properly document the wealth and splendor of their kings, Sumerian scribes had to repeatedly etch up to hundreds of animal pictograms onto clay tablets. Cow after cow after cow. Sheep after sheep after sheep. You can imagine how extreme repetition would abstract the symbols they used: the simpler the character, the faster the etching.
On the left, an example of logographic writing. On the right, an example of syllabic writing. (Source: Wikipedia)
Even though the leap from logographic (i.e. symbols that represent words) and syllabic (i.e. symbols that represent sounds) writing to alphabetic systems that approximate what we would recognize today was a profound one — believe me, I just simplified around 2,500 years of the history of writing right there — we still had quite a way to go. After all, the earliest example of punctuation didn’t come until about 840 BCE, when the battle victories of a Jordanian ruler named Mesha were carved in stone for posterity.
Distinguishing between upper and lowercase letters didn’t happen until much, much later, and it didn’t really take off until literacy expanded greatly — say, after the printing press. Imagine reading anything today without capitalization or punctuation. But you’re not reading this for a history lesson. The story of writing is far too big to be told here. And really, I have no business telling it. Yet skimming the surface of history reveals a deeper relationship between images and words than we often realize.
Sometimes words are enough. Other times, they need accompaniment. Even the arrangement of words can carry meaning. Let’s look at a practical example.
Even Basic Formatting Carries Meaning
What you’re looking at above is a recipe for cookies. (Very delicious cookies, I might add.) I realize it’s difficult to read, but the fact that these three images are small enough to fit nicely on this page actually serves an important point.
Look at the image on the left. Can you make out what kind of information the text is conveying? It’s not impossible, but it will take you a bit of time and squinting at the words to figure out what they are about in general. But as you make your way to the right, the job gets progressively easier. The words haven’t changed, but the way they are formatted has. Formatting, which is really just the way information is organized and arranged on the page, is design in its most basic sense. So, you might also say that as the attention paid to the design of this recipe increases, the more immediately recognizable its content becomes — and the more useful it becomes to an aspiring baker.
The simple lesson of this recipe is that formatting is more than just an aesthetic, secondary treatment of information. Formatting in and of itself contains information that enables the reader to better perceive the nature of the text or, in other words, the kind of message it contains. In the case of this recipe, the cookies produced by any of the three versions would be equally good, but the likelihood that the cookies would be made at all depends directly on the recipe’s formatting. Most would not quickly recognize that the version on the left is a recipe at all; you’d probably recognize the one on the right immediately.
Anyone interested in communicating more effectively should reflect on the degree to which the format — or lack thereof — of their content supports or undermines the content’s message.
Fortunately, we’re pretty good at preserving formatting that is critical to the meaning of written content. If I put the best-formatted version of my recipe on the Web, I’d be confident that readers would see it that way whether they printed it out or read it off the screen. The basics of formatting — fonts, line breaks, numbered and bulleted lists, etc. — are easily implemented and transferred, regardless of the context.
But sometimes the design of a page carries meaning that is substantially visual and that is not so easily preserved because it’s not a matter of simple formatting. History again provides a helpful example.
One More Brief Trip Back in Time
The image below comes from one of the most well-known illuminated manuscripts, The Book of Kells, famous for an extravagance in visual detail found in very few manuscripts like it. Written in Latin, this Gospel book is believed to have been created sometime around the year 800 by Celtic monks living in the Abbey of Kells in Ireland.
What is immediately obvious is that this manuscript was not created merely to transmit the text contained therein. While the message of the text was central to the lives of the monks — religiously, culturally, even practically — the creation of the manuscript was an art that brought life to the book’s deeper meaning and its role in the tradition that coalesced around it. In other words, the role of design and imagery in the illuminated manuscripts was not one of formatting. It had less to do with utility — making reading easier — than with meaningful expression. Its entire purpose would be lost if the text and imagery were separated.
What the earliest writing, my cookie recipe and the illuminated manuscripts all have to teach us is that design — whether in the most basic features of a line of text or in the subtle juxtaposition of words and imagery — is integral to the transmission of meaning and cannot be isolated from the content.
Content And Design On The Web
So far, this all makes sense from the perspective of design philosophy. But how does the relationship between design and content play out in practice? To investigate this, I’d like to share several real-world examples of how context affects content — the examples I promised at the beginning of this article.
1. Interconnected
Interconnected is the personal website of Matt Webb, the CEO of Berg, a wonderful design studio in London. As you can see, Matt has kept his website’s design very minimal. In fact, besides the fact that Matt is a very interesting person and I’ve been cyberstalking him for years, I chose his website as my first example precisely because it’s so minimal. But let’s see what this same blog post looks like when I save it to read later in my Readability account.
As you can see, reading Matt’s blog in Readability, instead of on his website, is not a substantially different experience. The colors and typography are different, and Readability includes its own toolbar on the left; but really, nothing here has changed enough to alter Matt’s message.
Let’s compare one more tool: Safari’s Reader, which detects articles and enables visitors to read them in an isolated, attention-friendly overlay.
Again, no major differences here. Just as with Readability, Safari has altered the colors and typography. But because Matt’s website is so stark to begin with, the experience is remarkably stable across these different contexts.
But what about an article from a website with a much more developed design? How might my experience of the content change from the original context to Readability and Safari Reader?
2. Smashing Magazine
For my second example, I took a screenshot of an article I wrote for this website back in May 2010, “Holistic Web Browsing: Trends of the Future.� As you can see, Smashing Magazine’s design is relatively simple; but, unlike Matt Webb’s design, it includes many more images: a graphic menu at the top, a logo and, as is common in big publications, advertisements.
Let’s see how this article looks in Readability:
What’s immediately obvious is that Readability isolates the content in the main column and, in doing so, strips out just about everything else: the header, logo, navigation and sidebar content. It also removes the ads that Smashing Magazine runs in the content column at the top of articles, but leaves the “Advertisement� tag.
Safari Reader includes the ad in the content column. Other than that, the experience is very similar.
Other than the fact that both tools effectively un-brand Smashing Magazine’s content, there’s not a whole lot to complain about here. No essential elements are missing, and because Smashing Magazine’s authors know to keep the images in their articles very basic (i.e. image references only), there’s little need to worry about losing those aspects of the message that appear in image form.
3. Craig Mod
Craig Mod is another interesting person who has been doing a lot of thinking, writing, speaking and designing related to the content experience for some time now. I’ve chosen his website partly because an article of his is relevant to the discussion, but also because I was curious how his beautiful design would translate to a tool like Readability.
Before I show you this particular article, “Books in the Age of the iPad,� in Readability, I want to quickly share a couple of reasons why Craig’s design makes for a great reading experience. First, it has white space. A lot of it. The screenshot above shows only a small portion of the page. Follow the link above to see for yourself; the article has a single column of text and many high-quality images that Craig has arranged to fit seamlessly into both the article and the website. Nothing feels as if it doesn’t belong.
Secondly, the typography — from the large illustrated title at the top to the headings and two-column preamble — contributes to a mood of calm yet earnest thoughtfulness, which I really appreciate as I slowly make my way through Craig’s argument. He uses design to guide me at a very deliberate pace.
I could go on and on. Suffice it to say that Craig knows what he’s doing with his design. And while the website might appear similarly minimal to Matt Webb’s, the language of design is used very differently here. I’m a fan.
Above is the same article in Readability. At first glance, it doesn’t look too bad. As in the other examples, the typography has changed, as have some of the subtleties of Craig’s layout. But then I realized something: Readability excludes the entire preamble! Everything from “Print is dying…� to “This is a conversation…� is completely gone. I went back to the original page and saved it again in Readability just to double-check. Same thing. I triple-checked. Same thing. Also, look closely at the last paragraph in the screenshot above. For some reason, Readability doesn’t like Craig’s em dashes.
OK, I’ll save you the repetition and skip Safari Reader for this example. (It looks very much like the other two examples.)
Seeing Craig’s website in Readability was a disappointment. After seeing the other examples, I was prepared to lose his design sensibilities, but I wasn’t prepared to lose such a sizeable chunk of content. Clearly, the way Craig has laid out his page’s template doesn’t jibe with the code that Readability looks for to identify where a page’s main content begins and ends, and that’s not really anyone’s fault.
Readability should not — and could not, really — be expected to adapt to and interpret every conceivable way that a Web page can display content, nor should Craig have anticipated how Readability works when designing his website. It’s not about failure so much as about understanding that communication on the Web is done in a variety of ways.
But Wait! It’s Not Just About Pickiness…
Dwelling on the mostly minor differences between how these articles appear may seem overly picky. After all, it’s not like you can’t read them. But even the minor differences — whether a substitution of typography, a change in color or an omission of imagery — are meaningful to the designers who created the original environments in which these articles exist. In my experience, I’ve known plenty of developers who take a casual attitude to implementing designs, but I’ve never met a single designer who doesn’t consider even the smallest detail sacrosanct.
There is also an irony here worth noting. Tools like Readability — and I’m focusing on it mainly because it does reading advocacy the best — are very well designed. They speak the designer’s language by paying attention to details that usually only those who have worked with typography would consciously recognize. The rest of us just see the page and know that it looks beautiful and feels good to read. Designers recognize in Readability an appreciation of white space, proportion, typography and other essentials that are typically considered luxuries on the Web.
That’s why they are so excited about it. Nevertheless, elegant as it may be, Readability substitutes the deliberately unique design of an article with a one-size-fits-all boilerplate aesthetic. While I’m confident in the integrity and best intentions of Readability, I also question the dynamic that it potentially establishes: by adeptly harnessing the seductive power of good design, it attracts the very people who its functionality ultimately undermines.
What to do?
Content And Design In eBooks
Because being able to focus more precisely is the main reason to use reading-advocacy tools, it occurred to me that other content — besides articles written for regular print and Web publications — might present similar difficulties to this system we’re building around content portability. I can think of one huge category in particular that is experiencing the growing pains of the analog-to-digital transition: books.
I chose several books to test what I did with the Web pages: view them first in their “native� format (as printed volumes) and then in their “portable� format (as eBooks).
1. Extremely Loud and Incredibly Close, by Jonathan Safran Foer
In Extremely Loud and Incredibly Close, Jonathan Safran Foer tells the story of a 9-year-old boy who embarks on a quest to learn more about a mysterious key left behind by his father, a victim of the 9/11 attacks. Foer experiments with image and text a great deal in this book, making for a perfect opportunity to see how the printed page translates to eBook format.
The scan above shows the first two pages of a chapter that “appears� to still be in draft form. I was immediately curious how the eBook would represent the red editorial marks in the text.
As you can see, the eBook doesn’t handle them very well. There doesn’t seem to be much rhyme or reason to the characters that the eBook inserts to represent the edges of the red circles. Sometimes they’re parentheses, other times uppercase letter. Either way, the text is pretty difficult to read.
In case you were thinking, “Hey, that’s not so bad!�, above is a screenshot of the next page in the eBook, where things get considerably worse. Adding in slices of images of the original printed page doesn’t help.
2. The Raw Shark Texts, by Steven Hall
The next example is The Raw Shark Texts, a strange mystery novel about memory and reality (among other things) by Steven Hall. The story takes place in a world much like our own, except that it is also home to “conceptual creaturesâ€� that feed on ideas. As I said, it’s a strange book — so strange that the text itself veers off into experimental visual oddities, too.
In the scan of the printed book above, I’ve isolated a calligram of a fish made of text (which makes sense — sort of — in the story). Let’s see how the eBook handles this.
In some ways, the eBook format handles Hall’s fish images better than Foer’s editorial markings. In particular, no junk characters are inserted in the text. But it’s not the greatest representation of what Hall had in mind. In the printed book, the “fossil fish reconstruction� occupies the entire page, with its description underneath. In the eBook version, the image is reduced in size and put on the same page as text that refers to an image not shown, while the “fossil fish reconstruction� footnote is bumped to the next screen.
Obviously, the eBook doesn’t stick with the printed version’s design — nor does it really try to. This makes for a more confusing reading experience.
3–4. The Stars My Destination, by Alfred Bester, and The Medium Is the Message by Marshall McLuhan and Quentin Fiore
Neither of these books is available as an eBook in the Kindle, iBooks, or Google Books marketplaces. An EPUB version of The Stars My Destination is floating around on the Web, but it is not an authorized version, so I don’t expect that it handles the original design with any reverence.
But both of these books serve as great examples of how the message can depend on more than just traditional text.
In one of the later chapters of The Stars My Destination (shown above), Bester’s protagonist experiences an almost psychedelic trip through time and space, which the book captures with an illustration of the words that adds a visual layer to the description, similar to concrete poetry.
Something like this could be easily preserved in an eBook by inserting images in the flow of text. But the particular words that Bester illustrates would have to be added as some kind of meta data in order for the text to be fully indexed and searchable.
Finally, what fusion of image and text is more relevant than The Medium Is the Message, by Marshall McLuhan and Quentin Fiore? You’ve probably already guessed that the title of this article is an homage to this book. The scan above (no, I didn’t accidentally reverse it — that’s actually how it is printed) is just one example of how the pages of the book are all uniquely designed to illustrate McLuhan’s text in a striking visual and typographic style. Fiore, by the way, is a graphic designer, not a writer, who reached out to McLuhan to collaborate on the book, specifically to explore how text and image can be combined to affect the consciousness of the reader.
If you’re looking for one book that in its very existence emphatically represents the diverse nature of content and pushes its boundaries far beyond text alone, this is it.
Am I Just Being Picky Again?
Maybe so. Like the Web pages that I looked at earlier, none of these eBooks have been adapted poorly enough from print to be impossible to read. After all, Google Books gives you the option to read both the scanned pages and the “flowing textâ€� version. So, in any of these situations, you do have alternatives. Of course, depending on your screen’s size, the scanned version might be less than optimal — you might have to scroll up and down so much that you’d be too annoyed to bother with it.
Not every book will suffer the analog-to-digital transition. Only those that subtly interweave text and image (and some even that embed illustrations in the text the traditional way) will slip through the cracks of what is, currently, a fairly simple system.
But what these eBooks continue to make clear — reinforcing our argument that emerged from tracing written language from its roots to today’s awkward technological transition — is that written communication is complex. More complex than just lines of text. Just because an author uses a variety of means of communication — including text, images, and images created from text — their book should not be disqualified from being made available in digital form, nor be handicapped when it is made available. After all, it’s not the book’s fault that our current approach to digitization favors works that adhere to a rigid distinction between text and image.
Content And Design In The Future
What these reading-advocacy systems need now is design advocacy — an expansion of the templates and tools that, on the one hand, honor the intended substance and meaning of the author’s text and that, on the other, don’t reduce the reader’s experience of content to one of merely processing text.
Coincidentally, GOOD Magazine just recently issued a challenge to its readers: redesign a news website using only images — no text allowed. The magazine doesn’t explain where this idea came from, but would it be a stretch to imagine that it signifies a boredom with text and a desire to return to our roots and explore communication with symbols again? Perhaps. I certainly look forward to seeing what GOOD’s readers come up with.
In the meantime, we all need to give serious thought to how design and content interact. I think portability is a great idea — see Cameron Koczon’s piece on “Orbital Contentâ€� for a focused argument on “content liberationâ€� — but it would be a shame to narrow down the designed content experience to only what can be easily translated to third-party reader tools. Imagery, and especially the subtle interplay of imagery and text, deserve to remain active parts of digital expression. Our goal, whether we’re designers or writers, should be to make this happen. Maybe the Readability team is already thinking through these issues and coming up with new ways to translate content. If so, I’d love to hear about it.
I’ll admit to not having an answer, either. My intent here is to extend the question to you, in the hope that we can figure it out together.
(al) (il)
© Christopher Butler for Smashing Magazine, 2011.