VIEWING PROJECTS ON MOBILE DEVICES

OVERVIEW

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.

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

MORE RESOURCES

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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOBILE SETTINGS

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. (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.

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.

 

 

iOS

In Safari, tap the Options icon in the center of the bottom navigation and select "Add to Home Screen".

Android

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.