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.
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.
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.