Viewport Magic on Axure 7 Adaptive Prototypes

Like almost everyone else out there, we have been doing a massive amount of work on responsive and adaptive sites lately. We’re also doing this work using Axure. Up until version 7, this meant building out a desktop page, then a tablet page, then a phone page. Cumbersome and hard to test your assumptions about layout changes across devices. Thanks to the latest release of Axure things just got a ton easier.

Axure now lets you build out different views based on breakpoints which means you can build your desktop interface and your page level elements will cascade down to your various mobile interfaces. More on this here:

Once you have your adaptive wireframe working you can preview your work and switch easily between the various break points. That is cool and all but it’s still tricky to get a sense of how your page will work on a real mobile device. On a tablet you need to consider how things will adapt when you rotate your screen. This testing is still kinda hard to do from a desktop browser. Luckily there is a hidden setting deep inside the Axure HTML export configuration screens that adds a little magic.

Under the main menu go PUBLISH > PREVIEW OPTIONS

You’ll see a screen that looks like the one below. Click on “Configure”

Preview Options Dialog Screencap

That’ll bring up a whole bunch of configuration options that will take effect when you preview and/or export to Axshare.

HTML Config Options Dialog

Click on the Mobile/Device menu item. This will give you the option to include a viewport in the exported HTML. What this means is your prototype will now auto detect the difference between a desktop, tablet, and smartphone browser.

You can test your prototype with a tablet or smartphone and instantly see the proper view. What’s more useful is when you test your prototype and rotate your device to force a chance in browser dimension you’ll automatically see the proper version. I find this extremely useful to test the impact of landscape vs portrait on a tablet interface that chances pretty drastically between the 2 sizes.

This was a really useful little trick for us so I hope it helps you too. While you are at it, don’t forget to check out our Bootstrap 3.0 Axure stencil set.

Leave a Reply