VIEWING PROJECTS ON MOBILE DEVICES

OVERVIEW

Get a realistic app experience by viewing your iPhone app design directly on your phone. Before you start, set up a free account on Axure Share (share.axure.com) to host your prototypes (or you can use your own web server). The tutorial below will use Axure Share to host the prototype for viewing on the iPhone browser.

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOBILE SETTINGS

BROWSER SETTINGS

Options for configuring the iPhone browser are in the Mobile/Device section of the "Publish > Generate HTML Files > Mobile/Device" dialog. The settings seen below are the typical settings for viewing an iPhone app on your phone.


The Viewport tag affects the size or scale of the prototype on the device. If your app was designed for the viewport width of your target device, you should not need to edit the default viewport tag settings. "Hide browser nav" removes all navigation and address bar (may vary by device). "Prevent vertical page scrolling" keeps your app design from being pulled from the edges of the screen. Finally, "Hide browser nav" removes the browser buttons when the prototype is launched from the home screen.

CLICK THE CHECKBOXES BELOW TO SEE THE EFFECT ON THE BROWSER

Mobile settings dialog in Axure.
iPhone body containing iPhone App.

HOME SCREEN ICON

Home Screen Icon screenshot.

The home screen icon is a 114px by 114px PNG image that displays on your iPhone home screen just like a real app. The icon image can be added in the Generate > Prototype > Mobile/Device settings. The tutorial below shows how to add the icon to your iPhone's home screen. 


When designing the icon, keep in mind that transparent areas will be given a black background when viewed on the phone.

VIEWING AN APP PROTOTYPE ON YOUR IPHONE

STEP 1: GENERATE TO AXURE SHARE OR WEB SERVER

Publishing to Axure Share to view your iPhone app.

Upload your prototype to Axure Share by clicking the Axure Share button in the toolbar, or Generate > Publish to Axure Share in the main menu (F4). If you don't have an account, create a free one by clicking "Create an account" or browse to share.axure.com. Click "Publish" to upload your file. You can also publish your generated prototype to your own web server.

STEP 2: CLICK "SHOW LINKS & OPTIONS"

Next, open the prototype in your browser and get the URL of the starting page without the sitemap. Click on the "Get Links" icon and navigate to the App Home page, or whichever page contains the start of your app design. Copy the URL from the field labeled "without sitemap".

Removing sitemap from generated prototype for iPhone viewing.

STEP 3: OPEN URL IN YOUR IPHONE BROWSER

Open that URL in your iPhone's browser. Emailing it to yourself is an easy way to get the link to your phone.


You'll be able to interact with your prototype now, but the browser's navigation is still visible.

Removing sitemap from generated prototype

STEP 4: ADD TO HOME SCREEN

Press the Options button located in the center of the bottom navigation and select "Add to Home Screen".


You will be prompted with a preview of the home screen icon and asked to select a name. Click "Add" and now you can launch your app prototype from the home screen which should show the splash screen and launch the browser without the bottom navigation.

Removing sitemap from generated prototype