Preview

This mobile tutorial guides you through building a wireframe 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.

Mobile Website Tutorial

Learn how to design a mobile website prototype that can be viewed on your iPhone or Android phone.

Add a quick link to the "Click to View Larger Map" text with the URL to the Google Map.

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 text panel over the top button. Double-click the image and import cell.gif from the zip file. In the text panel enter the text "Order Now!".

Then, place an image map region over the entire button.

First, download the AxureMobileWeb.zip 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.

Below is a guide to the Axure RP environment.

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 wireframe pane.

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

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

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

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.

Label the dynamic panel "PopupStates". Add two states in addition to State1. Label the three states Directions, Menu, and None.  We will make a separate Coupons page in a later step.

Now we are going to set the panel to hidden by right-clicking the panel and selecting Edit Dynamic Panel > Set Hidden.

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

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.

Select the placeholder, and add a case to the OnClick event. In the case editor, add 3 actions.

1) Set PopupSates state to None slide down out 500ms

2) Wait 500ms

3) Hide PopupStates

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 text panel and type "Pete's Pizza is located at 311 4th Ave. San Diego, CA"

Beneath the map, add a text panel and type "Click to View Larger Map".  Make the text blue and underlined.

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

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

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

Open the Menu state and add a text panel. Copy and paste 2 paragraphs of filler text and adjust the width to fit the state.

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

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

Right-click the dynamic panel and select Edit Dynamic Panel > Show Vertical Scrollbars as needed.

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

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.

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

On the Home page, add a quick link from the Coupons button to the Coupons page.

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

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.

Abovethe text field, add a text panel. Change the text to "Join our mailing list".

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

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

This zip file contains the images and files needed to complete this tutorial

Image, Button Shape, Image Map Region, Dynamic Panel, Placeholder, Rectangle, Text Field, Text Panel

OnClick

Move Panel(s), Hide Panel(s), Set Panel(s) to State(s), Move Panel(s) to Front, Move Panel(s) to Back, Wait

Select the image map region and click on "Quick Link" in the interactions tab. Select "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.

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. Add a second action to bring the PopupStates to the front.

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 Variables/Widget Values" and open the Set Values Editor.

First we'll clear the text in the text field.  Select "text on widget EmailField equal to value (blank)".

Click the green plus sign to add a new row, and select "text on widget EmailPanel equal to value" and then click 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.

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 share.axure.com.

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.

Apprentice Level

Introduction

Widgets Used

Interactions

Actions

Let's Begin

Part 1: Setup File for Mobile Browsing

Step 1: Create guides

Step 2: Add viewport tag

Step 3: View prototype without the Sitemap

Step 4: View the prototype on a phone

Part 2: Navigation

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

Part 3: Popup Dialog

Step 1: Create popup window & close button

Step 2: Add interaction to hide popup

Step 3: Copy/paste dialog widgets to Menu state

Part 4: External Link to Google Maps

Step 1: Create Directions state w/ map & text

Step 2: Get link URL from Google Maps

Step 3: Add quick link to Google Maps link

Part 5: Scrollable Content

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

Part 6: "Join Mailing List" Field

Step 1: Add email field and Submit button

Step 2: Add interactions to Submit button

Back to Tutorials

Online Training Home

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