iCatalog.framework brings Digital Catalogs to Life on iPad

Somehow I was restless this night. When I checked my e-mail I see the reason why. My fine tuned app store antenna has been tingling as it usually does before something great happens on the app store.

There was a joyous e-mail by my US partner on the biggest project I had done in my iOS carreer so far:

All four RedCats iCatalog Apps have been approved by Apple and are now live on App Store.
Thanks for all the effort you’ve put, and continue to put, toward making this the best possible product.

The whole thing started when I got contacted on May 30th by Octavio Cifuentes at International Color Services asking for an “App Development Quote Request”. ICS specializes in digital pre-press services for top-brand retailers and cataloguers. They where looking for a contractor to do an app for them. To put it in layman’s terms, ICS is getting PDFs from catalog companies and they make sure that the colors match the clothes that are being sold. So they wanted to have a product to offer to their customers to take this PDF and make it into a digital edition for an extra free.

The Start of a Beautiful Partnership

At that time I was thinking about doing a magazine/catalog framework loosely based on the Wired-App. If you remember I reported on how Wired is saving all pages as PNG files and using an XML file to create the structure for the magazine. They where shooting over the target with that because they used full size PNGs for both orientations making one edition around 500 MB including videos. But the general way of doing it intrigued me.

When I responded to ICS’s request (after having done the usual NDA dance) I gave them three options:

• you can become a software company and hire somebody to work on this (not me)
• or you can outsource it to some eastern Europe or Asian country. But then you’ll need an experienced project manager to keep taps on your cheap labor. (not me)
• or you can partner with me. I retain full ownership of what I create, but you have the exclusive rights to sell apps based on the framework I’ll be creating

At first they where hesitant, but the more they thought about it, the more they realized that only the third option would give them what they wanted. I argued that if you let your partner retain a stake in the project the outcome will be dramatically different than if it’s just a job where you bill your hours. And naturally ICS did not want to turn themselves into a software developer.

I met with ICS’s CEO James Kearns in Milano, Italy, and there we shook hands on the deal. He’s an amazing person to deal with, a gentleman as he is a scholar. What I liked especially was that he offered to pay for my development expenses because I needed something to live off from while developing the framework.

R&D

A lot of experimentation was necessary initially, especially on how to render PDFs. The challenge there was twofold: 1) you could not render the PDFs directly because of the bad drawing performance that the iPad has and 2) because there where thin lines all around those PDFs due to some print-specific features that are being used. These lines are hairlines and disappear in printing, but they show up as 1 pixel lines in the PDFs. So we chose to pre-render the PDFs at a multiple of the resolution which makes the pages super-crisp and the hairlines disappear.

Much work also went into working around performance limitations of the iPad. In my tests the decompressing and drawing of a full screen image would take up to 300 ms which would cause enormous jerkiness. Only 3 frames per second is much less than the ideal 60 frames. I solved this dilemma by moving the page drawing onto a background thread with the help of CATiledLayer. But not without opening a bug report at Apple to complain about the bad image performance. Now scrolling on the iCatalog apps is smooth as button, only if you scroll very quickly you see pages pop up after a brief delay. But this is the best you can get without resorting to OpenGL.

Octavio was my counterpart at ICS and he did all the designing and stuff while I was able to concentrate on the programming of all the features. It’s not immediately obvious at first glance but there is a great deal of small things that we had to polish, polish and polish. I could not have done without a person at the creative helm. I don’t do design. I had some ideas about usability and experience in what would work in an app.  But I don’t like to push pixels around in Photoshop. So OC and me where the perfect team for this task.

Catalog vendors are particular when it comes to so called “Spreads”. If you open the catalog you have two pages next to each other and you might have something that is continued over both pages. So I had to create a way to animated smoothly between the portrait and landscape mode retaining info on which page you where. Say you start in portrait mode and rotate the page you where at was a right page. If you then rotate back you end up on the same page. This is one of the many details that make or break a digital catalog experience. And one kind of thing that you as a developer don’t think about, but need an experienced guy like OC to tell you.

Another thing that I am particularly proud of is the scripting engine that is the heart of all catalogs. Up until the minute that the apps got approved I was worrying a bit that Apple might see this as a rejection reason and I formulated in my head a response. All the interactions in the catalog are written as Objective-C statements that at runtime are converted to NSInvocations with the appropriate parameters filled in. So it’s not a real interpreted language or scripting engine per se, but more like a single statement parser. But it works great. Because of this I’m able to quickly add any new feature. All I need to do is to write the method to execute and then this becomes immediately available for use in all iCatalogs.

It’s only natural that iCatalog also supports video and audio playback but those you best see for yourself in the Jessica London iCatalog app.

Online Integration

All iCatalogs work great if you are not connected to the Internet. There are however two things that you might want to get connected for:

1. Sharing individual products or your entire Wish List on social networks
2. Purchasing

I knew from my experience that Apple would reject all apps that don’t work well if you are in airplane mode. That’s why I took extra care to fail gracefully if the internet connection drops out. Reachability 2.0 to the rescue!

Online Purchase integration is different for each catalog client. For the initial batch we chose to just integrate it with the existing online shopping bag. All your wish list and shopping bag items are kept on your iPad until you tap the checkout button. When you do – and if you have Internet – your choices are transferred to the online site and there you fill in your address and credit card info to complete the purchase. Down the road we want to get a proper XML API to transfer the shopping bag, but for now this method works great.

I saved much time when implementing the social sharing functions by not coding them myself but instead using ShareKit. This enables us to share items through a multitude of social media sites right out of the box. Fortunately the most pressing bugs had been fixed just in time for this release.

Edit This

The interactive areas where the second source of pride. I called them “Hot Zones” and they are basically rectangles you draw on the catalog page with the editor. Then you specify different actions for single tap, double tap or automatic execution on page showing. You can assign an icon, a sound and many other options to fully customize what such a hot zone would do. For example the feature “Swatch Match” is constructed such that you have multiple variants of a catalog page with different colors of a product which you can flip through by tapping the button.

Speaking of the Editor. Initially we considered doing an app to do the editing of catalogs. But since I never did a Mac app before I incorporated all the editing functions into the iCatalog project itself. This way OC can immediately check that what he sees is what he gets when putting together a new catalog. By running the editor version in iPad Simulator he gets the best of both worlds: the look and feel of the catalog on the iPad as well as all the benefits of the desktop like access to the files and multi-core rendering performance.

I might still do an editor down the road if the framework has stayed stable for some time, but until this occurs having an in-app editor is the best solution. This edit mode is easily disabled when building an app for a client by means of making a simple change in the PCH file.

How To Get Your Own iCatalog

I know that some people out there might be tempted to trying to do something similar. Maybe you have been contacted by somebody with a catalog or their agency and asked for a quote. While it has been an extremely rewarding experience for myself I would not recommend for anybody to undertake it unless the company looking for a digital catalog is prepared to pay at least 3 months worth of development for it. Not to speak of the ongoing work that is necessary to polish it and add new features as they become necessary.

The alternative to spending thousands of dollars is to license the iCatalog.framework. As I mentioned previously ICS is my international commercial partner for it. You can contact Octavio Cifuentes to schedule a demo and explore how ICS can help convert your catalogs into a compelling iPad experience. At any case I recomend to you check out any or all of the free iCatalog apps that are already in the store.

Update: Here’s a demonstration of the iCatalog framework and a peak behind the scenes on how such a digital catalog is made.

Categories: Business