Columbia Tribune's web-based iPad app bypasses iTunes store
First FT.com figured it out... then a television site. Now a small city newspaper has eluded the Apple store to create a seamlessly integrated app
Company: Columbia Daily Tribune
Initiative: Browser-based iPad launches on desktop without the Apple store
Key Executives: Andy Waters, General Manager and Chris Gubbels, Web Developer
Challenge: Columbia Daily Tribune general manager Andy Waters knew his newspaper needed a tablet strategy and that tablets could finally "combine the best of what print and the web could do."
He saw print as a natural for migrating to the iPad: It could keep an uncluttered look and easy to read in-column text, and provide an “online package” that people could “finish, instead of "an interminable linking datastream." (Note: The New York Times has alluded to research of their own, though not confirmed, that newspaper-style packaging that give a sense of "everything needed that day" is an important part of rethinking the franchise).
However, developing an app for the iPad involved significant barriers to entry: The cost of native tablet apps runs around $10,000; 30% of paid subscription revenues is scarfed up by the Apple store; and integrating all of the passwords on a variety of devices is difficult, especially when paid subscribers are involved.
Waters' found inspiration in the Financial Times, the first high-profile company to leap frog the Apple store by building its own web-based app. Ft.com's icon apppears with the other app icons on the iPad's home screen, even though the Apple stores does not get a piece of the pie.
"(The Financial Times executives) were frustrated because of the money going to the Apple store." Waters said. The browser-based app created by the Financial Times demonstrated that a technological solution was viable. He decided to task the newspaper company's web developer, Chris Gubbels, to come up with a plan.
Strategy: Gubbels knew roughly how building a browser-based app that could be saved to the iPad's home screen could be done, but "had to teach himself some tricks," starting with learning JQuery. Fortunately, buildng a web-based app requires less skill than buidling a native app. The core skill sets are familiar: HTML5, CSS3 and Jquery, something most web developers know or can teach themselves.
Essentially, the app is built as a web site on a standard web browser, then uses some work-arounds to prompt users to place the icon on the home screen.
The secret to directly place a browser-based app on the home screen without going through The Store is surprisingly simple; it relies on the lesser known native functionality of bookmarketing. Visitors who bookmark a URL see a dropdown menu which already includes an "add to home screen" option. Clicking on this link places the icon of the website bookmarked with the other apps.
To test this standard functionality, just open the browser, select a web site, say, LocalMediaInsider.com, select bookmark, and check "add to home screen." A miniature version of the site appears along with the app. At a meeting of the Missouri Press Association, it took Waters about 30 seconds to add a really ugly LocalMediaInsider's icon (Row 4, Column 2) to his iPad, alongside the Tribune, marked by its iconic "T" (Row 2, columb 5):
To utilize this built in functionality, Gubbels just needed to replace the website's screen capture image with an icon and develop the site to take advantage of iPad's unique functionality. The end result for Columbia Tribune looks like a native app downloaded by the Apple store.
Working on the project part-time - and figuring out all the issues on his own - took Gubbeis about a year. However, the result is surprisingly slick, and makes finding and downloading a native app an "also ran" option.
To create a funnel that walks the reader through the bookmarking porcess, Tribune uses a pop-up window, activated as soon as a user opens the Columbia Tribune on a tablet, via the browser. (To see this technology on a laptop, go to Columbiatribune.com/webapp. The iPad version is a touch-based screen so there are no scroll bars.)
The 
The visitor is then walked through the prompts until the app appears alongside the native apps on the home page of the tablet.
The design of Tribune's new iPad app also takes advantage of the iPad's touch functionality, plus the ability to slide elements sideways, and keep all components on one page. Here are some of the basic functionality created for the tablet:
•Stories slide horizontally, instead of scrolling up and down, and can be "slid" with a touch of the iPad.
• A right hand navigation bar works like a slot machine, allowing users to spin the nav vertically to find more options, such as weather, obits, a clickable calendar and archives.
• There is no top navigation, but vistors can click the “menu” icon in the top right hand corner to recreate it (note: this is from the desktop version and thus has a scroll bar, missing on the iPad. See images to the right):
• Three icons appear at the bottom of the screen of each story, allowing visitors to share, navigate, or comment. The comment icon controls a pop up that appears in the right rail, showing all the comments and a comment form (visitors must be paid subscribers to leave a comment).
A key element of the tablet package is that it is a complete “one days’ news’ like a newspaper. Once the list of stories is finished, the reader is "done."
Advertising sales
Ads on the Columbia Tribunes's iPad platform come in three one-per-page sizes: A “cube” on the index pages, a column in-story and an interstitial full page between stories. To launch the pad, the ads were sold as sponsorships on a four month commitment. The two smaller sizes pop-up to a full page when clicked, and these can slide to another page, run a video, or click to the advertiser's web site. Below is a screen shot of the column:
The full page pop-ups are designed to provide a complete solution, so that visitors do not need to go to the advertisers site. One of the disadvantages of browser based ads - unlike ads on a native app - is that if a visitor clicks off to an advertiser's site, they go out of the app and have to re-launch the app from the home page again. So after clicking an ad leading off-site, a message appears “This link will take you off this site. If you would rather keep reading, stay in the app.
These ads will verticalize automatically if the user turns the iPad 45 degrees. Plans are for the ads to be priced "a little higher as a premium product. It's not like an ad, there is not as much competition and only one ad on every page."
Results and lessons learned
*A big advantage for the Columbia Tribune was the price of development. If you don't count the inhouse programer working part-time, it was free and added inhouse expertise. "Our total investment was just the time spent by our developer. The prices we were being quoted for native apps for tablets was around $10,000," Waters said.
*The biggest advantage over native apps, however, is that visitors need only one password for all devices; allowing seamless integration.
*Apple's 30% cut of paid subscriptions at the app store was eliminated.
*On the downside, cookie-based meters are specific to each device, so theoretically a visitor could look at 10 articles on the desktop, and another 10 on the iPad. "If we forced everyone to register it would track across platforms," Waters said, but so far the preference has been for to allow ten views per device and keep the viewing seamless.
*A native app is still a future possibility, in addtion to the brower-based app. "How many people are searching for the Columbia Tribune in the app store and not finding it? I have no way of knowing," Waters admits.
"One nice things about the apps store is that it has some marketing value and people are used to going there. There might be a way to create a shell app that launched our web site and still do the subscription transaction through the web."
* A web redesign and shift of content management platforms is currently underway, and in part instigated by the new understanding of a multi-device universe. The current platform was created by Ellington, but moving to TownNews will allow responsive design techniques. "The platform will know what device it appears on and will reformat to fit the screen, whether five columns, two columns, or a single column for a mobile phone."
*Web-based apps are not limited to the iPad. Waters saw a $25,000 Twitter-based native sports mobile phone app at a trade show, and decided to build his own inhouse, using web-based technology. Today the app covers the wildly popular Tigers football team via Twitter, by identifying key Twitter sposrts commentators to follow and simply combining them into a feed that displays on a mobile device for fans who "can't get enough."
Many thanks to Andy Waters, GM of the Columbia Daily Tribune for sharing this technology with our members.
The author, Alisa Cromer is publisher of a variety of online media, including LocalMediaInsider and MediaExecsTech, developed while on a fellowship with the Reynolds Journalism Institute and which has evolved into a leading marketing company for media technology start-ups. In 2017 she founded Worldstir.com, an online magazine, to showcases perspectives from around the world on new topic each month, translated from and to the top five languages in the world.
