I’ve always loved to read glossy tech magazines. In fact I feared that I would like them too much to be unable to throw them away. When I was young I had an extensive collection of P.M. (a German popular science mag) that came right to fill the hole that selling my Mickey Mouse collection had left. So I wend cold turkey, no subscription only buying on vacations, as to avoid assembling high towering stacks of paper.
With the iPad I fulfilled my first dream of having a PADD like Jean Luc Piccard, so it was no question that I had to purchase the first digital WIRED app/magazine that came out last week. Many people rambled about the price tag, $4, but I think that’s fair, because you get way more value than you would in paper. Let me share my impressions and let’s peek under the hood of the first eMag that deserves to be called that.
Sipping a fresh espresso with a bit of cream, browsing through the Wired eMagazine. Let’s have a look at how it is to read it and look behind the scenes to see what we can learn from it as iPhone/iPad developers. Maybe there’s an eMagazine of our own in our future?
UPDATE: Here’s Adobe’s Promo for the Magazine. Adobe has announced that soon there will be software on Adobe Labs to do do what they did for WIRED for any InDesign publication.
The first hurdle to getting WIRED is obviously having to acquire an iPad, which is still not possible through official channels throughout most of the world. Next comes the $5 price tag, but we have made worse investments than that. Finally you have to wait until the 552.2 MB Behemoth downloads to your hard disk. This uncompresses to 570.5 MB which tells us one thing: most of it is video or PNG files for which zipping does not gain any additional compression.
How does it read?
Once you have it on your iPad the app loads very fast. It shows a mosaic and then you come to the front page. You feel like you’re looking at the “real” paper issue, but only visually. The first button you notice plays a short movie clip from Toy Story 3 in full screen. Then you notice that all the headlines are actually hyperlinks that lead you to the corresponding articles. This solves the problem you might have notices at the newsstand that one headline intrigued you but you would have to go search for it in the magazine because there was no usable index.
Of course WIRED also has an index that pops over the current page so you don’t get disoriented when you call it up.
The meachanics of reading WIRED as quick to get used to. If you tap the page black navigation bars appear at the top and the bottom. The bottom has a scrubber showing previews of the pages as you slide left and right. The top has buttons to return to the cover, a pop-over index, and the overview button. The last one being sort of a panoramic view.
The overview panorama also shows you which pages are longer than one screen.
Interactivity Ideas Inspected
In terms of interactivity I’ve seen the following ideas in play…
Thumbnail/Button plus partial page replacement. Most of the time you would have an article that explains the steps to something, take for example Sex in this issue. The four steps that make up the story are 4 round number buttons. If you push them the text below changes to describe the step.
Audio/Video. Advertisements or articles might have a play button to play related music or video. There are 10 audio files (25.4 MB), 15 video files (144.9 MB),
Swipe to Build. A 3D animation or something that builds up can be controlled frame-by-frame with scrubbing.
Tap to Animate. A tap might also start an animation that’s integrated into the page.
Rotate to Resolve. While most of the articles have identical text in both layouts, some advertisements ask a question and you have to rotate the screen 90 degrees to see the answer.
Links. For the most part you see links leaving the app in advertisements. These lead to a website or to the app store.
Compliments to WIRED! I don’t think the added interactivity distracts from the reading experience, but it adds additional value to the magazine. Judging from the file size I would have imagined that most of that would be videos, but I was wrong. They account for only 30% of the entire bundle. The rest is what you pay for: gorgeous PNG files… pardon, I mean: pages.
One thing that disturbed me a bit was to find a whole page dedicated to the “Application Terms of Use”. And there specifically that WIRED reserves the right to “monitor the activity of the app”. Hm, as long as this does not diminish my reading enjoyment …
Advertisements, lot’s of them
This WIRED issue has 121 pages in total, not counting extra if you can scroll into subsequent pages of an article. 64 of these are really articles you paid for. The other 57 pages are full screen advertisements, 47%.
For the most part you get image ads like you would see in a real magazine. Those are full pages, again always in portrait and landscape. You have to look hard to find any links that lead you to leave the WIRED app, sometimes it would be a button to lead to an iPad app on the app store, sometimes a link to make a booking for something. But you get the feeling that traditional advertisers of WIRED jumped at the chance to be in the electronic version, just so that they can say they where.
I come to this conclusion because contrary to traditional in-app-ads or banners they don’t have the primary aim of getting the user to do something. Still being able to fill up half or your virtual page real estate with ads speaks to the popularity of WIRED. Advertising agencies are artists themselves and they seem happy to have found a canvas to paint on that’s worthy of their creativity.
Sell something? Nah! Be there or be square! Image is everything, at least in this first issue.
Under the Hood
The app itself consists of one view controller, coming from a nib, a couple of PNGs for all the buttons and a big folder called “Issue” which contains the magazine’s contents. This contents folder has a sub-folder per page and one 1.5 MB XML file that contains the entire navigation information about the magazine.
If you wonder how Wired manages to get the layout perfect and the text super-crisp, that’s easy technically. Each page is just a big PNG. In fact not just one, but in several versions. Each page has the following versions: Full-resolution landscape and portrait, preview for index landscape and portrait and thumbnail for the overview also in portrait and landscape. One page equals 6 files.
So you see how much professional work is going into each page, besides of writing the article and doing the page design, they have double the work at their hands because they have to do a landscape and a portrait version of each page. So images let WIRED control every pixel on screen not having to worry about HTML rendering or text flow.
As an engineer I’m also quite impressed by the simple yet effective way they chose to encode the magazines structure into one big XML file. I would have expected HTML or maybe PDF, but having an XML file dictate the hot spots and navigation structure is ingenious.
Wired was probably one of the magazines that had to change their approach to ePublishing on the iPad when Apple announced the ban on compiling apps out of Flash. So it was an interesting hint, or actually misdirection by Chris Anderson, Wire’s editor in chief:
“To deliver this rich reading environment, we’re using new digital publishing technology developed by Adobe. The yearlong effort, spearheaded by WIRED creative director Scott Dadich, will allow us to simultaneously create both the print magazine and the enhanced digital version with the same set of authoring and design tools.”
One might think that this statement hints at some sort of Flash involvement, but doesn’t. Most likely the mysterious “technology developed by Adobe” he refers to is just the regular CS5 tools like Adobe illustrator. Nothing special, everybody can buy that. No Flash or Flash-to-iPad-Compiler anywhere in sight.
In fact, everybody can publish an electronic version of his magazine the same way as WIRED does if he is able to create PNGs of his pages, in all 6 variants per page. Ah and you need an app to understand the XML navigation structure and present the result in a consistent and interactive form. But I suspect the coding for this framework would not be a really large project, possibly about 1 man-month. Most of the work is in the design and filling up on eye candy for the contents.
Conclusion
WIRED has a winner. I can understand the need for about half of the pages being ads. Like all other magazines WIRED has a business to sustain. And thankfully a tad more than half of the pages is real content.
I didn’t read WIRED for quite some time but I get the feeling that it’s aimed at Internet-century geeks with a very short attention span. Most of the articles are started and finished on the same screen, I would have wished for more longer articles that tell a story. Those 4 steps to Sex articles or the 4 step Zombie Survival Workout are cute and geeky, but leave a bit to be desired if you are an avid reader.
But in concluding I judge the first WIRED on iPad to be just as glossy as any paper issue and way more entertaining because of the total lack of bad conscience due to killed trees or compulsive collecting habits. If you love the quirky style of WIRED, get it while it’s fresh.
Categories: Reviews
I would have chosen high quality jpeg files to dramatically reduce the file size. PNGs with photography use a lot of space.
The images naturally also don’t support voice-over which is bad for a magazine with a lot of text. They should implement the UIAccessibility protocol. They could easily add text rect definitions to the xml file, although that would probably mean a lot of additional work.
Otherwise I think it’s a good solution if you want to support both orientations and have custom fonts that are not available on the iPad. Licensing fonts for redistribution is expensive and most font shops won’t even allow it. Also, this approach is a lot faster and easier to handle than PDF rendering.
I still think that Adobe built some special tools in cooperation with Wired. But as you point out, it’s really nothing fancy and every respectable programmer can come up with something similar.
I really have to take issue with some points you have made. I was actually in the process of writing my own blog post about this (after doing extensive bundle-diving this weekend), but I think others (such as yourself) have belabored the main point. However, there are some things that we as developers need to discuss:
When does “download size” start to become a problem?
Somewhat intertwined with this notion is this fundamental question: does the user care what the download size is? From the comments I have seen in my research for my post is that no, the user DOES NOT CARE about download size, as long as the experience meets their expectations.
As developers, we have been trained to do things as efficiently as possible. That always becomes a trade-off between time, cost, and quality. My question to those users that don’t care about download size is, “WHY don’t you care about download size?”
Why do we (game) developers spend so much time on making everything as efficiently as possible when the user doesn’t really care? I think for me, the driving factor is what other developers think of the solutions I have engineered. (I’d love to hear other developer’s opinions on what motivates them.)
What I don’t respect is the solution the Wired developers have implemented. To me, there is something fundamentally wrong with a magazine that is over 500mb. As you have said in your post, all it really is is a stylized image viewer.
Wired is not the only popular app that uses a similar solution: Alice for iPad is an example. No one really noticed because it was a relatively lightweight (when compared to Wired’s certainly) because it only supports portrait, has far fewer pages, etc. However, the implementation is the same: highly stylized pages essentially presented as a slideshow.
The Wired app has been touted as the (possible?) future of magazines, but is it really? As developers, is this what we have worked for? Get the artists to render every single page 6 times and slap them in? In my opinion, this doesn’t push our craft forward. Quite the opposite, in fact.
Do the users care? Mostly not.
Does Apple care? Not in the slightest because the Wired app instantly became the iPad App of the Week.
Do the developers care? Obviously not because they implemented this solution (…and they’re seeing their app become the Top Grossing App).
I would love to hear what other developers have to say.
Thank you for reading,
@Bob_at_BH
People will care about app size, because many of them chose the 16 GB model. With Wired already at 527 MB and The Elements at 1,74 GB (as compressed ipa file) you do the math.
James Briant on Twitter pointed out that text would “look like shit” in jpeg compared to png. I just actually tried that out and saved the cover png as a jpeg file with photoshop:
The original horizontal png file is 1024×768 and 1,3 MB. This file saved as jpeg with quality set to 80 is only 348 kb! You do not really notice a difference when you can’t zoom in on the device anyway. Even with quality set to 100 it’s 664 kb and you can safely zoom in.
And if you really care that much you could do it in two layers: jpegs for photography and png24 with alpha channel for all typography and vector graphics on top of it. Or alternatively use png for text-only pages and jpeg for pages that heavily use pictures.
The Canon ad is 1,7 MB for each orientation! You can bring that down to less than 300 kb by using jpeg.
Very good information. Lucky me I ran across your site by chance (stumbleupon).
I’ve book-marked it for later!