Responsive web design, or developing websites and applications to adapt to various platforms, is becoming standard when building for the web. Why? The mobile web industry is expected to top $15 billion this year (according to Gartner Research) and every mobile platform has different screen resolutions.
Prototype for a Flexible World
The interactive/digital development industry has learned how important it is to wireframe and prototype web applications to not only create the right product but to also create a better experience for users. If you can’t plan for a mobile experience you can’t develop a usable product.
ProtoShare for Mobile Prototypes
To help you develop better user experiences, ProtoShare now gives you the ability to export your website prototypes for mobile viewing (not available with ProtoShare Lite). When following your normal export process in the application, select the option for Mobile Browsing
( 
) and then export to web. Right click on the ‘Browse’ link, and IM or email the link to the mobile phone. Once you’ve accessed the prototype on the phone’s browser, stakeholders and end-user testers can experience links, pop-ups and other mobile app simulations to give you and your team insight to build the final project.
Below is a quick video to demonstrate.
11/11/11 Update:
Per customer request, I am providing you with URLs to my mobile web exports so you can copy and send them to the corresponding mobile devices to see the prototype in action. Please note that the dummy prototype I have created is not for a particular application and is very rough. The app prototype is simply an example to demonstrate the difference between the standard web prototype size and “fit to mobile”.
Any adjustments I made to the prototype for each platform’s aspect ratio were primarily by increasing or decreasing the size of the components and readjusting their positions on the canvas. Due to image constraints, the iPad prototype shown is the only one with additional features to fill up some of the expanded space.
Do you need to create a prototype for each platform you are ultimately designing for? I would say no. Websites should have a PC and a mobile version, but I recommend creating only one mobile version (iPad, iPhone, or Android, etc.) to test sizing, design and placement when prototyping. The only time I would create multiple versions is if, for example, the iPad app will have different functionality from the iPhone app, then prototype both versions. (And this is a great reason to use multiple designs under Parallel Prototyping.)
The reason you are prototyping is to test the interface, uncover questions and ambiguities, and make adjustments to the application or website’s requirements before giving it to the programmers.
Not formatted to fit mobile – 1024 x 600
Nook & Galaxy Tab formatted – 1024 x 600
HTC & Nexus formatted – 800 x 480
iPad formatted – 1024 x 768
iPhone formatted – 960 x 640
Hopefully this gives you a better idea about the Export to Mobile function. Let me know if you experience any problems with the prototypes in the comments below.
Can you post an example we can browse on our mobile devices?
How can we ensure we are building this in the right aspect ratio for devices we’re testing… or does it automatically scale the width to the device?
Thanks for the post!
@Adam, I’ll see if I can post a couple examples for you. Ideally, you do need to create the prototype to the required dimensions of the platform you are specifically designing for, but using this feature does do some resizing automatically to try to fit the device. However, without the proper dimensions, it’s not perfect. Here is an article that lists the aspect ratios of popular mobile devices.
I’ll try to post a couple examples to this blog post this week so that you can test on a couple different devices. Thanks!
Hi Adam,
Just a quick update. I’ve included the links to some various platform prototypes. Hopefully this information helps!
andrea
Helpful Andrea, Thanks, as belated as this is I just needed this tiny chunk of info! 😀