VIEWING PROJECTS ON MOBILE DEVICES
Get a realistic app experience by viewing your prototype directly on your mobile device. Before you start, set up a free account on Axure Share to host your prototypes. Alternatively, you can use your own web server to host your prototypes with their locally generated HTML files. The tutorial below will use Axure Share to host a prototype for viewing in a mobile browser.
© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
The Viewport tag affects the size or scale of the prototype on the device. Include the viewport tag if your prototype will be viewed on a mobile device. If your prototype was designed for the viewport width of your target device, you should not need to edit the default viewport tag settings (width, height, etc.).
"Prevent vertical page scrolling" prevents your prototype from being scrolled vertically by the user. This setting is helpful when your prototype is designed for the exact height of the target device and you don't want the user to be able to scroll past the design's boundaries, typical of mobile apps.
The home screen icon is a 114px by 114px PNG image that displays on your device's home screen just like a real app. The tutorial below shows how to add the icon to your device's home screen.
VIEWING A PROTOTYPE ON YOUR MOBILE DEVICE
STEP 1: PUBLISH TO AXURE SHARE
Open the "Publish to Axure Share" dialog by clicking the "Share" button in the main toolbar or via the "Publish > Publish to Axure Share" menu option.
If you don't yet have an Axure Share account, create one now by clicking "Log In" at the top-left of the dialog and selecting the "Create Account" tab. Alternatively, you can create an account at share.axure.com and then log in to your account on the "Log In" tab.
At the top-right of the "Publish to Axure Share" dialog, click "Edit" to edit the prototype's HTML generator settings. Select the "Mobile/Device" tab and check the box for "Include Viewport Tag".
Click "OK" to close the "Generate HTML" dialog, and click "Publish" to upload your RP file to Axure Share.
STEP 2: GET THE PROTOTYPE'S LANDING PAGE URL WITH NO SIDEBAR
Next, open the prototype in your web browser and get the URL of the landing page without the sidebar.
To do this, navigate to your app's landing page and click the "Get Links" icon in the HTML sidebar. Then, click the radio button labeled "Without Sidebar" and copy the URL from the text field.
STEP 3: OPEN THE URL IN THE MOBILE BROWSER
Open the copied URL in your mobile device's web browser. You're now able to interact with your prototype, but the browser's navigation is still visible.
STEP 4: ADD TO HOME SCREEN
You will be prompted with a preview of the home screen icon and asked to enter a name for the app. Click "Add", and the prototype's icon will be added to your device's home screen. Tapping the icon will launch your prototype in an instance of the web browser without the navigation interface.
In Safari, tap the Options icon in the center of the bottom navigation and select "Add to Home Screen".
In Chrome, tap the menu icon in the right corner of the top navigation and select "Add to Home screen".
Note: At this point, you can open the prototype on your mobile device in the Axure Share mobile app. If you would like to add the prototype to your device's home screen to simulate a native app experience, continue reading.
Options for configuring the prototype's behavior and appearance in the mobile browser are located in the "Mobile/Device" section of the "Publish > Generate HTML Files" dialog. The screenshot below shows the typical settings for viewing a prototype on a mobile device.
Note: When designing the home screen icon, keep in mind that transparent areas will be given a black background when viewed on the device.
"Hide browser nav" removes the web browser's navigation interface when the prototype is launched from the device's home screen.