Experimental Lex

Playing with words.

Tag Archives: ipad

iPad Screencasting

It’s Friday and we are enjoying a moment of satisfaction after submitting our iPad magazine-like app to the iTunes App Store. Those final days and weeks of editorial fixes and pre-launch anxiety were pretty exhausting! We needed to get the app submission done before the holiday crunch of new apps which can slow down the app approval process. I’m told the delays can get real bad. We’re hoping for the average one-week turnaround.

In a sense, this was our self-publishing moment. And when you self-publish, you are also responsible for self-marketing your work, since you don’t have a publisher sending you champagne and planning your book launch. In the age of digital publishing, you need to help users visualize the digital experience of your content. Screenshots of your app are definitely a must-have for your website or blog and these are easy enough to do. Frequently, you need the ability to show a live or video demo of your app.

Screencast Recording
I was faced with this need today — We needed some video source material to demonstrate the user experience and interaction with the magazine-style content. According to the creative brief, the video shots would be full-screen simulations of the app experience and not an over-the-shoulder recording of a person handling the iPad. (Orchestrating live actors gets complicated and expensive.) The video material will then go to our video production team who will turn it into a sizzle reel.

In order to record live action on an iPad screen, you have to account for a few difficulties.

  1. You need a way to display the iPad app and interact with it
  2. You need video capture software that can record a screencast

iPhone Simulator

The iPad does not have a screen recording feature (yet), and there’s no clear way of connecting your computer to your iPad and capturing video from it. Instead, the one solution you do have is the iPhone Simulator, which is included with the XCode development environment and also with OS X Snow Leopard.

When building an app, you get to run your app in the Simulator, which is often more convenient than deploying it to your iPad/iPhone. The “iPhone Simulator” was originally designed for the iPhone (as its name suggests) and it does a good job of replicating the iPhone look-and-feel. It is also capable of simulating an iPad, but there are a few caveats.

1) For one, the vertical height on most monitors is not large enough to see the entire iPad at full size. By default, it always starts at a 50% zoom level and you need to manually change this setting. At 100% zoom level, the Simulator’s vertical height exceeds the 1050 vertical pixels on my 22-inch Apple Cinema Display. The entire window measures 1225 pixels vertically and if you don’t have that space on your display, it gives you scrollbars which make it hard to interact with the iPad in a natural way.

This issue is manageable if you have a really large monitor, or at least one that rotates. I had planned ahead and borrowed a large flat-panel monitor with a rotating screen, so it can display in portrait mode.

2) The other problem with the iPad Simulator is the fake iPad glass and metal border area that’s supposed to make it look like an iPad. This has been squeezed to consume less vertical and horizontal screen area, which gives it a weird, uncanny look. It’s no good for a professional video reel. So our screencast solution now needs to crop out the fake device border. We’ll let the video editors add a more realistic iPad device border.
Note to Apple: please provide an 80% zoom level in the Simulator. And the option to remove the fake device chrome. While you’re at it, just add a screen recorder for the Simulator.

Screen Recording Software

There are a few Mac apps that do this. I found this list on Squidoo. In the end, I went with ScreenFlow since it met my core requirements:

  • Ability to crop the video to a custom area of the screen
  • Ability to hide the mouse cursor. Essential
  • Export to Quicktime MOV file

After doing a quick test run, I was satisfied that ScreenFlow was the right choice. It is well-designed and easy to use. I was able to quickly run through my demo script and provide perfect-sized MOV files for the video production team.

Baker: Publish HTML5 to iPad

With every passing day, there is more innovation in digital publishing and it is mind-blowing. And increasingly, the innovations are being shared as open source projects. I first read about the Baker EBook Framework from the Mashable story published last week and it was another one of those jaw-dropping moments. I made plans to try it out and report on my findings.

HTML5 Publishing Workflow

Background: I’ve been involved in a proprietary digital publishing project that is using a similar architecture. When we were planning the architecture, we felt sure we were following the right path. The iPad magazine-style apps were either bloated slideshows with clever/weird navigation or they were were full-blown native apps and not really books or magazines. Or they were just EPUB books.

We chose to build a publishing model that resembles the EPUB model in terms of content organization of HTML5-rendered content, but more like magazine-like. Magazines are full-bleed color experiences with rich layouts and images. It is such an obvious model (at first anyway), that I am not so surprised that others are following the same path.

The Baker Framework follows this model. If you can build the page as HTML5 and make it look beautiful in a Webkit browser (Safari/Chrome), you should be able to deploy it with perfect fidelity in an iPad app and other platforms that have a WebKit engine. That includes Android and Adobe AIR apps.

The 5-Minute Test Drive
On the bakerframework.com website, the home page shows you the 3 easy steps to publishing your content in an iPad app. I skipped to step 3, since it seems like the others are not necessary if you already have your HTML content. I should mention that the Baker Framework is an XCode project which means you need a recent generation Mac that can run the iPhone SDK in XCode.

Note: content development is the hard part. Good original content doesn’t just appear. It gets created through much effort and review. Keep that in mind.

Since things have been terribly busy lately, I only had a few minutes to try out Baker. This is partly because of the nonstop activity and innovation in digital publishing. I downloaded the framework, looked at the instructions for about 30 seconds and started to add my own HTML5 files and assets. I clicked on Build and Run in XCode.

OMG. It freaking works. It’s a little strange to see a free, open-source solution that replicates the functionality of our internal and proprietary iPad publishing platform. The page fidelity is … uncanny. And yet…

The Reality of WebView Rendering
The WebView renderer, in generic terms, is the component in iOS or Android that can load html from a file or URL and display it. Web browsers have a built-in delay that users expect when a page is requested. The page-load psychology for web browsers is fairly tolerant of this reality.

However, the iPad/tablet computing generation is pretty used to the idea of immediate gratification. And rendering HTML on a mobile or tablet device does not feel immediate. As you swipe with your fingers to flip between pages, you experience a delay before the page content is displayed. I think it’s about 1.2 seconds even on the iPhone Simulator. I saw similar results for our custom app, but probably faster. Regardless, that’s not good enough for the impatient, attention-deficit world we live in.

Conclusion (for now)
Baker Framework is very cool. Although, it’s still early-stage. It may make it easy for you to get your HTML pages into an iPad app, but that’s not quite enough yet. In an upcoming article, we will discuss the hardcore realities of the HTML5-based content approach for publishing to iPad and similar device/platforms.