Results 1 to 18 of 18

Thread: (Answered) Mobile Prototyping Best Practices and Recommendations

  1. #1
    Axure Support/Admin
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,668
    Thanks
    264
    Thanked 611 Times in 304 Posts


    (Answered) Mobile Prototyping Best Practices and Recommendations

    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.

    Last edited by Paul Axure; 11-01-2011 at 10:21 AM.

  2. #2
    Newbie Level
    Join Date
    Nov 2011
    Location
    United States
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    My Twitter My LinkedIn
    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. #3
    Axure Support/Admin
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,668
    Thanks
    264
    Thanked 611 Times in 304 Posts


    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. The Following User Says Thank You to Paul Axure For This Useful Post:

    RoryBarton (02-17-2015)

  5. #4
    Newbie Level
    Join Date
    Nov 2011
    Location
    United States
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    My Twitter My LinkedIn
    Right on! Sounds great Paul.

  6. #5
    Information Architect
    Join Date
    Sep 2011
    Location
    Cambridge, MA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    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,
    Jim Dalglish
    Senior Information Architect

    OHO Interactive
    1100 MASSACHUSETTS AVE.
    CAMBRIDGE, MA 02138

    DIRECT: 617.499.4994. x 294

    WWW.OHO.COM

  7. #6
    Axure Support/Admin
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,668
    Thanks
    264
    Thanked 611 Times in 304 Posts


    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.


    Last edited by Paul Axure; 12-20-2011 at 04:58 PM.

  8. #7
    Newbie Level
    Join Date
    Apr 2012
    Location
    Hel
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    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?

  9. #8
    Newbie Level
    Join Date
    Jan 2013
    Location
    Melbourne
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Using the iPhone App Template Pages

    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

  10. #9
    Newbie Level
    Join Date
    Jun 2013
    Location
    Emmen
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts


    My Twitter
    Hi Paul, is there a iPad library available?

  11. #10
    Axure Support/Admin
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,668
    Thanks
    264
    Thanked 611 Times in 304 Posts


    @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.
    Last edited by Paul Axure; 06-26-2013 at 11:44 AM.

  12. #11
    Newbie Level
    Join Date
    Aug 2013
    Location
    Europe
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


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

  13. #12
    Newbie Level
    Join Date
    Aug 2013
    Location
    Jamaica Plain, Boston MA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by Paul View Post
    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.


    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

  14. #13
    Newbie Level
    Join Date
    Oct 2013
    Location
    Florida
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by Kevin808 View Post
    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
    I was wondering the same...

  15. #14
    Newbie Level
    Join Date
    Apr 2015
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by Paul View Post
    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.
    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
    Last edited by gn28; 04-19-2015 at 05:27 PM.

  16. #15
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,057
    Thanks
    59
    Thanked 152 Times in 147 Posts


    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

  17. #16
    Newbie Level
    Join Date
    Jul 2016
    Location
    India
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Link for android prototyping library

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

  18. #17
    Axure Support/Admin
    Join Date
    Jul 2014
    Location
    San Diego
    Posts
    1,057
    Thanks
    59
    Thanked 152 Times in 147 Posts


    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!

  19. #18
    Newbie Level
    Join Date
    Nov 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


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


Search Engine Friendly URLs by vBSEO 3.6.0 PL2