JoomlaVision > Web design > How Disregarding Design Limits The Power Of Content

How Disregarding Design Limits The Power Of Content

It appears to be a reader’s market. More total ease is openly permitted than ever before, permitted in customarily about each format we could imagine. If we wish it on paper, you’ve got it. On screen? What size, friend? We can shrink, widen and tack it all together each that proceed because, really, we’re customarily articulate about disproportion here… Or are we?As shortly as we ask that question, several others fast follow:

  • Is ease so flexible?
  • Is content’s many elementary section a word? Or is it, perhaps, a message?
  • In today’s reader’s market, what of a writers and a designers who make reading possible?
  • And are we building collection that respect their work, too?

These questions didn’t incidentally cocktail into my conduct one day. Nor did a pattern problem get me meditative along these lines. It was while reading — for pleasure — that we beheld something was wrong. After experimenting with a few opposite services that let me save articles to review after in a many some-more reader-friendly format (what I’ve come to call “reading advocacy” tools) it occurred to me that in a routine of extracting ease from a bizarre context and accessing it elsewhere, we competence be losing some information along a way.

I motionless to see for myself by examining several pieces of ease and comparing how they demeanour and duty in a accumulation of incarnations: a printed page, a Web and eReaders. What we found was both enlivening and, for a engineer who loves to review and write, somewhat troubling. I’ll advise we in advance: there are many examples below, nonetheless we cruise they’re all required in sequence to promulgate an accurate pattern of customarily what happens to ease when we start relocating it around. To scrupulously set it up, let’s initial fast demeanour behind in history.

A Very Brief History of Content and Design

Long ago, when we humans initial began essay things down, there wasn’t a transparent disproportion between cinema and words. In a commencement examples of writing, black decorated nameable things — a bird, a mountain, fire, rain. You could mix a few pictograms to promulgate something some-more sophisticated, nonetheless that got writers customarily so far. Some concepts are formidable to report with images alone. The growth of obsolete accounting records, though, offer preoccupied writing.

In sequence to scrupulously request a resources and fame of their kings, Sumerian scribes had to regularly sketch adult to hundreds of animal pictograms onto clay tablets. Cow after cow after cow. Sheep after sheep after sheep. You can suppose how impassioned exercise would epitome a black they used: a easier a character, a faster a etching.

writingexamples
On a left, an instance of logographic writing. On a right, an instance of syllabic writing. (Source: Wikipedia)

Even nonetheless a jump from logographic (i.e. black that paint words) and syllabic (i.e. black that paint sounds) essay to alphabetic systems that estimate what we would commend now was a surpassing one — believe me, we customarily simplified around 2,500 years of a story of essay right there — we still had utterly a proceed to go. After all, a commencement instance of punctuation didn’t come until about 840 BCE, when a conflict victories of a Jordanian ruler named Mesha were forged in mill for posterity.

Distinguishing between tip and lowercase letters didn’t occur until much, many later, and it didn’t unequivocally take off until education stretched greatly — say, after a copy press. Imagine reading anything now though capitalization or punctuation. But you’re not reading this for a story lesson. The story of essay is distant too vast to be told here. And really, we have no business revelation it. Yet skimming a aspect of story reveals a deeper attribute between images and disproportion than we mostly realize.

Sometimes disproportion are enough. Other times, they need accompaniment. Even a arrangement of disproportion can lift meaning. Let’s demeanour during a unsentimental example.

Even Basic Formatting Carries Meaning

recipe

What you’re looking during above is a recipe for cookies. (Very tasty cookies, we competence add.) we comprehend it’s formidable to read, nonetheless a fact that these 3 images are tiny adequate to fit simply on this page actually serves an vicious point.

Look during a picture on a left. Can we make out what kind of information a ease is conveying? It’s not impossible, nonetheless it will take we a bit of time and squinting during a disproportion to figure out what they are about in general. But as we make your proceed to a right, a pursuit gets gradually easier. The disproportion haven’t changed, nonetheless a proceed they are formatted has. Formatting, that is unequivocally customarily a proceed information is orderly and organised on a page, is pattern in a many elementary sense. So, we competence also contend that as a courtesy paid to a pattern of this recipe increases, a some-more immediately tangible a ease becomes — and a some-more useful it becomes to an determined baker.

The elementary doctrine of this recipe is that formatting is some-more than customarily an aesthetic, delegate diagnosis of information. Formatting in and of itself contains information that enables a reader to improved understand a inlet of a ease or, in other words, a kind of summary it contains. In a box of this recipe, a cookies constructed by any of a 3 versions would be equally good, nonetheless a odds that a cookies would be finished during all depends directly on a recipe’s formatting. Most would not fast commend that a chronicle on a left is a recipe during all; you’d roughly commend a one on a right immediately.

Anyone meddlesome in communicating some-more effectively should simulate on a grade to that a format — or miss thereof — of their ease supports or undermines a content’s message.

Fortunately, we’re flattering good during preserving formatting that is vicious to a definition of total content. If we put a best-formatted chronicle of my recipe on a Web, I’d be assured that readers would see it that proceed possibly they printed it out or review it off a screen. The basis of formatting — fonts, line breaks, numbered and bulleted lists, etc. — are simply implemented and transferred, regardless of a context.

But infrequently a pattern of a page carries definition that is roughly visible and that is not so simply recorded since it’s not a matter of elementary formatting. History again provides a useful example.

One More Brief Trip Back in Time

The picture subsequent comes from one of a many apparent bright manuscripts, The Book of Kells, famous for an extravagance in visible fact found in unequivocally few manuscripts like it. Written in Latin, this Gospel book is believed to have been total someday around a year 800 by Celtic monks vital in a Abbey of Kells in Ireland.

bookofkells

What is immediately apparent is that this publishing was not total merely to broadcast a ease contained therein. While a summary of a ease was executive to a lives of a monks — religiously, culturally, even practically — the origination of a publishing was an art that brought life to a book’s deeper meaning and a purpose in a tradition that coalesced around it. In other words, a purpose of pattern and imagery in a bright manuscripts was not one of formatting. It had reduction to do with utility — making reading easier — than with suggestive expression. Its whole purpose would be mislaid if a ease and imagery were separated.

What a commencement writing, my cookie recipe and a bright manuscripts all have to learn us is that design — whether in a many elementary facilities of a line of ease or in a pointed juncture of disproportion and imagery — is constituent to a delivery of definition and can’t be removed from a content.

Content And Design On The Web

So far, this all creates clarity from a viewpoint of pattern philosophy. But how does a attribute between pattern and ease play out in practice? To examine this, I’d like to share several real-world examples of how context affects content — the examples we betrothed during a commencement of this article.

1. Interconnected

mattwebb1

Interconnected is a personal website of Matt Webb, a CEO of Berg, a smashing pattern studio in London. As we can see, Matt has kept his website’s pattern unequivocally minimal. In fact, besides a fact that Matt is a unequivocally engaging chairman and I’ve been cyberstalking him for years, we chose his website as my initial instance precisely since it’s so minimal. But let’s see what this same blog post looks like when we save it to review after in my Readability account.

mattwebb2

As we can see, reading Matt’s blog in Readability, instead of on his website, is not a roughly opposite experience. The colors and typography are different, and Readability includes a possess toolbar on a left; nonetheless really, zero here has altered adequate to change Matt’s message.

Let’s review one some-more tool: Safari’s Reader, that detects articles and enables visitors to review them in an isolated, attention-friendly overlay.

mattwebb3

Again, no vital differences here. Just as with Readability, Safari has altered a colors and typography. But since Matt’s website is so sheer to start with, a knowledge is remarkably fast opposite these opposite contexts.

But what about an essay from a website with a many some-more grown design? How competence my knowledge of a ease change from a bizarre context to Readability and Safari Reader?

2. Smashing Magazine

smashingmagazine1

For my second example, we took a screenshot of an essay we wrote for this website behind in May 2010, “Holistic Web Browsing: Trends of a Future.” As we can see, Smashing Magazine’s pattern is comparatively simple; but, distinct Matt Webb’s design, it includes many some-more images: a distinguished menu during a top, a trademark and, as is common in vast publications, advertisements.

Let’s see how this essay looks in Readability:

smashingmagazine2

What’s immediately apparent is that Readability isolates a ease in a categorical mainstay and, in doing so, strips out customarily about all else: a header, logo, navigation and sidebar content. It also removes a ads that Smashing Magazine runs in a ease mainstay during a tip of articles, nonetheless leaves a “Advertisement” tag.

smashingmagazine3

Safari Reader includes a ad in a ease column. Other than that, a knowledge is unequivocally similar.

Other than a fact that both collection effectively un-brand Smashing Magazine’s content, there’s not a whole lot to protest about here. No essential elements are missing, and since Smashing Magazine’s authors know to keep a images in their articles unequivocally elementary (i.e. picture references only), there’s tiny need to worry about losing those aspects of a summary that seem in picture form.

3. Craig Mod

Craig Mod is another engaging chairman who has been doing a lot of thinking, writing, vocalization and conceptualizing associated to a ease knowledge for some time now. I’ve selected his website partly since an essay of his is applicable to a discussion, nonetheless also since we was extraordinary how his pleasing pattern would appreciate to a apparatus like Readability.

craigmod1

Before we uncover we this sold article, “Books in a Age of a iPad,” in Readability, we wish to fast share a integrate of reasons since Craig’s pattern creates for a good reading experience. First, it has white space. A lot of it. The screenshot above shows customarily a tiny apportionment of a page. Follow a couple above to see for yourself; a essay has a singular mainstay of ease and many high-quality images that Craig has organised to fit seamlessly into both a essay and a website. Nothing feels as if it doesn’t belong.

Secondly, a typography — from a vast illustrated pretension during a tip to a headings and two-column preamble — contributes to a mood of ease nonetheless aspiring thoughtfulness, that we unequivocally conclude as we solemnly make my proceed by Craig’s argument. He uses pattern to beam me during a unequivocally counsel pace.

I could go on and on. Suffice it to contend that Craig knows what he’s doing with his design. And while a website competence seem likewise minimal to Matt Webb’s, a denunciation of pattern is used unequivocally differently here. I’m a fan.

craigmod2

Above is a same essay in Readability. At initial glance, it doesn’t demeanour too bad. As in a other examples, a typography has changed, as have some of a subtleties of Craig’s layout. But afterwards we satisfied something: Readability excludes a entire preamble! Everything from “Print is dying…” to “This is a conversation…” is totally gone. we went behind to a bizarre page and saved it again in Readability customarily to double-check. Same thing. we triple-checked. Same thing. Also, demeanour closely during a final divide in a screenshot above. For some reason, Readability doesn’t like Craig’s em dashes.

OK, I’ll save we a exercise and skip Safari Reader for this example. (It looks unequivocally many like a other dual examples.)

Seeing Craig’s website in Readability was a disappointment. After saying a other examples, we was prepared to remove his pattern sensibilities, nonetheless I wasn’t prepared to remove such a sizeable cube of content. Clearly, a proceed Craig has laid out his page’s template doesn’t taunt with a formula that Readability looks for to brand where a page’s categorical ease starts and ends, and that’s not unequivocally anyone’s fault.

Readability should not — and could not, really — be approaching to adjust to and appreciate each fathomable proceed that a Web page can arrangement content, nor should Craig have expected how Readability works when conceptualizing his website. It’s not about disaster so many as about bargain that communication on a Web is finished in a accumulation of ways.

But Wait! It’s Not Just About Pickiness…

Dwelling on a mostly teenager differences between how these articles seem competence seem overly picky. After all, it’s not like we can’t review them. But even a teenager differences — whether a transformation of typography, a change in tone or an repudiation of imagery — are suggestive to a designers who total a bizarre environments in that these articles exist. In my experience, I’ve famous copiousness of developers who take a infrequent opinion to implementing designs, nonetheless I’ve never met a singular engineer who doesn’t cruise even a smallest fact sacrosanct.

There is also an irony here value noting. Tools like Readability — and I’m focusing on it generally since it does reading advocacy a best — are unequivocally good designed. They pronounce a designer’s denunciation by profitable courtesy to sum that customarily usually those who have worked with typography would consciously recognize. The rest of us customarily see a page and know that it looks beautiful and feels good to read. Designers commend in Readability an appreciation of white space, proportion, typography and other essentials that are typically deliberate luxuries on a Web.

That’s since they are so vehement about it. Nevertheless, superb as it competence be, Readability substitutes a deliberately singular pattern of an essay with a one-size-fits-all boilerplate aesthetic. While I’m assured in a firmness and best intentions of Readability, we also doubt a energetic that it potentially establishes: by adeptly harnessing a charming energy of good design, it attracts a unequivocally people who a functionality eventually undermines.

What to do?

Content And Design In eBooks

Because being means to concentration some-more precisely is a categorical reason to use reading-advocacy tools, it occurred to me that other content — besides articles total for unchanging imitation and Web publications — might benefaction identical problems to this complement we’re building around ease portability. we can cruise of one outrageous difficulty in sold that is experiencing a flourishing heedfulness of a analog-to-digital transition: books.

I chose several books to exam what we did with a Web pages: perspective them initial in their “native” format (as printed volumes) and afterwards 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 a story of a 9-year-old child who embarks on a query to learn some-more about a puzzling pivotal left behind by his father, a plant of a 9/11 attacks. Foer experiments with picture and ease a good understanding in this book, creation for a ideal event to see how a printed page translates to eBook format.

extremelyloudandincrediblyclose1

The indicate above shows a initial dual pages of a section that “appears” to still be in breeze form. we was immediately extraordinary how a eBook would paint a red editorial outlines in a text.

extremelyloudandincrediblyclose2

As we can see, a eBook doesn’t hoop them unequivocally well. There doesn’t seem to be many rhyme or reason to a characters that a eBook inserts to paint a edges of a red circles. Sometimes they’re parentheses, other times uppercase letter. Either way, a ease is flattering formidable to read.

extremelyloudandincrediblyclose3

In box we were thinking, “Hey, that’s not so bad!”, above is a screenshot of a subsequent page in a eBook, where things get extremely worse. Adding in slices of images of a bizarre printed page doesn’t help.

2. The Raw Shark Texts, by Steven Hall

The subsequent instance is The Raw Shark Texts, a bizarre poser novel about memory and existence (among other things) by Steven Hall. The story takes place in a universe many like a own, solely that it is also home to “conceptual creatures” that feed on ideas. As we said, it’s a bizarre book — so bizarre that a ease itself veers off into initial visible oddities, too.

rawsharktexts1

In a indicate of a printed book above, I’ve removed a calligram of a fish finished of ease (which creates sense — sort of — in a story). Let’s see how a eBook handles this.

rawsharktexts2

In some ways, a eBook format handles Hall’s fish images improved than Foer’s editorial markings. In particular, no junk characters are extrinsic in a text. But it’s not a biggest painting of what Hall had in mind. In a printed book, a “fossil fish reconstruction” occupies a whole page, with a outline underneath. In a eBook version, a picture is reduced in distance and put on a same page as ease that refers to an picture not shown, while a “fossil fish reconstruction” footnote is bumped to a subsequent screen.

Obviously, a eBook doesn’t hang with a printed version’s design — nor does it unequivocally try to. This creates for a some-more treacherous reading experience.

3–4. The Stars My Destination, by Alfred Bester, and The Medium Is a Message by Marshall McLuhan and Quentin Fiore

Neither of these books is permitted as an eBook in a Kindle, iBooks, or Google Books marketplaces. An EPUB chronicle of The Stars My Destination is floating around on a Web, nonetheless it is not an certified version, so we don’t pattern that it handles a bizarre pattern with any reverence.

But both of these books offer as good examples of how a summary can count on some-more than customarily normal text.

starsmydestination1

In one of a after chapters of The Stars My Destination (shown above), Bester’s protagonist practice an roughly unusual outing by time and space, that a book captures with an painting of a disproportion that adds a visible covering to a description, identical to concrete poetry.

Something like this could be simply recorded in an eBook by inserting images in a upsurge of text. But a sold disproportion that Bester illustrates would have to be total as some kind of meta information in sequence for a ease to be entirely indexed and searchable.

mediumisthemassage

Finally, what alloy of picture and ease is some-more applicable than The Medium Is a Message, by Marshall McLuhan and Quentin Fiore? You’ve roughly already guessed that a pretension of this essay is an loyalty to this book. The indicate above (no, we didn’t incidentally retreat it — that’s indeed how it is printed) is customarily one instance of how a pages of a book are all singly designed to illustrate McLuhan’s ease in a distinguished visible and typographic style. Fiore, by a way, is a distinguished designer, not a writer, who reached out to McLuhan to combine on a book, privately to try how ease and picture can be total to impact a alertness of a reader.

If you’re looking for one book that in a unequivocally existence emphatically represents a different inlet of ease and pushes a bounds distant over ease alone, this is it.

Am we Just Being Picky Again?

Maybe so. Like a Web pages that we looked during earlier, nothing of these eBooks have been blending feeble adequate from imitation to be impossible to read. After all, Google Books gives we a choice to review both a scanned pages and a “flowing text” version. So, in any of these situations, we do have alternatives. Of course, depending on your screen’s size, a scanned chronicle competence be reduction than optimal — you competence have to corkscrew adult and down so many that you’d be too angry to worry with it.

Not each book will humour a analog-to-digital transition. Only those that subtly interweave ease and picture (and some even that hide illustrations in a ease a normal way) will trip by a cracks of what is, currently, a sincerely elementary system.

But what these eBooks continue to make clear — reinforcing a evidence that emerged from tracing total denunciation from a roots to today’s ungainly technological transition — is that total communication is complex. More formidable than customarily lines of text. Just since an author uses a accumulation of means of communication — including text, images, and images total from text — their book should not be unfit from being finished permitted in digital form, nor be disabled when it is finished available. After all, it’s not a book’s error that a stream proceed to digitization favors works that belong to a firm eminence between ease and image.

Content And Design In The Future

What these reading-advocacy systems need now is design advocacy — an enlargement of a templates and collection that, on a one hand, respect a dictated square and definition of a author’s ease and that, on a other, don’t revoke a reader’s knowledge of ease to one of merely estimate text.

Coincidentally, GOOD Magazine customarily recently issued a challenge to a readers: redesign a news website regulating customarily images — no ease allowed. The repository doesn’t explain where this suspicion came from, nonetheless would it be a widen to suppose that it signifies a dullness with ease and a enterprise to lapse to a roots and try communication with black again? Perhaps. we positively demeanour brazen to saying what GOOD’s readers come adult with.

In a meantime, we all need to give critical suspicion to how pattern and ease interact. we cruise portability is a good idea — see Cameron Koczon’s square on “Orbital Content” for a focused evidence on “content liberation” — but it would be a contrition to slight down a designed ease knowledge to customarily what can be simply translated to third-party reader tools. Imagery, and generally a pointed interplay of imagery and text, merit to remain active tools of digital expression. Our goal, possibly we’re designers or writers, should be to make this happen. Maybe a Readability group is already meditative by these issues and entrance adult with new ways to appreciate content. If so, I’d adore to hear about it.

I’ll acknowledge to not carrying an answer, either. My vigilant here is to extend a doubt to you, in a wish that we can figure it out together.

Related posts