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".
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
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
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.
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
Very good! Now create your own mobile website design and the world is your oyster!