If you like my tutorials, you will love my book . It is chockful of advanced programming techniques and the only comprehensive barcode reference for serious iOS developers.
Our DNA is written in Objective-C

Saturday Morning, Breakfast, Wired eMag

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.


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

%d bloggers like this: