Words For Print Vs Words For Web
Since working on a print magazine (PC Gamer) for a couple of weeks last month, I’ve been meaning to write something about the difference between writing for print and writing for the web. It’s a notion that’s been gnawing at me at least since I wrote the book, which I found infuriating because I’d become so familiar – even before I was blogging full time – with the scaffolding possibilities of electronic text.
As I wrote 80,000 words of text, I found myself polishing up my writing to explain precisely what I was talking about, where on the web I would have tied it up with a hyperlink*. Rather than writing for the specific audience I knew was going to sit at the other end of a blog, I was hoping anyone could pick up the book. Which rather seems the wrong way to go about things: surely the website is more democratic? But no, quite the opposite is true of how I’ve ended up using the two media. Writing on my own blog, I don’t give a damn who is reading, and writing on for Rock, Paper, Shotgun I have to assume it’s a certain calibre of gamer to have even found the place. As for a book, well, I wanted my mum to be able to get through that without a decade in online gaming.
But there was a more profound structural difference to the page: I couldn’t add links anywhere. I’ve always hated the distracting fussiness of footnotes, and my editor didn’t much like the either: clean text, and nothing else. So there was no way around having to encapsulate everything in the body text.
Towards the end of this process, having read the manuscript several times through, as well as knowing it via all the little revisions we’d done as the process went on, I began to see where all the imaginary hyperlinks went. I could go back into that document, I knew, and cross reference things with links online: explanatory Wikipedia links, comedy YouTube references, and even direct portals to the games I was talking about. Perhaps, when we finally get the Creative Commons version of the book online (which is actually only some paperwork away, come to think of it), we’ll find a way, and a time, for me to include all those links, and to create a version of the book that fixes and positions itself in the web by reaching out in a thousand directions, with a thousand links.
Anyway, time on the magazine and find myself thinking the same thoughts: the inflexibility of the page! No CTRL-F to find that exact phrase in an instant, no click to punch through the page and into an entirely different magazine/website/game/video that we referenced.
But then there was the other side of the woodspace publishing process: the designers. Working on feature stuff – rather than the static grids of regular content – you suddenly find yourself in the best part of magazine design. Suddenly writing has an element of visual directing to it, creating themes for how to illustrate the stuff that can’t be explained with the screenshot and a splash of concept art: independent gaming, wi-fi, co-op, the future.
I remember wanting to do a series of articles where we attempt to tell a story through entire full-page spread images. I think we did it once with Planetside. First spread was the dropship, second spread was the drop, third spread was sniping at the base from the hill, the fourth spread was inside the base itself. Each page was part of the long zoom, the linear thread was the text, and each boxout a small zoom focus within the larger page: this element of the battlefield, that element of the interface. It ludicrously fine work by the designer, Mark Wynne. And it used the material at hand: an area paper with a fold.
This isn’t all that print does, because it can also juxtapose image and text much more concretely: the art of the captions, the boxout. These can be tricks and jokes in their own right. The latest PC Gamer redesign added in more variable graphics to its original mix: infographics, including web diagrams of the relationships between characters in Starcraft fiction, graphs showing the relative speed of the web now and then. The traditional picture-plus-text, but with more, which is something that magazines like Wired have been doing for a long time.
This month’s Wired UK does it too with an incredible illustrated explanation of the mechanics of the Somali piracy phenomenon. It managed to use the page to create a splendid fresh logic, one that used the page to convey packets of information in a flow-chart whole. Maps, equations, charts. Sure, it’s just a “boxout” sequence that you might be familiar with from any magazine over the years, but the delivery was an exquisite flow of discrete meetings of illustration, text, and numerical data.
There’s several pages of that (above), it’s totally awesome.
This can be done on the web, but it’s harder, and it can be expensive. Obviously what’s best about the web from the point of view publishers is that it’s super-cheap. You create a grid and drop images and words in, day after day, just as you do in the standing copy areas of the magazines. But there’s no paper.
It seems that even the publishers that did try to bridge that gap and try and designed magazine format on the web – I’m thinking early jpeg’d online mags or the first year or so of The Escapist – ended up binning the idea and heading back to the bloggy format columns of text, presumably for the sake of money, but perhaps also because the web browser demanded it.
It’s interesting to hear the different sides of the argument chime in on this: lots of magazine folks argue up the material nature of their product, the things you can do with a page, the tactile response of paper. Meanwhile a number of professional bloggers I know are veterans of the magazine industry and they see magazines as a dead man walking. It’s inflexible, expensive, and even wasteful, they say. There’s no way it can hope to hold up, and maybe they’re right. But if magazines die then perhaps the art won’t have to: maybe we can find a way for the same kind of melding of wordy editorial and page design to continue.
Could we end up with WYSIWYG editors so flexible and fast that we’ll be able to lay out vertical column magazines in an instant, merging infographics, text and images into the flowing whole that they’re able to become in print magazines? Will we see web designers becoming less technical and more like the page-designing guys that made my Korea feature so beautiful, or Kieron’s Zangband article so digestible? Isn’t the real issue the crudeness of web browsers and the horrible constraints of HTML as it currently exists?
Am I going to be able to print out a future blog of mine via an on-demand newspaper service and distributed it as a beautiful print object at future games conventions? Is this – columns of text, pop-up thumbnails and embedded video – really it for the visual logic of the web?
*The worst thing commercial blogs do is use self-referential links to game names, or subjects, when their tag or whatever does not explain the topic. Instead, take me to the official site, or the Wiki page! Useless basts.
Oh, also, I wrote a rollicking feature on the future of games for next month’s PC Gamer UK with contributions from Charles Stross and Eskil Steenberg. I’ll hype it again soon, but it’s worth picking up.
July 10th, 2009 at 4:17 pm
An additional problem with the kind of freeform webpage layouts you suggest is the inconsistency of readers’ screen resolutions. Even if html broke from its inflexible structures and we were able to lay out magazine format pages with ease, what you see may or may not be what they get.
Print doesn’t have this problem (unless you count the danger some readers might, er, look at a page through one or the other end of a telescope). Everyone comes to the printed page on the same terms, at the resolution of the human eye.
July 10th, 2009 at 4:20 pm
“The worse thing commercial blogs do is use self-referential links to game names, or subjects, when their tag or whatever does not explain the topic.”
AMEN.
July 10th, 2009 at 7:42 pm
HTML/CSS isn’t really the problem anymore. It *is* possible to create WYSIWYG editors for the web. I’m actually sorely tempted to make a “publishing” editor plugin for WordPress, but then I remember that I’d rather be coding games. :)
As Simon says, the uncertainty of the readers screen resolution is an issue. Also that there isn’t really a concept of “pages” on the Internet. More often than not, it’s just a stream of continuous text, which makes it difficult to lay out a page effectively.
But cost and speed are the biggest issues IMO. Not only do you need to hire a designer, but these things take time. On the Internet, everything has to be up NOW! or never. If you report news a day late it’s “old”.
Finally,
> Am I going to be able to print out a future
> blog of mine via an on-demand newspaper
> service and distributed it as a beautiful
> print object at future games conventions?
Yes! Okay, kinda: http://www.lulu.com
July 10th, 2009 at 8:19 pm
I’m thinking actually newspaper though, cheap as hell. The Lulu stuff is actually fairly high quality, and consequently expensive.
> On the Internet, everything has to be up NOW! > or never.
No, just news. Features, reviews, as ever, have time, and take time. And they’re always what needs to be designed. News has always been about filling existing templates for magazines, and the web is no different.
July 11th, 2009 at 6:56 pm
Flash has been a perfectly usable WYSIWYG format for ages, allowing layouts as idiosyncratic as any magazine. Thanks to its abuse in the late 90s, it has a reputation for being used in excessive (often garishly animated) ways, but there’s no reason it can’t be used to lay out plain text and images. And actionscript would allow you to publish the text to RSS feeds and do all the other web 2.0 jiggerypokery that is now expected. Restraint is obviously key, but otherwise I have no idea why it hasn’t been adopted for laying out a (non-news) digi-mag. Screen resolution is an issue, but as long as you are supporting 1024×768 and below then you are reasonably safe.
Also, re: The Escapist – the fundamental problem with that is that the design was just really poor, not that it had an unconventional webspace layout.
July 12th, 2009 at 2:21 am
re: Oh, also …
Oh wow. both Stross, who writes the most interesting sc-ifi i’ve read in ages, and Steenberg, who google tells me is the man behind Love.
July 12th, 2009 at 1:30 pm
I was just thinking of looking into designing a website as if it was a magazine, with a series of jpegs hyperlinked up but resolution was my main worry.
My problem with flash is that a very imageheavy piece with alot of high-quality video built into it would still take the average user too long to load. Although I speak as a not so experienced flash user but I may be wrong.
July 12th, 2009 at 1:47 pm
As an old-school print designer who does the occasional bit of web design, I’m continually amazed at the paucity of halfway decent design tools for the web.
I use InDesign for my print work (after years of Quark XPressing), and it allows me to pretty easily and intuitively lay out some really visually amazing pages, things that would have been impossible or at least wildly impractical even six or seven years ago. I feel like I’m hard-limited in what I can do by my own skill rather than by the available tools.
Unfortunately there’s just nothing comparable for the web. There’s InDesign, but it just has nowhere near the level of power and polish that InDesign has. And unless you’re coding something bog-standard and dull you still end up having to hand-tweak your code, which in turn requires you to understand all of that code.
IMHO It’s that level of geekery that needs to go away. Every print design job at some point becomes PostScript (or PDF, which is a superset of PostScript) in order to be printable, and PostScript is to HTML/CSS what real Latin is ti Pig Latin complexity-wise. But I don’t have to know anything at all about PostScript to design a page that prints perfectly. It’s that abstraction between the visual layout in the editor (InDesign) and the technical code that underpins it all that makes it work for me.
I believe that even allowing for the dynamic nature of the web (available fonts, screen sizes and resolution, resizing browser windows, etc.) you can use HTML and CSS to closely approximate the print layout experience while still taking advantage of the unique interactivity that the medium offers. But until the tools for implementing them come up to snuff, the web will be designed by the most artistic geeks rather than by the geekiest artists, and it’ll always be easier and cheaper to fall back into the old column of text and occasional hyperlink format.
July 12th, 2009 at 1:49 pm
Grrr. In my previous post I of course meant to say “There’s Dreamweaver” when grousing about weak web design tools.
July 12th, 2009 at 6:39 pm
I’d dearly love to see some real design on the web but as Simon points out, when you design for print you’re design is ‘locked’ and barring any screw ups at the printers will be what the reader sees, but on the web the range of scenarios you have to accomodate makes it nigh on impossible.
As others have pointed out you have the resolution to think about, but its far from that simple, you have all manner of browsers and users custom view settings. For example I run 1920 by 1200 but I generally have Opera fit to half that (so I can fit a BBC article on the full width and the main body of text from RPS at 150% zoom are my yardsticks)
It gets even more problematic if you want to do ‘proper’ accessible design so that for example a blind person’s screenreader can successfully navigate it, then it becomes even more infuriating.
On my degree I would endeavour to design for at least I.E., Firefox and Opera (my browser of choice) and as something of a perfectionist I’d aim for pixel perfect layouts or I would need pixel perfect layout to allow my graphics to correctly align but because the browsers handle certain code slightly differently to one another it becomes impossible and you get bogged down in the technical side rather than the creative side.
Flash is an option to a degree but as Martin says there is such a stigma attached to flash based websites that you’re likely excluding your site from a significant audience and there are still resolution concerns etc.
The only way forward I can see in any meaningful way is if these digital books/newspaper viewers (I forget the proper name) take off in a meaningful way because then if there’s some fairly rigid standards about resolution etc you can hopefully find a middle ground between print design and web design.
July 12th, 2009 at 7:06 pm
Is it really a good idea for the web to attempt to emulate print magazines when it comes to design? I can’t help but feel that this is a mistake, because both print and online publishing are fundamentally different media with varying strengths and problems and consequently, ideas of what actually constitutes “good” design should vary. Just as we would expect different design principles to be employed between books, newspapers, magazines and comics, I think it stands to reason that this should also be true for web publishing. Whereas they no doubt draw ideas and inspiration from each other, good web design will always have a very different set of priorities from good print design; and I don’t think that’s merely a budget limit.
July 12th, 2009 at 7:43 pm
Nathan, for my money I agree with you: it’s not so much a matter of one imitating the other, it’s each borrowing the best bits from the other.
Web design probably has more chance to benefit from this than print, by borrowing elements of the structured presentation and design language of good print design. It’s harder to see how print can mimic the rich interconnectivity of data, multimedia approaches, and interactivity of good web design.
Unfortunately the tools available for web design make that a lot harder than it should be to capitalize on these opportunities. I can design a complex, highly-structured and data-dense printed page like the ones Jim references in very little time compared to the investment needed to do something similar on the web (let’s not get into the likelihood that the page would be completely broken on some percentage of viewer’s screens).
Flash does solve some of the problems, but aside from the anti-Flash backlash among some designers, there are other real concerns (how to treat users who do not or cannot run Flash for instance, or accessibility issues).
July 12th, 2009 at 10:31 pm
First thing to remenber with web, is that is a liquid. Press is a solid. Different thing. Stuff like this 3 columns blog design is wrong.
July 12th, 2009 at 10:57 pm
Woah, wrong!? In what way can a three column layout be intristically wrong?
July 13th, 2009 at 4:43 pm
In the way of the young and naïve. Which I think should be obvious. :)
To me, I think there are more to be learnt from print than has been so far, but is obviously important to remember that the web is a new medium. We don’t make movies by filming theatre shows anymore.
July 13th, 2009 at 5:01 pm
It’s not particularly well written and I’m not a massive fan of the design but do you mean something like this?
http://www.thirteen1.com/Issues/1313709/mag.php
Although this is really just an imitation. Maybe without the animation and simple page scrolling. Maybe a little interactive contents box that pulls out from the side?
July 13th, 2009 at 10:46 pm
People, Flash is evil. Images are evil. Ok, so maybe evil isn’t the right word – they load slowly.
In a perfect world, HTML wouldn’t be what we used to create webpages – it would be the result. We would use something like InDesign or Dreamweaver to design a webpage on our computer, and it gives us HTML/PHP/CSS/whatever, and we copy and paste that and we have a website that works in all browsers and all computers.
That’s the future, my friends.
July 14th, 2009 at 12:02 am
Jim, may I just say “Amen”, basically just for seeming to agree with me :-)
The level of abstraction you describe is exactly what is needed, but we’re still a long way off from that. HTML and CSS have to be an output in just the same way that PDF/PS are the output from print design tools, and a designer should need to know no more about them than current print designers know about PostScript.
If print designers had to hand-code pages in PostScript, print design would still be painfully simple and hugely time consuming in the way that web design is today. Or we’d fall back to doing mechanical pasteups again.
Interestingly, InDesign CS3/4 does allow you to export HTML and CSS from layouts: it converts all of your paragraph, character and object stylesheets to CSS classes and the like, and converts tables to HTML table code, but unless I’m using it wrong it doesn’t include any of the CSS properties (positioning, etc.) I’d love to see Adobe refine this capability, or overhaul DreamWeaver to make it more robust and user-friendly. They have the potential to really make a huge difference, but they’ve owned Dreamweaver for a while now and haven’t made a lot of headway.
Another interesting in-between tool is the SiteGrinder plugin for Photoshop. The idea is that you’re probably doing site mockups in Photoshop anyway, so by naming your layers and layer comps in specific ways you can output complete, functioning sites without writing any code. Still really far from ready for prime time, but a really nice idea.
July 17th, 2009 at 11:29 pm
Very interesting piece!
Are you familiar with Edward Tufte? He writes about and teaches effective design, often with specific reference to printed word. His most famous book is called The Visual Display of Quantitative Information, but the design principles are equally applicable to the beautiful charts of Somalian piracy.
http://www.edwardtufte.com
July 19th, 2009 at 7:33 pm
Crudeness on the web is a feature, not a bug.
I’m in the middle of this otherwise-excellent historical article on London’s E&C, and I feel like I’m swimming against a strong current: http://thecarandtheelephant.com/ – I can’t put it on my Kindle, I have to constantly scroll up and down to correlate figure to text, it uses that awful modal Javascript gallery feature for larger versions of images, and for some reason it’s got page breaks. Frustrating!
The best web designers I know get their hands deep and dirty with their markup to ensure the smooth transition of their work from one kind of screen to another. The range of readers you’re dealing with on the web is a lot wider than just a variety of screen sizes, esp. with the recent explosion of web-capable phones and ipods and kindles. Generally speaking, I don’t think that any attitude towards design that views the web as a cruder version of print is going to fly, so I’m not holding out much hope for a hypothetical software product that makes HTML+CSS as invisible as Postscript. Remember that PS was developed specifically as a printer language derived from the existing practices of visual designers, while HTML was intended as a document language derived from the practices of scientific publishers. The former is presentational, the latter semantic and content focused.
Anyway, I wrote more about this on my own site two weeks ago: http://mike.teczno.com/notes/screen-readers.html
July 22nd, 2009 at 11:06 pm
@Michal Migurski
I actually designed thecarandtheelephant.com and I was interested in your comments. A bit of background – the essay was originally an MA dissertation written by a friend of mine and the site was an attempt to give it a wider airing and to provide a starting point for further responses to the developments at the Elephant and Castle.
I would describe its development as an ‘ongoing struggle’ – essentially trying to reconcile two very different types of document (if a website can really be considered a document). The dissertation necessarily had to conform to academic conventions of footnotes, figures and chapters which don’t translate easily into HTML and I’m still looking for a better compromise that is both aesthetically and functionally pleasing.
The decision to keep the chapter-based structure, though something of an anachronism, I think is justified as it reflects the structure of the argument in the essay (plus it makes it easier to bookmark and reference). In fact, I tend to think such anachronisms are somewhat inevitable when attempting to move content that has been tailor-made for one medium into another.
Anyhow I hope you enjoy the content, the site remains under development, so do check back.
July 25th, 2009 at 9:02 am
I found the commentary of the struggle between hyperlinking on the web and the inability to do so in print to be incredibly spot on. The struggle engaged me particularly because this difficulty tends to be reversed for students – transitioning from having to explain every facet of an idea in language to being able to illustrate it with web resources is something overwhelming at times. Your phrase, “… I began to see where all the imaginary hyperlinks went.” struck a particular chord.
July 29th, 2009 at 9:19 am
This article is spot on, Jim. I’m a digital copywriter and my girlfriend is a magazine editor, so I have a certain amount of familiarity with what you’re talking about. I’ve also written for magazines and various commercial print leaflets etc.
Just wanted to add my two pence to this interesting discussion. Ultimately, print and digital design will never be the same. It is not the paucity of good web design software that’s the difference, nor the inherent geekery of creating stuff for the web, it’s all about the interface.
Remember that good design (and writing) is just about communicating an idea as efficiently and as aesthetically as possible to your audience; ultimately what you’re doing is all about them and the medium they’re using.
People using the web on their computer have a clicky thing, possibly with a scrolly wheel on it, and a keyboard. The screen they’re looking at is static, cannot be turned on its side but has the ability to display moving images and dynamic content.
People who read magazines flick through (basically sideways scroll) large amounts of information and seek out eye-catching headlines, pull-quotes graphics etc.
The two media are vastly, unavoidable different in the way they are digested, and great magazine design and great web design are vastly, unavoidable different because of that.
It’s not the design technology that is the source of their differences, it’s the way the information is consumed.
April 16th, 2010 at 7:49 am
I don’t know if Starcraft2 is ever going to come to stores. If it does happen I know I’m willing to Zerg Rush my way through the ethernetz to get my a cd.