Everybody knows that designing for the Web is not like designing for print: The shape is fluid not fixed, the font selection is limited, and there aren’t enough dots-per-inch to do proper typography anyhow; the effect is that you have to give up fine control over layout. Which was true until 2010.
The Transition · It hits me especially hard because I’ve always been interested in typography and design (I didn’t say I was good at it, just interested), and I come out of the publishing-technology business. I remember the sustained howls of anguish from design professionals when the Web came along and everyone wanted to use it and suddenly many of the things they they thought they knew became wrong.
The Web obviously didn’t remove the need for visual excellence; it just made the designer’s life harder by subtracting standard tools. The user could reshape the window or enlarge the type or suddenly be using a computer with a really small or really big screen. The dots-per-inch plunged from 600-and-up to 100-and-down.
In exchange for all that visual polish we gave up, we got a dynamic content-addressable world-wide multimedia-rich hypertext; most people found the trade fair enough.
That Wired App · It’s what shoved me into this epiphany that I suppose everyone else had sometime last year. The app’s 500M+ in size and, everyone says, enthralling. The way it works is explained by Layton Duncan in Bundle Diving in The WIRED iPad app; the page formats are just graphics, with overlays for interaction. They’re designed down to the pixel level; pre-Web page-layout techniques in action.
I’ve seen this movie before; in the early days of the Web, a few transplanted designers threw up their hands in frustration at its impoverished visual vocabulary and did more or less as WIRED has; composed in a page-layout program, exported as a graphic, and pushed that onto the Web. Which was considered evidence that they Just Didn’t Get It.
And at the moment, there are indeed peeved born-and-bred Web designers explaining why WIRED Just Doesn’t Get It: check out Joe Clark’s Smart designer exports dumb pictures of text and Jon Gilkison’s Is This Really The Future of Magazines or Why Didn’t They Just Use HTML 5?
Well, yeah. As Eric Gill wrote, “A letter is a thing, not a picture of a thing.” At some level, what WIRED has given us is a travesty.
Oh, Wait · At another, it’s a rational response to the new environment found on mobile Internet devices. They typically don’t use resizeable windows; you work within the constraints of a specific fixed rectangle. They have densities that are now approaching the 300dpi where print starts; if Wikipedia’s List of displays by pixel density is accurate, the next iPhone will exceed it. I can certainly testify that my Nexus One is the highest-resolution electronic display device I’ve ever owned; it makes conventional monitors (and the 132dpi iPad) look dingy.
Granted, vertical scrolling in the browser style is still common, but on the iPad in particular, a page-flip metaphor has replaced scrolling in many applications. If you abandon scrolling, you immediately open the door to multi-column layouts, which are controversial but, in the right circumstances, highly effective.
What’d you say I’d get? · I am reminded of an acronym that had fallen into disuse: WYSIWYG for What You See Is What You Get. It was the rallying cry of the first electronic-publishing systems, the ones that made Steve and the Woz their first few boatloads of money. It was always a complete lie, because what you could display on a screen was never remotely comparable to the experience of the same layout on real paper with a factor-of-ten-higher pixel density. But it was useful.
In the early days of the Web, some of the authoring software claimed to offer “WYSIWYG Web Publishing” which was an even bigger lie and not even a useful one; still, I remember Adobe getting a standing ovation at the first public demonstration of PageMill in 1994, when they dragged-and-dropped a GIF in the authoring system and then refreshed Netscape and it was just where they’d put it. In that version of that browser on that computer on that day, anyhow.
But, I dunno... the people who pulled that WIRED app together, What They Saw was What We Got. There has to be a better way to achieve the effect. But the fact remains that a lot of what we think we know about Web design is starting to be wrong.
Contributions
· Technology (90 fragments)
· · Mobile (86 more)
· · Publishing (161 more)
· · Web (396 more)
Comment feed for ongoing:
From: Eric Meyer (Jun 03 2010, at 17:10)
Okay, but which parts?
[link]
From: Darren (Jun 03 2010, at 17:58)
Also, it appears that Adobe wrote some software for them that allowed them to export more-or-less directly from InDesign to a working iPad app so as far as a designer is concerned (as well as whoever is paying for the development of the app), that's a very simple and efficient workflow to get the results they desire.
[link]
From: Brent J. Nordquist (Jun 03 2010, at 18:23)
"At some level, what WIRED has given us is a travesty. At another, it’s a rational response to the new environment found on mobile Internet devices. They typically don’t use resizeable windows; you work within the constraints of a specific fixed rectangle."
1. Tilt your device 90 degrees right or left. Turns out the rectangle isn't a fixed size; WxH can have two values.
2. Put your device down and pick up another one. (e.g. drop the Hero and pick up an iPad) Turns out even those two WxH values aren't universal, and I don't want to design for every possible one.
3. What about accessibility (need to increase the font size)? What about i18n and l10n? Now the number of permutations is exploding.
I am not willing to give up the hard-won gains on the "web and print are different media" front without a significant fight.
P.S. Thanks for "ongoing"--always great things to learn and think about.
[link]
From: Tom Passin (Jun 03 2010, at 18:29)
You mean that if the designer sets the font size too small for my eyes, I won't have any recourse any more (yes, I know you can't enlarge on the small fixed screen to the same extent you can on a regular monitor)? You mean I won't be able to copy bits of text any more? Or search the text?
What if I want to pull up a page on a device with different screen dimensions?
This doesn't sound like a good tradeoff to me, much as I love good typesetting and layout. It sounds more like a way to make us passive consumers again.
[link]
From: David Megginson (Jun 03 2010, at 18:44)
Whoever wrote this, could you untie Tim Bray from the chair and give him his blog back?
[link]
From: interactive media (Jun 03 2010, at 19:06)
reminds of the interactive cdroms that pre-dated the explosion of the web. http://video.google.co.uk/videoplay?docid=7190175107515525470#
[link]
From: Janne (Jun 03 2010, at 19:13)
So.. How do they handle copying text, as in when you're a second-language user and need to look up an expression in some other application, or run a paragraph through a translator? How do they handle users that need to enlarge the text or need text-to-speech?
But mostly, I wonder to what degree this idea of fixed, optimal typography is going to survive. To my own surprise, I find magazines a lot less visually satisfying now than I did some years ago. I get annoyed that I can't set a minimum text size, and that I can't choose a different, easier to read typeface. I can't reverse the colors when some cutting-edge design places white text on a dark background.
I've come to expect to be able to influence the visual layout of things I read. When I can't, it feels unsatisfying and a little claustrophobic.
[link]
From: John M. (Jun 03 2010, at 20:13)
"The app’s 500M+ in size and, everyone says, enthralling."
Not everyone says the Wired iPad app is enthralling. Many people do think it's needlessly huge in file size though.
[link]
From: Parveen Kaler (Jun 03 2010, at 21:23)
I think you are reading too much into the situation. It seems more like the Wired iPad App is a minimum viable product.
It's an XML layout engine where each element is an image. I'd imagine they will add text/font elements in the future. Adobe probably just ran out of time.
Actually, I think it's a smart move by Adobe. I bet they are building a generic XML layout engine that will eventually support HTML5, ePub, etc.
It ain't about the XML. It's about the tool that spits out the XML.
[link]
From: kl (Jun 04 2010, at 01:26)
DPI of iPad isn't better than of high-end laptop.
I'm really disappointed with this, because I can see blurry edges of poorly anti-aliased letters (no subpixel AA on iPad either).
[link]
From: Ed Davies (Jun 04 2010, at 02:04)
How many people have Google got working on OCR, then?
[link]
From: SVG advocate. (Jun 04 2010, at 03:22)
SVG amnesia, or what?
[link]
From: Robert Young (Jun 04 2010, at 05:28)
-- It ain't about the XML. It's about the tool that spits out the XML.
But, the zealots have always said that xml is "self-describing". Why, then, all this extra work? Why do we need tools, in the first place? The structure is transparent to all code at all times. There should be no need to for specific code for specific xml; it's all self-described.
[link]
From: Parveen Kaler (Jun 04 2010, at 09:27)
"But, the zealots have always said that xml is "self-describing". Why, then, all this extra work? Why do we need tools, in the first place?"
Because XML is a tool for programmers. It is not a tool for copy-writers, designers, animators, and sound designers.
Imagine an element in the Wired App that has an exploded view of a part where each element can be manipulated, is annotated, and voice over description.
Do you really want to hand write thousands of lines of XML or do you want a tool that helps you build this view.
[link]
From: Bill Seitz (Jun 04 2010, at 09:41)
I don't think web design is wrong, I think these guys are re-creating the same mistakes all over again. Techs/designers doing stupid things because there's always cash in the wishful-thinking-stupid-money budget.
[link]
From: len (Jun 04 2010, at 09:45)
The Card Sharks are Back! Get out of The Way You Holy Scrollers!!
No solution ever dies. It may be forgotten and reinvented. When the environment changes, the smarter animals adapt. So it is with systems and why we analyze constraints instead of using dogma to suppress pragma.
Horses for courses and I don't care. It's just stuff.
The idea which to me is too valuable to be lost is the web is not simply a page turner or presentation engine. It is a means by which we learn and if done properly accelerate our capacity to learn.
This is important because as pointed out years ago we have entered the period in which the complexity of our technology and the processes to maintain it are so great that we see a foreshortening of the numbers of people who can do that. This is a result of several constraints too tedious to describe here but think of the long tail not as a simple curve but a complex surface being squeezed such that the tip is getting ever narrower and more pointed while the brim continues to expand. At some point, the capacity of the overall environment of technology and human handlers bifurcates and pieces fall away. These pieces may have some value, may have none but some will signify catastrophic potentials.
The oil spill disaster in the Gulf is not the first of its kind as Rachel Maddow pointed out. In fact, it happened in 1979 and the same techniques were tried and failed. The 'systems' failed to learn and that is the kind of problems very large hypermedia was to solve except the web, itself an example of technical devolution (go simpler to scale thinking) turned quickly into an ad engine instead of a learnig environment. As we have pushed the scale to include ever smaller boxes, we are losing as you note addressability critical to its function as a mean of sustainable knowledge.
This isn't a clear and present danger and won't be until we tout cellphones as instructional delivery devices. Enter the Apple iPad. Not being conspiratorial. Assessing second and third order effects.
[link]
From: iPadAppDeveloper (Jun 04 2010, at 13:06)
Not long before the iPad shipped (but was rumored), Wired/CondeNast made a big deal about a new approach to publishing magazines using an Adobe Air/Flash app. They assumed that they could publish the app on Apple's App Store via a tool that seemed to make Flash-based apps conform to Apple's rules, but then Apple changed the rules on them and Adobe was screwed.
Wired/CondeNast probably had contract in place that required Adobe to get the app out, so Adobe had to come up with something QUICKLY that didn't suck.
Remember that Adobe tools (in particular, InDesign) are a big part of the picture - Adobe is promising that InDesign users will be able to easily publish to the iPad (and presumably other tablets/devices as well).
The approach Adobe took was to have InDesign output PNG files for all the pages (actually, they did it twice - once in portrait and once in landscape, which contributed to the app's huge size), and then output some XML to overlay and control the interactive bits and overall navigation.
Adobe could have chosen to use PDF instead of PNG, which would have had some advantages, but since the pages were optimized for the platform, some of the advantages of PDF (i.e. smooth scaling of fonts under zoom) weren't of paramount importance. The selection of PNG did cause them to lose the ability to include search and text selection, but they probably didn't have time to implement those features in the time they had to get the app out anyway. AND, pushing out PNGs means they can support just about any platform (high-performance support for PDF is missing from, for example, Android).
So what happened? They shipped an application that is gigantic AND HAS NO ONGOING SUPPORT REQUIREMENTS. There is no subscription model - the app totally stands on its own. The next time an issue comes out, it has no need to share any code with its predecessor. This is good from a support perspective, but users will probably quickly tire of the hassle and cost of the "app per issue" model. This effort is just a placeholder that buys time to come up with a better strategy.
[link]
From: epw (Jun 04 2010, at 14:27)
One WYSIWYG standard that occurs to me, which has many authoring tools and is fairly mature, is PDF.
It's true, PDFs are often created poorly, but I'm not sure that's the fault of the file type itself or the viewers, but rather the content creators.
Maybe the industry should start focusing on PDF authoring tools. They ensure (in theory, at least) that they look the same on all platforms, can be scaled, when encoded correctly contain their raw text in a retrievable form, and by default support pages.
It's true, they're not quite as fluid as HTML. But, as you say, things are changing. Why work on developing a new standard when there's already a working one? I could easily see a new type of mobile-device-friendly web pages or apps which are structured around PDFs instead of painfully inconsistent HTML.
[link]
From: Joe Clark (Jun 05 2010, at 07:18)
Not everything expressed in (X)HTML is “the Web.”
[link]
From: Susan (Jun 07 2010, at 08:54)
As Joe Clark pointed out, pictures of text are not accessible. End of discussion.
[link]
From: Duncan Lock (Jun 23 2010, at 07:00)
For an example of someone who appears to be doing this properly - have a look at the Sports Illustrated segment from the first days keynote from this years Google I/O:
http://www.youtube.com/watch?v=U3j7mM_JBNw
They've done the same thing as Wired, except they're done it all in HTML(5) - it's all text, CSS, webfonts, etc. Looking at the video, it looks pretty good.
Yes, things are changing in web design - they're getting better. With advent of webfonts, pervasive modern browsers, excellent CSS support, etc... you can produce stuff like the SI magazine in extremely high fidelity and still have all the advantages of the open web, and the web development stack. You don't need to resort to a pile of png's - you can now do it _better_ with HTML.
[link]