MOBILE WEBSITE TUTORIAL Design a prototype that can be viewed on your iPhone or Android
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
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 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.
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.
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.
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.
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].
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 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.
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".
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 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".
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.
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 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.
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".
© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure Ⓡ is a registered trademark of Axure Software Solutions Inc.
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.
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.
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 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
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!
MORE STEP BY STEP TUTORIALS ::
This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.