Create one prototype with mobile resolution and duplicate & repositions screens onto phone background for desktop simulation

Leigh Arredondo shared this question 6 years ago
Answered

Mobile app prototype: I've set up my prototype as just a screen, without the image of the phone, so we can test it on a phone. Now we need to also present it within the context of the phone image on a desktop browser. Is there a way to *quickly* make a copy of a finished prototype reposition every screen and component once, without having to manually reposition every component and screen one-by-one? The JIM iphone example shows the iphone app both ways, but doesn't explain how to create 1 prototype and then duplicate it with an offset to put on iphone image in background.

Comments (9)

photo
1

Ok, this is what we did for that prototype. We did the same you did, then we selected the option Import -> prototype and then we selected the same .vp. When the conflicts dialog shows up select 'copy' in each of the conflicts. That way you will have a copy of all your pages linked together. That is just to have both versions of the prototype in the same prototype but, of course, you can just copy the .vp file and have two separated prototypes.


Then do this, open the default template for the imported screens. Drag the iphone image background there. Then create two guides in the rulers (click once in the top ruler and once in the left ruler) and move them so they are aligned with the top left corner of the piece of the image where the content should be. Then, for each screen, open it, select Edit -> select all, then move the elements until they get aligned with the rulers. And that's it.


That said, we plan to add some functionality in Prototyper to handle that automatically so, I'm afraid you'll have to do it this way until we add it.

photo
1

Okay I will try this. Thanks for the help.

photo
1

Hi there


I've been trying Justinmind Prototyper Free, which is quite good. When I created my Prototype, I created an 'iPhone 4 Portrait' prototype, and have been adding screens et al to the prototype.


Now I want to export it to HTML and view it on my phone (which happens to be an Android, but I wanted to use the screen size of the iPhone for initial layout purposes).


So I downloaded the full version to try it for 30 days, and have used the 'Export to HTML', which exports fine, but the exported HTML includes the iPhone template/chrome ie. the actual image of the phone all around my app prototype.


How do I export my prototype as HTML without the template/iPhone image, and with the screen size of 320 x 480?


I just want to copy and paste the whole exported HTML on to my phone, and view it (effectively 'offline') on my phone, but as the final app would look, not as the prototype looks surrounded by the iPhone image.


I've searched and searched but don't seem to be able to find an option. FYI I've got 'comments' unchecked for the export, and have tried both the 'optimised' and non-'optimised' options when I export, but still the iPhone image.


Any help greatly appreciated.


Cheers

Matt


This reply was created from a merged topic originally titled


<a class="notranslate" href="http://www.justinmind.com/community/topic/viewing_the_html_for_a_prototype_without_the_template_phone_chrome_and_offline/changes"; rel="nofollow" target="_blank">Viewing the HTML for a prototype without the template / phone "chrome", and offline</a>.

photo
1

So am I to infer from the fact that my question was "merged" with another question that, in short, there is no easy way to do what I am trying to do? And that I have to create a duplicate prototype with all the "phone chrome" removed, and then reposition the elements on every screen?


That is what I've actually done for the moment - create a new template without the phone image/chrome on it, and apply that to all my screens. But as the person whose question mine has been merged with has said, it thus means I have to manage to separate versions of the same prototype, which is obviously far from ideal.


I thought that maybe by using Usernote that it could be done, but from what I've read in the forums, the 'test' output by Usernote looks virtually the same as the 'Export HTML' output does. Am I correct? I'd rather not put my export in the public domain to find out myself at the moment (via an external service that I don't really have any control over or knowledge of policies, how it works etc.).


Another reason why I asked this question is that I'm amazed that you can't export without the phone chrome. Particularly given that Prototyper doesn't seem to come with a blank canvas option or a 'bare' theme by default? The software seems to encourage (heavily) the use the "phone chrome" templates, yet then you can't test it in a phone as it would actually look when browsing the HTML on a phone? Hard to believe, particularly with all the marketing info about 'view it on your mobile device' on your website. Maybe it is the marketing text that mislead me...?


Thanks for any info.


Cheers


Matt

photo
1

Victor, I don't understand how the method you've described works. Specifically, how can you export 2 different HTML versions of the one mockup from the .vp file that contains the duplicate screens?


Or is it a matter of exporting 1 set of HTML files that contains the screens for both layouts, and then having a start section where you choose which version you view?


Cheers


Matt


PS. I had always thought the "iPhone chrome" was a 'design aid', not a part of the template.

photo
1

You are totally right. In fact we are already in our way to fix it. It wasn't our intention to confuse the users. At first Prototyper was a web application prototyping tool but we have been adding mobile support as well from version to version. Now the two 'paradigms' are colliding in the way you describe. So, we apologize for the inconveniences. But, as I said, we are already working on it.

photo
1

It's a matter of setting a different initial screen when you export.


"PS. I had always thought the "iPhone chrome" was a 'design aid', not a part of the template." --> Yes, you are right, this is something that can happen to many other users. We are in our way to fix it.

photo
1

Great, thanks for the info Victor.

photo
1

I made my design in iphone 6, assuming it'd be responsive to an iphone 5. Is there any quick way to make my design fit the iphone 5 besides creating a new iphone5 project and importing the iphone 6 prototype? Please provide a step by step process. The html code solutions are confusing.