How to run Axure prototypes on iPad or Microsoft Surface

Update 12/7/2012: I realized that GoodReader experience was frustrating both for me and my clients. Therefore, I was looking for alternate ways to demo iPad apps.

Lately, Axure started cloud share at www.share.axure.com to enable easy sharing of prototype with clients. It opened a new way to interact with prototypes. I did some research for iPad browsers that offer hide feature for browser chrome. Fortunately, I found Atomic Web Browser, which offers full screen browsing.

The interaction experience is much better on Atomic Web Browser than GoodReader. The only caveat is the browser control bar, which floats on the screen. The controls are transparent gray - so, they don't bother a lot on white background. However, the controls stand out against black background, as indicated in the attached image.

Remember: Atomic browser requires internet connectivity.

Microsoft Surface users need not to worry about full screen browsers. IE10 is provides full screen view on Windows 8. Mozilla is also developing a full screen browser.
--------------------------------------------------------------



As a User Experience Architect, I create and present Axure prototypes, on a day-to-day basis, for various platforms. Axure generates HTML output which can be rendered with ease on any browser.

These days I am working on a a couple of iPad applications; which requires me to present Axure prototypes on iPad. Safari is an option to run the HTML on iPad but the browser's header and footer make the demo look more for the web than the iPad.

Here is what you can do to get the true iPad app experience. Get rid of the browser. 

How?

Create your prototype without iPad frame. Use canvas size of 1024x768 pixels. (You may have to tweak your canvas a little to fit properly on iPad, as, I believe, Axure doesn't offer pixel perfect rendering.

Next....

Download goodreader from the App Store. It costs only $4.99. Install the app on your iPad.

Once the app is installed - All you have to do is:

• Connect the iPad to your computer that you sync with
• Open up iTunes
• Select the iPad from the devices on the left sidebar
• On the right pane of the screen, click on "apps" and scroll down the page until you see the last section called “File Sharing”
• Click on GoodReader
• Click “Add…”
• Browse to and select your zip file with the demo in it

Once added:

• Launch the GoodReader app on your iPad
• Click on your zip file on the left
• Click on Manage Files on the right
• Click on Unzip

This will create the directory structure for the app.

To launch the demo all you have to do is:

• Launch the GoodReader app on your iPad
• Select the proper directory for the demo
• Click on index.html (and then you are in). Or, to get rid of Axure frame, click on home.html or whatever your first Axure page is.

Voila, you just created a true Axure prototype for iPad.


Note: To avoid GoodReader toolbar to appear while demo-ing, try pressing and holding the buttons/links in the prototype instead of tapping it. It works for me.