How Disregarding Design Limits The Power Of Content

Advertisement

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.

writingexamples
On the left, an example of logographic1 writing. On the right, an example of syllabic2 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 Mesha3 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

recipe

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

bookofkells5

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

mattwebb16

Interconnected7 is the personal website of Matt Webb, the CEO of Berg8, 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 Readability9 account.

mattwebb2

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.

mattwebb3

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

smashingmagazine110

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 Future11.” 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:

smashingmagazine2

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.

smashingmagazine3

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

craigmod113

Before I show you this particular article, “Books in the Age of the iPad14,” 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.

craigmod2

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

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

extremelyloudandincrediblyclose117

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.

extremelyloudandincrediblyclose2

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.

extremelyloudandincrediblyclose3

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

rawsharktexts119

In the scan of the printed book above, I’ve isolated a calligram20 of a fish made of text (which makes sense — sort of — in the story). Let’s see how the eBook handles this.

rawsharktexts2

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.

starsmydestination121

In one of the later chapters of The Stars My Destination22 (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 poetry23.

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.

mediumisthemassage24

Finally, what fusion of image and text is more relevant than The Medium Is the Message25, 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 challenge26 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 Content27” 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)

Footnotes

  1. 1 http://en.wikipedia.org/wiki/Logogram
  2. 2 http://en.wikipedia.org/wiki/Syllabary
  3. 3 http://en.wikipedia.org/wiki/Mesha_Stele
  4. 4 http://en.wikipedia.org/wiki/Book_of_kells
  5. 5 http://en.wikipedia.org/wiki/Book_of_kells
  6. 6 http://interconnected.org/home/
  7. 7 http://interconnected.org/home/
  8. 8 http://berglondon.com/
  9. 9 http://www.readability.com
  10. 10 http://www.smashingmagazine.com/2010/04/10/holistic-web-browsing-4-trends-of-the-future/
  11. 11 http://www.smashingmagazine.com/2010/04/10/holistic-web-browsing-4-trends-of-the-future/
  12. 12 http://www.craigmod.com
  13. 13 http://craigmod.com/
  14. 14 http://craigmod.com/journal/ipad_and_books/
  15. 15 http://en.wikipedia.org/wiki/Em_dash#Em_dash
  16. 16 http://en.wikipedia.org/wiki/Extremely_Loud_and_Incredibly_Close
  17. 17 http://en.wikipedia.org/wiki/Extremely_Loud_and_Incredibly_Close
  18. 18 http://en.wikipedia.org/wiki/The_raw_shark_texts
  19. 19 http://en.wikipedia.org/wiki/The_raw_shark_texts
  20. 20 https://secure.wikimedia.org/wikipedia/en/wiki/Calligram
  21. 21 http://en.wikipedia.org/wiki/The_Stars_My_Destination
  22. 22 http://en.wikipedia.org/wiki/The_Stars_My_Destination
  23. 23 https://secure.wikimedia.org/wikipedia/en/wiki/Concrete_poetry
  24. 24 http://en.wikipedia.org/wiki/The_Medium_Is_the_Massage
  25. 25 http://en.wikipedia.org/wiki/The_Medium_Is_the_Massage
  26. 26 http://www.good.is/post/project-illustrate-the-news
  27. 27 http://www.alistapart.com/articles/orbital-content/

↑ Back to topShare on Twitter

Christopher Butler is the Chief Operating Officer at Newfangled, a Web development firm specializing in agency partnerships. He has written articles on the the current and future state of the web for Print and HOW magazines, Newfangled.com, and is the author of The Strategic Web Designer. You can follow him on Twitter @chrbutler.

Advertising
  1. 1

    Firstly, I really enjoyed this article. So—thanks!

    I don’t see a problem here, though. After all, the web is designed to separate content from presentation (HTML from CSS), and that’s a good thing. But this separation means that authors can’t control presentation away from their site.

    The fact that Readability doesn’t parse an article properly just means that they need to improve their software.

    Besides, in 99% of cases I find Readability improves the feel of a text.

    1
    • 2

      Helen Benjamins

      March 6, 2013 8:23 am

      Oh, but do you not love the smell of fresh ink or the sound of a crisp, new page being turned?

      0
  2. 3

    Thanks for this excellent article Christoper,

    It’s a great topic and one that has wondered the corridores of my mind for a long time. I stem from a family of artists and my brother has a Masters Degree in Fine Arts. I have also worked closely with graphic designers and in particular my Art Director, Daniel for more than 7 years.

    I am not an artist, a designer, or a writer, yet I appreciate all three disciplines with immense respect. I have often deliberated over the design of literary content and what elements are relevant to the message. In some instances neither can stand alone. Yes a picture can paint a thousand words, however, there are times when a few words are necessary to explain a picture!

    My best analogy is that there are those who will never understand, or care why a graphic needed to be included, let alone why a particular typface was used. On the other hand, there are people who are more right-brained and see characters as shapes (that’s all they really are anyway), and can’t bear to read wordy texts devoid of any design elements.

    Regardless of which side of our brains we favor, we are living in an age where design is a core component to everything we engage in. from social networking sites, online newspapers, printed media and television through to sales brochures and even store layouts, we are visually engaged. Creators need to consider their audience, the method of delivery and the purpose. Relevance should always remain the key focus.

    In the next few months we will see major innovative changes in digital publishing. Newpapers, magazine and book publishers will be presented with new technology that will open up their ability to be as creative as they like while remaining accessible and platform independent. This technology will change the world, hopefully without causing any disadvantage to those in the lower socioeconomic demographic.

    The days are numbered for print media, books and the like … trees are smiling, paper mills are worrying … Press release soon!

    Thanks again for opening up this incredible topic Chris!

    Cheers,
    Paul Thomas

    -1
  3. 4

    Christopher Butler

    October 17, 2011 7:18 am

    Leon: Glad you enjoyed the article!

    I hear what you’re saying about how the technology already operates in a way that implicitly distinguishes between content and design. It may be subtle, but that is exactly what leads to the “problem.” Of course, it’s not a huge problem that I’m discussing here. But because there are truly meaningful connections between design and content, translating only a portion of that information when porting content over the web is something that I think designers should be discussing.

    This is partly an issue of philosophy, so some may be content to increase the divide between content and design and not perceive the issues I’m trying to raise. But it’s equally an issue of technology. On that part, I agree with you: Readability may find a way to translate those aspects of design that are critical to preserving the message that content contains. Or in other words, get better at sensitively perceiving and translating content.

    Paul: Your comment is spot on. Part of the reason that this article ended up being so long–and rife with so many examples–is because I’m trying to articulate something that is, in most cases, both extraordinarily important and equally subtle. I think you’re right that we’ll see enormous changes in how technology and publishing collaborate–something I’m very excited to observe and participate in. On the technological side, I had some ideas about how the meaning and role of design will change in the near future, which I included in my last article for Print Magazine (which you can read here: https://www.newfangled.com/smarter_better_cyborgs).

    Thanks for your comments!

    0
    • 5

      I agree it’s a philosophical issue, but I don’t think we want to argue for the unseparation(?) of content and presentation. Without it we lose the portability and accessibility of content, which is what the web’s about.

      At the end of the day all sites are built on the nuts and bolts of HTML—paragraphs, lists, headings, articles, asides and a few established classes (.entry-title, .entry-content) etc. etc. If that doesn’t make sense in and of itself then it hasn’t been built correctly.

      0
      • 6

        Christopher Butler

        October 18, 2011 3:17 am

        Yes, agreed. I’m certainly not arguing for a new way to present content on the web–though I wouldn’t be apposed to one that worked better than how we do it now. What I’m saying is that though we do generally separate text from design by using html + CSS, there are cases in which that separation doesn’t work so well. The way we’re doing content portability makes that plain, and is both indicative of a flaw in the technique and potentially in our appreciation for the deeper connection between content and design.

        0
  4. 7

    Christopher,

    That was a great read! I’m one who shares your concern. If the medium weren’t the message, then what value do we, as designers, bring to the table? Am I to painstakingly nudge leading, kerning, image sizes, padding, etc. only to have it all thrown away and replaced by someone else’s generic, one-size-fits-all typographic decisions? I sure hope not.

    One literary genre that routinely gets slaughtered by e-book formats is children’s literature. Some of those books are real masterpieces, and they combine message and medium so inseparably! There’s got to be a way to preserve that in the digital world!

    1
    • 8

      Christopher Butler

      October 18, 2011 3:23 am

      David, it’s interesting that you mention children’s books. I intentionally avoided mentioning them because they were the one kind of literature that depends upon a very intentional coordination of content and design, and, as far as the iPad is concerned, has seen some development. Now, whether it’s been done well is another question entirely! I admit that I haven’t looked at enough of them to form an opinion on that–another reason I didn’t mention them here.

      But I agree with you: children’s literature presents a great opportunity to figure out how we’re going to approach translating deeply visual content from the page to the screen.

      0
  5. 9

    As a designer who has always been taught that form follows function – which typically incorrectly translates that function is MORE important than form – I appreciate the small times when the form people step up and remind us that form is equally as important as function; we just typically ask ourselves about the function first.

    Your recipe example was a perfect visual aid to illustrate your point.

    I’m all about good content that can reach as many people as possible, but I’m also very concerned with how that material is translated, and what it looks like in the end. I hope that the future of function will continue to strive to accommodate form.

    Thanks for the great read!

    0
  6. 10

    There’s a great counterpoint to this argument by James Bridle that explores similar themes: http://booktwo.org/notebook/the-new-value-of-text/

    Form is undeniably a crucial consideration in design. It can clarify and enhance a message. But it is just as crucial for web designers to accept that we cannot always control the form of our content. That is now a primary constraint of web design (as it should have always been). To design a web page is to anticipate the variety of devices it may be viewed on and the variety of agents your content may be consumed by (e.g., Readability, Google Reader, search engines, etc.) Given these constraints, it is the job of the designer to ensure the message remains clear in all circumstances. If your message fails on a device or agent, that is a failure of the designer. Furthermore, when form is stripped away, we’re left with the writing alone. This emphasises the importance of content strategy and great writing. In the absence of form, a good writer will create it in our minds.

    I respectfully disagree that it is nobody’s fault that Craig Mod’s article gets a little mangled by Readability. Good markup would rectify this issue. That is a responsibility of the designer and is precisely why good markup is so important and “future friendly.”

    So I would suggest that the answer lies in embracing the constraints. Ensure your message remains clear – through good writing and good markup – in a variety of environments. Then perhaps improve your message with thoughtful progressive enhancement, but don’t rely of the enhanced version to convey your message alone. Some of the examples you cite don’t translate well to digital format, but I believe through good writing and design that is sensitive to the medium, the message can be retained. Beyond that, if the form is absolutely required, then perhaps we’re now straying into the realms of art, where the message is as much about the designer’s need for self expression as anything else.

    The bottom line for any web designer wrestling with these ideas is this: if you simply cannot let go of control over form, then perhaps web design is not for you? Or perhaps the web is not the ideal medium for your message? That’s totally fine and perhaps you’d be being more honest with yourself if you did print design, or something else, instead? There is plenty of fun and satisfaction to be had in other disciplines without having to impose the values of one on another.

    0
    • 11

      Christopher Butler

      October 18, 2011 8:06 am

      Charles,

      I read James Bridle’s piece earlier this month and agree that it’s worth a look for anyone interested in this stuff. But I’m not sure that I agree that it’s a counterpoint. Consider his conclusion:

      “Finally, the text still requires context. As publishers spin up their digital and print-on-demand backlists, more and more is published with less and less context. These efforts amount to land-grabs and rights-squatting, without adding value. Works without TOCs, indexes, author bios, footnotes. Placing work in context is one of publishers’ primary tasks, stretching out to commissioning introductions, assembling background material, supporting biographies and critical studies. Design belongs here too: good book design, appropriate book design, as important now as it has ever been.”

      Maybe he’ll weigh in on this at some point, but I see a lot of connections between what James is saying and what I’m questioning in this article. Pulling a piece of content out of its original context and porting it to a new one isn’t always as simple as transplanting text from one place to another. Sometimes, there is more. Sometimes the form–and I don’t necessarily mean the format, as in article or blog, print or web content, etc.–is more deeply embedded in the text, as with most of the examples I shared here.

      Perhaps Craig Mod’s page would be more portable if he handled markup differently, but I’m not sure I want to say that he should have handled it differently. I like that the web provides an open and free place for people to express themselves. And, for all I know, Craig finds it perfectly acceptable to exchange portability for that freedom as far as the technology forces that choice right now.

      But if a piece of content isn’t easily translated, I don’t think that means it’s too dependent upon superfluous stuff. Or, in other words, I don’t think we should go down the road of equating content purity with ease of portability. That’s a far too simple and blunt approach to a field of diversity that should be celebrated for its range of possibilities. Of course, rather than conclude that we shouldn’t be doing portability, I’m more in favor of saying, ok, this is a neat start, but how can we do it better?

      Thanks for your input and ideas. I’m digging the conversation so far!

      0
      • 12

        Ah, yes, I meant counterpoint as in a parallel contrasting argument (as in a musical counterpoint) that adds to the overall richness of the discussion, rather than a counter argument as such.

        James’s central point is that many publishers are being lazy and simply plopping the text of books into e-formats and expecting the added fluff of these new media to somehow disguise that the experience isn’t as good as a real book. Or worse, that this added fluff somehow enhances the experience to such an extent that the text is demoted to a sort of commodity that can be treated carelessly. Respect for the text itself is being eroded. The answer is to spend time and effort designing the ebook experience to best express the text in the context of an e-reader. In other words, content first. Respect the text.

        My point is that, on the web, we have to assume our pages will be viewed in a way we didn’t intend, and that we should strive to provide the best experience we can for these unknowns. That is web design, after all. If the design requires the richness of experience provided by a full desktop browser, or tablet, then that’s fine as long as it was a concious design decision carefully made. Breaking rules and pushing the boundaries of our constraints are valid and valuable design tools. Apple didn’t become the king of tech through conformity. If the experience is not optimal in something like Readability, then perhaps there could be a caveat or warning at the top of the article that only gets displayed in the stripped-down view advising that the optimal experience can be had on the original site. That’s kind of what Read it Later does – it warns that the page doesn’t look like an article and may not work in this context. Actually, Read it Later manages to parse the whole Craig Mod article. The reading experience is not perfect, but the message remains in tact. In fact, the reading experience on Read it Later on my Nexus S is better than viewing the original via the built-in browser, which requires a good deal of panning and zooming. It’s not as good as the original desktop version on a Mac, granted, but pretty good. With improved markup, it could be even better. I want it to be better. I read far more on my phone nowadays than I do in any other medium. I want the best experience I can get where I happen to be reading. A good experience in my current context outweighs a perfect experience in some other context that I may never get to. Designing with these constraints in mind may well be a hard challenge for the designer, but since when was design supposed to be easy?

        0
        • 13

          Christopher Butler

          October 19, 2011 4:41 am

          I think your point that now that there are e-readers to contend with as a context, the design of the book, insofar as it is content and not just an object, will have to adapt. I couldn’t agree more. In a spectrum of adaptation, that is the forward momentum for sure. But there’s also the retrospective side of that spectrum, which presents the challenge of how to bring past works–those designed for the printed page (and like my examples, incorporate visual cues that add meaning to the reading experience but are not just text characters)–forward as well. The baseline forward momentum–the opportunity to design new works for e-readers–is a wide field of possibility, but I think that adaptation of the works preceding this transition will be more difficult.

          As for your points about the web: As a designer who has always worked professionally on the web–I’ve never really done print–I am in full agreement.

          I like your conclusion–“since when was design supposed to be easy?” The piece I wrote for Print magazine that I referenced in my reply above to Paul a couple of days ago concluded with a similar challenge. It may be questionable to quote one’s self, but for the sake of emphasizing our like-mindedness, here goes:

          “Design has always been about possibilities, not hard-and-fast definitions. That’s important to remember as technology pushes the boundaries of professional identities and challenges the distinctions among designer, engineer, and technologist. But technology is more than just a tool; it’s an expression of intent. It is how we shape the world around us and conform it to a vision of how we want to live. In considering our futures, we must question how technology will define who we are and what we do. Should technology determine what it means to be a designer, or should the progress of technology be designed? I believe that we’ll find the answers to these questions, but not without participating today in the project of imagining the world we will inhabit tomorrow.”

          0
  7. 14

    As someone who has just recently started using an eReader, I found this quite interesting, so thanks.

    That being said, in spite of these issues, I find that I now read much more then ever before….perhaps a trade off of sorts.

    0
  8. 15

    Really excellent read! The future of content and design should be interesting.

    0
  9. 16

    Nice article thank you, I think the cookie recipe example illustrates your point well.

    0
  10. 17

    Christopher Butler

    October 19, 2011 4:43 am

    Alan, KG, Ryan, and Okibi, thanks for reading. I’m glad you enjoyed the article, and took the time to say so!

    0
  11. 18

    In my experience I have worked with designer who dont take the time to learn the basics of developing, or even take the time to build a strong relationship with the developer…….

    0
  12. 19

    As someone who has readied an e-book for publication, all I can say is YES! regarding the limitations of Kindles and Ipads. Braindead. I mean, six fonts or so, mostly not very good, no good way to do margins or even, on the Kindle, quote poetry, inserting the simplest image is an exercise in kludges that scale up and down badly. Hopeless.

    There is a far more adequate, open source epub format, but Kindle with 75% or so of the market doesn’t use it and Apple cripples it. Both of them are mainly concerned with control and money, and therefore DRM, so the reader experience is a low priority. At the very least, they could use their huge corporate resources to hire a few programmers to bring their proprietary offerings up to scratch, but that’s too much trouble, it seems. (Grrrr.)

    Excellent article. And thanks for the Craig Mod link. What a stunning web site!

    0
  13. 20

    Mark "Chief Alchemist" Simchock

    October 26, 2011 4:40 am

    Maybe I got up on the wrong side of the bed this morning but I feel compelled to comment. At the risk of coming off like a critic, I’d like to share some thoughts on this article:

    1) “It appears to be a reader’s market.”

    I can only hope the vagueness of the “appears” is some sort of pun on the subject matter to follow. If you’re a designer and you have yet to realize that it *is* a readers’ market then I’m not so sure you should be starting the realignment of your education here. It’s probably best to start with an optometrist. See? (Pun intended). Perhaps also look into getting your empathy gene checked :)

    2) “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.”

    In other words, context effects consumption. Pardon me but…duh?!?!? The sad irony here is that Smashing, Mashable, et al are constantly presenting websites, biz cards, etc. with the preface of aesthetic beauty being the key metric for good/great design. My Gawd, nothing could be further from the truth. Yet the lack of myth busting marches on.

    3) I’d like to add context includes the receiver. For example, 10 point text might be an appropriate font size for college students but it’s not appropriate for the 45 & up crowd. Yet how often do we see that too? Or, people accustomed to reading on-screen are going to have different expectations than those who do not. While unlikely in most cases, perhaps Chris is outside the target market sweet spot of some of these publishers?

    As Mr. Butler points out, design is as old as the written word itself. Yet in spite of the history available and the modern tools, etc. the originators and inventors seems to have done a better job with communication than a significant number of today’s digital media manipulators. I’m not a designer and frankly I’m embarrassed for ya all ;)

    4) If we’re going to discuss “content & design” then is that not what’s wrapped within the context of UX? And isn’t “design” about enhancing that experienced? That is, “design” is a means to an ends and not a (selfish?) ends in and of itself. Correct?

    5) Let me try to end on a less provocative and more positive note:

    If you want to quickly wrap your head around the idea of effective broadcasting and receiving then consume the first chapter of “Words That Work” – Dr. Frank Luntz.

    I also found this article in the NY Times from a few months back very intriguing:

    http://www.nytimes.com/2011/04/19/health/19mind.html

    My takeaway? That easy to read does not equal easy to remember. And while the examples cited in The Times; article are in the context of education, you have to wonder if such characteristic of the brain don’t cascade into other areas of life. In other words, maybe pretty and consumable does not translate into memorable. Perhaps the brain perceives learning more broadly such that surfing the web is quite often a form of education?

    Speaking for myself, there have been plenty of times I’ve been on a site that appears to be “memorable” only to forget a day or less later. True, the broader context of how much other content is the receiver is consuming has impact as well. And around we go again…See?

    p.s. Don’t get me wrong, I love Smashing. But maybe my context for coming here isn’t a good match for what and how Smashing is selling?

    0
    • 21

      Christopher Butler

      October 27, 2011 4:31 am

      Mark,

      You’ve got some good thoughts here.

      My responses to some of your numbered points:

      1 & 2: “…appears to be a readers market…” Yes, a bit of sarcasm here. When we say it’s a buyer’s market, we’re saying there are more homes for sale than buyers, which puts the buyer in a position of power. When I say it’s a reader’s market, I’m saying that there’s more content than time to read it, which puts the reader in a position of power. Yet, most people think it’s enough to just produce content. What I’m trying to put out for discussion here is that it’s not enough to just produce text; we have to produce content worth the reader’s attention.

      So, that leads to the “…reflect on the degree to which the format…of their content supports or undermines the content’s message.” Duh, yes. But still, most content producers are not doing this. And this isn’t just a blunt instruction. What I’m calling for here is reflection. There isn’t just one way to best format content. What we need is thoughtful consideration of how to best communicate ideas.

      3. Agreed. Unfortunately, I have no control over the design of Smashing Magazine’s website.

      4. Agreed again. I recently wrote an article for my firm’s website discussing the idea of ten-second usability tests that are meant to show how design enables or disables a user’s ability to evaluate the purpose and value of a webpage. A Nielsen study has shown that most web users decide whether to continue reading or leave a webpage within the first 10 seconds. So, I put together a process that helps to evaluate how your webpage performs in that flash scenario. As you say, easy to read doesn’t always mean something is easy to remember, nor does it mean that the page has created the right first impression on a reader. The article is here, if you’re interested: http://www.newfangled.com/how_design_helps_users_get_to_know_webpages.

      0
  14. 22

    One important issue you could have tackled here (perhaps in a Part II?) is the issue of archiving. Most users of the Web understand that most of what they see online is ephemeral. Designers are often aware of the same thing. When something is created to last forever, as a printed book, for example, there is usually greater care and “particularness” put into the project.

    Right now, there isn’t a good and automatic way to preserve digital masterpieces for posterity. (Ever tried printing out a PDF record of a website? Yuck!) We simply presume that most data and/or formatting will be lost during transitional periods. An ebook for the Kindle may require different formatting for the Nook — and so on and so forth. And when the next generation of e-reader comes out, there be something else “lost.” Really, the only type of archiving that seems reliable is to print something that is “as the designer intended” onto paper (or some other physical substance) and then to preserve on film. (Presumably, additionally Google will scan the physical record — but then we have the same problem of digital fragility.)

    I sure hope great minds are figuring out ways to physically preserve digital works for posterity (or for the Apocalypse, depending on your outlook).

    0
    • 23

      Christopher Butler

      November 21, 2011 4:24 pm

      Eric,

      You’ve got some good points there. And you’re right, there are people trying to think through the best way to handle digital archives. Right near me is the home of iBiblio, one of the first online libraries which has grown over the last 15 years to host many important archive projects like Project Gutenburg and entree.org.

      Back in the spring of 2009, I posted a few entries to my blog urging that we start a digital conservation movement for the reasons you commented upon. You’ll see from the comments that there was *some* interest, but it didn’t really get off the ground. Maybe we can try again.

      Chris

      0
  15. 24

    I just sent this article to Marshall Brain, founder of http://www.howstuffworks.com, as a rebuttal to the scathing remarks he made as one of the featured speakers at the Internet Summit 2011 in Raleigh, NC yesterday. His entire session, which was intended to elevate content as king (which I support 100%), skewed towards portraying design as an unnecessary waste of time that only serves to line the pockets of people who work in the design industry. He was calling for everyone to revolt and not buy into the scare tactics that designers have promoted over the years; that believing design was necessary for a good Website was akin to the “Emperor’s New Clothes” parable. Thank you for writing an article that an uninformed engineer with no appreciation or understanding of how design serves to enhance and support content might be able to understand.

    0
    • 25

      Christopher Butler

      November 21, 2011 4:28 pm

      Sherry,

      The entire idea of “content” is, unfortunately, controversial right now. The idea that it is inherently “free” of design is exactly what motivated me to write this article for Smashing Magazine. Clearly, that is not something with which I agree. However, I do think that the notion of “design” is also being challenged today. My recent columns at Print Magazine have been toying with the idea of what design means now that content has been liberated from its traditional containers and made so much more portable, as well as now that we store that content in largely unseen and non-visual contexts (i.e. “the cloud”). I hope this article is food for thought for anyone who falls on Brain’s side of the argument.

      Chris

      0
  16. 26

    I’m surprised you didn’t mention “House of Leaves” along with “The Raw Shark Texts” and “The Medium is the Message”. (If you’re not familiar, I strongly recommend you check it out.) The typography, layout, and pagination are essential to the story.

    (lol, just realized this is two years old. Sorry for the thread necromancy).

    0

↑ Back to top