(Answered) Mobile Prototyping Best Practices and Recommendations

mobile-prototyping

#1

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.


#2

Hi Paul, I downloaded Axure yesterday and have been going through the tutorials. (Which are FANTASTIC for learning btw, thanks!) I’m on the MobileWeb tutorial now. And I have a question about best practices…

First of all, on Part 1, there seems to be a step missing between Step 2 & 3. I was lost for about 15 minutes trying to find the “Site Links” link, thinking that it was somewhere in the Axure RP environment. I eventually noticed Step 3 was inside a browser window, so I went “off script” and clicked the “Get a new prototype ID at share.axure.com” on the Generate Prototype > Discuss (beta) tab. Clicking that led me to share.axure.com where I created a new profile, and then manually uploaded the RP file. Then I finally saw the screenshot I was looking for from Step 3. So the lack of documentation for this was confusing.

And that leads me to my real question…now that my prototype is up there and working, is there an automatic way to upload to share.axure.com as I make changes and generate new versions, or do I always have to manually upload the RP file? The former would be much more efficient.

Thx, Patrick


#3

Hi Patrick - Thanks for the feedback. I will revisit that section and see if I can make some changes to make those steps a bit more clear.

To answer your question - Yes, you do have to upload each time you make changes if you want to view the changes on AxShare. Hold tight though because there are some exciting things on the horizon.


#4

Right on! Sounds great Paul. :slight_smile:


#5

This is all great! Thanks!
Just one additional question. I would like to see how a prototype looks on an iPhone4 (640 x 960). Before I set the measure for 320 x 360, will the prototype look okay on 640 x 960 phones?
I’m new to designing for phones, so please forgive my ignorance.
Thanks,


#6

Hi Jim - I think this image will help. The 320 x 480 pixels is the same as 640 x 960 on the iPhone. The iPhone has a higher pixel density but the device width that it reports is 320x480.


#7

I’m trying to view a mobile prototype on Nokia Symbian phone but the mobile browser doesn’t show the interface elements in the way I would like to see them. Are the Axure mobile prototypes actually compatible with other mobile devices than iPhone?


#8

Hi

Is there another version of the ‘Using the iPhone App Template Pages’ for Axure Version 6.0?
I’m unable to upgrade to version 6.5 as the company I work for have not completed the upgrade


#9

Hi Paul, is there a iPad library available?


#10

@MPosthuma Hi, yes, you can download the iPad library from our main widget libraries page.
Download Widget Libraries | Axure

@DCastleman There is not currently a 6.0 iPhone App Template, you won’t find many mobile features in 6.0, so I’d recommend updating. The template is not necessary, only a helpful starting point. If you follow the other steps in the iPhone App tutorials (www.axure.com/learn/iphone-app) you will likely be able to get where you need.

@Jkassi Axure generates html/css/javascript that is viewable on any device that can view the web, not sure about Nokia phones and how they render/display our prototypes.


#11

I am building a mobile website with Axure, this thread was tremendously helpful, should probably be a sticky.


#12

Hi Paul,

Is this essentially the same rule for the iPhone 5 with the the new resolution? I noticed in Axure, the iPhone 5 template screen size is also 1/2’ed @ 320 x 548 (Minus the menu bar @ top)… Does this mean we need to set our Photoshop files document resolution to 326 PPI to get clean 1:1 ratio images in the prototype? or do you have to set them to 72 PPI and deal with unsightly upscaling?

Sorry if this has been covered elsewhere.

Thanks,
Kevin


#13

I was wondering the same…


#14

Hi Paul,

I’m now trying to design my first website. What are the basic views/mobile sizes out there?

e.g.
XS - 480px
S - 768px
M - 960px
L - 1280px
XL - 1680px

I googled for those numbers and now I wonder if I have to set up 5 views for my website with those particular widths.

Thanks in advance for your feedback


#15

Hi Gn28,

Hmm, generally, I’m not sure there’d be a particular subset of viewport sizes that anyone would be able to recommend to you outright.

Choosing the breakpoints for Adaptive Views is mainly dependent on the specific target device(s) you have in mind. So, something I can recommend is to check the viewport sizes of the devices that would be most relevant to you, your users, or your team; and then start your project using those breakpoints.

Here’s a site that I often recommend; just type in a device name in the Filter field, and the resulting device width will show up:

Viewport Sizes

Hope this helps. :]

Alex


#16

The mentioned link to download Android Library is not working, can you please share any working link to download axure android prototyping library.


#17

Hi uxdabhi,

You may need to use the alternate mirror 2 download link. But it looks like that particular Android widget library was created in an older version of Axure RP (5.5), and so it may be helpful to check out current Android libraries on our main site, below:

Download Widget Libraries | Axure

I’ve included some information in your separate thread as well:

How to download Android prototyping Library for Axure7?

HTH!


#18

Great tutorial, I need this in my china web design apps.


closed #19

unlisted #20