Building a mobile website or application in Axure, is like building a very small website that is built for the viewing area of 320px x 480px. You set the viewport tag, which tells the mobile browser to zoom-in to fit the size for mobile. Build the mobile site in the top left hand corner of your wireframe, click and drag out from the rulers to set your guides. Now it’s time to get cracking. Add buttons, page links, and dynamic panels for “slide-up” dialogs and for hiding and showing information. Utilize the existing iPhone and Android libraries (seen below) to create realistic looking prototypes and save yourself the work. Use AxShare (share.axure.com) to view the prototype on your phone - but make sure you are viewing it without the sitemap (see below for viewing it without a sitemap).
Setting the Zoom/View (Viewport tag)
When you are generating a prototype to view on a mobile phone, on the Mobile/Device section, click ‘Include Viewport Tag’. This scales down the prototype so it’s viewable on mobile devices.
Click here to see a screenshot of setting the viewport tag in the Generate > Specification dialog.
Libraries
iPhone Library
Android Library
Axure Updates
The latest version of version 6 fixed the drag & drop for mobile devices, so I recommend making sure you update.
Sharing and Testing
I recommend uploading your prototypes onto share.axure.com and testing them out there. You will receive a unique URL which you can access from your phone.
Make sure the URL is of a specific page, or else the viewport settings will not work. Example share.axure.com/GUD342/index.html.
See this thread for more information regarding this.
Mobile Example Download
Axure Mobile Website - Pete’s Pizza
Mobile Tutorial
Learn by Doing: Axure Mobile Website - Pete’s Pizza
Pixels and Grids
Add “guides” by clicking and dragging the rulers out into the wireframe.