MOBILE WEBSITE TUTORIAL Design a prototype that can be viewed on your iPhone or Android

This mobile tutorial guides you through building a design that can be viewed on your iPhone or Android device. When we're done, you will know how to design and generate an interactive mobile website prototype.

Double-click the "Click to View Larger Map" and select the hyperlink icon to open the link dialog.  Paste the link in the "Link to external url" field and click OK.


Generate the prototype and try it out on

your phone.

Now copy and paste the background and button from the Directions state to the Menu state.


Alternatively, you can repeat the previous two steps for the Menu state.


Tip: The OnClick interactions on the placeholder can also be copied and pasted from the Directions state to the Menu state.

Drag an image widget and label widget over the top button. Double-click the image and import cell.gif from the zip file. In the label, enter the text "Order Now!".


Then, place a hot spot over the entire button.

First, download the and extract the contents into a new folder onto your computer. Then, launch Axure RP and save a new file as MobileWeb.rp using File > Save As.

Before starting let's create guides for the screen size we're designing for. For iPhone and Android browsers, it's typical to use a width of 320. In this sample, we'll also put a guide at a height of 360 for the viewable area on an iPhone when the navigation is visible.


To add the guides, click and drag from the rulers to the design area.

We also want to setup the viewport tag in the prototype so the mobile browser knows how to scale the pages.


Open the Generate HTML dialog, select Mobile/Device and check "Include Viewport Tag". Leave the default values and click generate to see the generated prototype.

Add navigation buttons to wireframe

First, add an image widget, and import logo.png from the images folder of the extracted zip file. Place it at the top of the design area with 10px of space on each side.  Then add 4 button shape widgets, each 300 x 50px.


Delete the text on the top button, and on the next 3 buttons enter the text  Directions, Menu, and Coupons.

Create a dial button with an icon

Add a hyperlink to make the phone dial

Create a dynamic panel which pops up

Next we're going to add a dynamic panel that we'll use to display directions and the menu. Stretch it to cover from the Directions button down, leaving the logo and order now visible.


Name the dynamic panel "PopupStates". Add two more states in addition to State1, for a total of three states. Name the three states Directions, Menu, and None.


We will make a separate Coupons page in a later step.

Set panel hidden and send it to the back

Now we are going to set the panel to hidden by clicking the "Hidden" checkbox in the style tab.


And to make it easier to select the buttons, we can right-click the panel and select [Order > Send to Back].

Create mobile popup dialog

Now we are going to add a background and button to each of the Directions and Menu states that will hide the panel when clicked. Double-click the Directions state to bring it up for editing. Add a rectangle and stretch it to cover the state.


In the top right hand corner, add a placeholder widget and resize it to 30x30px.

Add interaction to hide the popup

Select the placeholder, and add a case to the OnClick event. In the case editor, add the Set Panel State action to set PopupStates to "None" with a slide down animation.  Add a Wait action for 500ms. Finally, use a Hide action and select the PopupStates panel to hide the panel.

Duplicate menu states

Add Google Map screenshot

Open the Directions state and add an image widget over the rectangle. Double-click the image and import map.png from the extracted zip file.


Above the map, add a label widget and type "Pete's Pizza is located at 311 4th Ave,

San Diego, CA"


Beneath the map, add a label and type

"Click to View Larger Map". 

Get the URL from Google Maps

Now we are going to get the link URL from Google Maps that will launch the Google Maps application on the phone.


Go to and search for the address. In the top right, click the link icon and copy the link URL.

Add link to Google Map URL

Create content which is scrollable on your mobile device

Now we're going to add scrolling content to the Menu state.


Open the Menu state and add a Paragraph widget. Copy and paste the entire paragraph into the widget so there are two paragraphs in the widget. Adjust the width to fit the state.


Right-click and convert the text into a dynamic panel by right-clicking and selecting [Convert to Dynamic Panel]. Name the panel "Content".

Convert the content to a dynamic panel and add drag

Resize the dynamic panel from the bottom so it fits inside our rectangle as seen in the screenshot above. 


Select the dynamic panel and in the Properties Pane select Vertical as Needed from the Scrollbars droplist.


Note: In some older mobile browsers this scrolling method will not work, but will in most modern devices.

Add the Coupons page

The Home page was designed to fit on a mobile screen without scrolling. But for the Coupons, we are going to link to a new page that is taller than the screen making it scrollable in the mobile browser.


Rename Page 1 to Coupons. Open the page and add the guides at 320 width and 360 height.


Tip: If we had added global guides (by holding Ctrl or Cmd while dragging the guide from the ruler), the guides would be on every page.


Copy and paste the logo and Order Now button from the Home page.

Add coupon placeholders

Beneath the Order Now button, add several placeholder widgets such that they go well below the 360px guide.


On the Home page, use "Create Link" to link the Coupons button to the Coupons page.


Generate the prototype and try it out. You will be able to scroll up and down the coupons page.

Add an email field

At the bottom of the Home page, add a text field and then a button shape to the right of it. Delete the text on the text field, and add the text "Submit" to the button shape.


Above the text field, add a label widget. Change the text to "Join our mailing list".


In the widget properties pane, name the label widget "EmailPanel" and the text field "EmailField". 


Add interactions to submit button

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

u80_start u80_end u80_line

Select the hot spot and double-click OnClick. Select the Open Link action and then choose "Link to an External Link or File" and enter "tel:555-1212" in the text field.


Generate a prototype and try it out on your phone. Clicking the "Order Now!" button should bring up a dialog to call the phone number we entered.

Show hidden panel OnClick

Now we are going to add OnClick interactions to the Directions and Menu buttons to set our PopupStates panel to the appropriate state.


On the Directions button, add an OnClick interaction that sets the PopupStates panel to the Directions state with an animation to slide up on animate in. Select the checkbox for "Show panel if hidden."


Repeat this step for the Menu button and the Menu state.

Next, select the Submit button and add a case to OnClick. In the Case Editor, select "Set Text", choose the EmailField widget.


First we'll clear the text in the text field. To do this, we'll leave the value field blank.


Add a second "Set Text" action and select the widget EmailPanel. Select the Edit Text button.  Highlight the current text, and replace it with "Thank you for signing up".


Give it a try. It should all work right in the browser on your phone.

Setting guides for mobile prototyping

Adding a viewport tag to your wireframe

Email yourself the link to the generated prototype without the sitemap.


Open up the link from your email on your phone. No player or app is required on the phone other than the browser. 


At this point your prototype will be empty. You can upload your RP file to the same link as you build the prototype, and refresh the browser to see the changes.

To view the prototype on your iPhone or Android phone, the prototype files need to be published to a web server. An easy way to publish the prototype is to upload the rp file to AxShare at


When viewing on the phone, we don't want the sitemap to be visible or else the zoom set in the viewport tag will not take effect. Open the prototype and click Show Links to get the URL for the prototype without a sitemap.

Removing sitemap from generated prototype

View of finished mobile prototype on your iPhone


Let's Begin


Step 1: Create guides

Step 2: Add viewport tag

Step 3: View prototype without the Sitemap

Step 4: View the prototype on a phone


Step 1: Add logo and navigation buttons

Step 2: Create

button with icon

Step 3: Add

link to dial phone

Step 4: Add dynamic panel for popup

Step 5: Set panel hidden and send to back

Step 6: Add OnClick

case to show panel


Step 1: Create popup window & close button

Step 2: Add interaction

to hide popup

Step 3: Copy/paste dialog

widgets to Menu state


Step 1: Create Directions

state w/ map & text

Step 2: Get link URL

from Google Maps

Step 3: Add link

to Google Maps link


Step 1: Add filler text,

convert to Dynamic Panel

Step 2: Resize and

add vertical scrollbars

Step 3: Set up

Coupons page

Step 4: Add coupons


Step 1: Add email field and Submit button

Step 2: Add interactions to Submit button

Very good! Now create your own mobile website design and the world is your oyster!


Still need help? Check out the forum or drop us a line at


u180_start u180_end u180_line
u182_start u182_end u182_line
u184_start u184_end u184_line
u186_start u186_end u186_line
u188_start u188_end u188_line
u190_start u190_end u190_line
u192_start u192_end u192_line
u194_start u194_end u194_line
u196_start u196_end u196_line
u198_start u198_end u198_line
u200_start u200_end u200_line
u202_start u202_end u202_line
u204_start u204_end u204_line
u206_start u206_end u206_line
u208_start u208_end u208_line
u210_start u210_end u210_line
u222_start u222_end u222_line


u228_start u228_end u228_line
u229_start u229_end u229_line

u261_start u261_end u261_line

This is an archived Axure 7 training resource. You can update to Axure 8 for free at