View Html-wireframes on iPhone (Viewing generated prototype on mobile device)

mobile-prototyping

#1

Hi,

I Started Today creating wireframes with axure, which i Want to Test on my iPhone. But i don’t Know how to put my wireframes on my iPhone. If i copy them by using iTunes there are only pitures on my iPhone.
Can someone please tell me how i can put the html-wireframes on my iPhone to See how it Feels to use my created Site.

I’m looking forward to your answers :slight_smile:

Greets Moritz


#2

Hi Mortiz,

The best way to do this is by uploading your wireframe to AxShare (share.axure.com) and then emailing yourself the URL. You will want to email yourself the home page to view your prototype without the sitemap. Please see this thread if you have any questions about that.


#3

Thanks a lot Paul, all questions answered :slight_smile:


#4

Hi again,

i got another problem concering wireframes on my iphone. when i browse the wireframe on my iphone there is a lot of whitespace around the wireframe itself. so i have to zoom to get the iphone-screen filled. and then i can scroll in all directions, what reduces the usability.

is there a way to configure the size of my wireframe to 480x320px, so there would be no whitespace around the wireframe?

looking forward to your answers :slight_smile:

Greets Moritz


#5

Mortiz - Have you set the viewport tag? It is in the Generate>Prototype dialog under Mobie/Device (click the checkbox).


#6

I have version 5.6, does this function also exists in version 5.6? if i update to 6.0, can i use my wireframe or would i have to create the whole wireframe again?


#7

If you get 6.0 you will be just fine, and will not have to create the whole wireframe again.


#8

Sometimes I prefer to create a pdf, and then open it in iBooks. This will allow you to go full frame, and not have the mobile browser seen. This works a lot better for app prototyping.


#9

How do you generate a clickable PDF using Axure??


#10

You can only generate clickable prototypes in HTML & Javascript to be viewed in a browser.


#11

Hi Paul,

I set the viewport tag, but it didn’t work yet. do i have set something else?

thanks for your answers :slight_smile:


#12

Yes you will want to make sure you are viewing the prototype without a sitemap. Take a look at this thread regarding that.


#13

I have had great success publishing my prototypes directly to my Public Dropbox folder. I have been using Axure for web, iPhone, iPad, and TV interfaces (10 ft UI). Once your prototype is published to your Dropbox public folder, you can get the public URL for the “home.html” file, and send that around to coworkers and stakeholders, and you can even do usability testing on it with services like Usertesting.com.

If you publish for mobile, you can set the viewport zoom meta tag, as well as paste in a meta tag that strips the mobile Safari browser chrome once the page is added to the home screen of device. A nice html5 pseudo-native prototype :slight_smile:


#14

Hi there,

I have been using Axure for a while for wireframing and prototyping desktop websites. I am now trying to prototype for mobile. I have been trying your mobile tutorial (Mobile Tutorial | Axure) - I am using the latest axure version 6.5. The prototype seems to work fine on desktop, but when accessing it on my iphone none of the links work :frowning:
Am i doing something wrong? or is the tutorial not up to date?
thanks guys!


#15

Just to add - i tested the prototype on Android and had the same issue.
I also tried exporting your prototype, and that doesn’t work either. So something is not working when the files are viewed on a mobile browser.


#16

Hi Paul- I can see how to do this- set the viewport tags for mobile devices when generating a prototype but it there a way to carry this through to axure share? Otherwise is there another way of viewing a mobile optomised prototype that I have generated locally on my phone?


#17

I have great success using an app called html runtime: App Store
It’s like a iPhone / iPad wrapper for your prototype.

Just rename your home.html to index.html, zip the generated files and paste them into the app. Now you can launch the prototype via the app from your home screen as if it was a real one.


#18

Hi. I put my prototype files (both a folder of ind files and a zipped file of them all) on Dropbox. When I opened in Dropbox, html files were blank.
Do you know what step I might be missing or could you walk me through your process again step-by-step, please :slight_smile:

Thanks so much,
Edie


#19

More options, such as GoodReader and Sites 2 Go are discussed here:

Best way to get Prototypes on an iPad for Execs


#20

Hi everyone,

Sorry for a little bit of spam… We have currently finished beta version of iOS prototype viewer called ProtoSee. See more info here: http://www.facebook.com/ProtoSee

Before we get the app to AppStore, we would like to collect some feedback, thus we are looking for beta testers.

If you have an iOS device running iOS 5+ and do some (high-fidelity) prototypes, please, consider joining in :wink: Contact me at lojza.filip@gmail.com or via ProtoSee facebook page or here using private messages for further info.