Preflight

Checking compatibility...

If things look good, press → to move on.

NOW on Tablets

Where we started
Where we went
Where we're going

Conception

iPad launches
NOW wants us on it
Research begins

Options

iBooks / epub
InDesign / Woodwing
Adobe Digital Publishing Suite
Pixelmags / other 3rd party apps

ePub In Detail

Used by devices like Sony's e-reader.
Supported by iBooks and other reader applications across numerous devices.
epub is a barebones format based on html with a few special book-like additions – think table of contents definitions.
Extremely particular about validation. Any little thing can cause the whole experience to come crashing down.

Post-launch it became apparent we needed to continue our efforts to get a NOW experience on the iPad.

required a minimal amount of human labour to publish each week
no weekly/per issue costs
must allow for some degree of interactivity within the content
must be text based so that text could be searched, copy and pasted, etc.
need a format that could be re-used for other device platforms
must provide a way to integrate into either our print or web advertising platforms
should work offline
should look great, allow us to meet our branding needs and perform quickly – must be sexy

What Needed to Be Built

Much of what we do at NOW is DIY, built in-house solutions tailored to our needs. To deliver our content to the iPad we determined we'd need the following:

an iOS app that would act as the delivery platform for the issues/content
a format to publish the issues/content
a back-end system for the iOS app to talk to in order to get new content
additions to our web-cms / epub publishing workflow to publish to this new format

Issue Format

<plist version="1.0">
<dict>
	<key>articles</key>
	<array>
		<dict>
			<key>article</key>
			<string>html/index.html</string>
			<key>author</key>
			<string>Benjamin Boles</string>
			<key>brief</key>
			<string>Unlike the UK and its Mercury Prize, we don't have a network of bookies giving odds on who�ll win this year�s Polaris Music Prize on Monday (September 20)... so not much of a chance that he�ll be picking up his second $20,000 prize after winning previously in 2008 for Andorra.</string>
			<key>image</key>
			<string>images/im1.jpg</string>
			<key>section</key>
			<integer>6</integer>
			<key>title</key>
			<string>Caribou Storms Toronto</string>
		</dict>
	</array>
	<key>sections</key>
	<array>
		<dict>
			<key>colour</key>
			<integer>16148630</integer>
			<key>id</key>
			<integer>0</integer>
			<key>title</key>
			<string>Life&Style</string>
		</dict>
		<dict>
			<key>colour</key>
			<integer>15747111</integer>
			<key>id</key>
			<integer>1</integer>
			<key>title</key>
			<string>Food&Drink</string>
		</dict>
	</array>
</dict>
</plist>

API

<plist version="1.0">
<dict>
	<key>version</key>
	<integer>27</integer>
	<key>issues</key>
	<array>
		<dict>
			<key>date</key>
			<date>2011-06-02T00:01:00Z</date>
			<key>volume</key>
			<integer>30</integer>
			<key>no</key>
			<integer>40</integer>
			<key>title</key>
			<string></string>
			<key>cover</key>
			<string>3242/cover_519.jpg</string>
			<key>url</key>
			<string>2011/3242.zip</string>
			<key>size</key>
			<integer>4384472</integer>
		</dict>

Content

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Now</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="revisit-after" content="7 Days" />
	<meta name="description" content="" />
	<link href="assets/css/reset.css" media="screen" 
		rel="stylesheet" type="text/css" />
	<link href="assets/css/main.css" media="screen" 
		rel="stylesheet" type="text/css" />
	<script type='text/javascript' src='assets/js/jquery-1.4.4.min.js'></script>
</head>
<body id="home">
	<div id="main">
		<img src="assets/images/image1.jpg" class="left" />
		<p>Unlike the UK and its Mercury Prize, we don't have a 
			network of bookies giving odds on who'll win this year's 
			Polaris	Music Prize on Monday (September 20). </p>

Design Gotchas

touch controls for the app called for a tap anywhere in the main window of the story view to expand the menu overlays
problem became apparent when we wanted to add tap actions to images and ads
app now checks what element the user is touching to see if it's suppose to be interactive
for full screen ads our solution was to enforce a universal button to touch for the clickthrough

Android / Playbook?

build app using AIR 3.0
might use Flex mobile framework
will use existing, api, xml, html

Rick Mason

Lead Web Developer - nowtoronto.com
Director of Technology - FITC
Co-manager - FlashinTO

Where to find me:

@egnaro
egnaro.com
gplus.to/egnaro

Preflight

NOW on Tablets

Where we started
Where we went
Where we're going

The App

The Idea

Background

Conception

Options

ePub In Detail

NOW's ePub Edition

The "More Sexy"

NOW on the iPad

The Execution

What Needed to Be Built

The Mechanics

NOW's ePublisher

Issue Format

API

Content

App by Relish Interactive

Design Gotchas

The Results

iTunes Canada Featured App

The Future

Android / Playbook?

Rick Mason

Where to find me:

Preflight

NOW on Tablets

Where we started Where we went Where we're going

The App

The Idea

Background

Conception

Options

ePub In Detail

NOW's ePub Edition

The "More Sexy"

NOW on the iPad

The Execution

What Needed to Be Built

The Mechanics

NOW's ePublisher

Issue Format

API

Content

App by Relish Interactive

Design Gotchas

The Results

iTunes Canada Featured App

The Future

Android / Playbook?

Rick Mason

Where to find me:

Where we started
Where we went
Where we're going