For those of you that use Axure to produce your wireframes, we’ve got some exciting news: It’s now possible to build responsive wireframes. We’ve worked out a way to alter the layout of the wireframe in response to the size of the browser window.

This isn’t functionality that has been purposefully built in to Axure, but thanks to an amazing new widget released with Axure 6.5 it’s possible, with a bit of work, to create multiple variations of a website wireframe that display depending on the size of the browser. Here’s how:

Note: This is best done after you have designed your different layout options. Ensure you have at least a couple of templates ready that you can test, such as a mobile version and a desktop version.

1.    Create a dynamic panel wide enough to fit your widest template layout in and add a state for each layout. For ease of reference, name the states of the panel to represent each of the layout options you have created.

2.    Now pin a 20x20px dynamic panel (for want of a better name, let’s call this the “Responsive Flasher”) to the right hand side of your browser and set it to switch repeatedly between visible and invisible.

a.    To pin the dynamic panel, right click on it, select Edit Dynamic Panel > Pin to Browser. In the popup, tick the ‘pin to browser window’ checkbox, select a right hand side horizontal pin and a top vertical pin.

b. To set a loop of switching between visible and invisible, set the dynamic panel to ‘Hidden’ and give it an OnShow case of Wait 20ms, Hide, Wait 20ms, Show. Now open the Page Interactions (found at the bottom of the Axure window) and create an OnPageLoad case of Show Responsive Flasher.

3.     Depending on how many different layouts you wish to display, create a number of 20px tall rectangular Image Map Regions and place them at the top of the wireframe. They should not overlap, but can be as wide as you like depending on the range of browser sizes you wish each layout to cater for. For example, you may have three different layouts; the first of which will display on browser windows between 800 and 950px in width. We’ll call this Region ‘Wide Trigger’. In the next step we’re going to use Conditional Cases for when the Responsive Flasher is over the top of these Image Map Regions, so have a rough guess at aligning each of them so that the Responsive Flasher will move over the top of them when the browser window is a certain size.

4.   Now we need to build the Responsive Flasher’s conditional cases. What we’re going to do is set the Responsive Flasher to repeatedly check which Image Map Region it is above, and then change the state of the Dynamic Panel mentioned in step one accordingly. This way, as the browser window is resized, the responsive flasher is stuck to the edge of it and moves over the Image Map Regions, thus deciding what layout to display.

a.    Create an OnHide Case for each of the Dynamic Panel states mentioned in step one. Add a condition to each of these cases that reads: If Area of Widget ‘Wide Trigger’ is Over Area of Widget ‘Responsive Flasher’, updating the ‘Wide Trigger’ section to correspond to each Image Map Region used and then set each Case to change the State of the Dynamic Panel mentioned in step one to correspond with the size of the browser.

4.   Hey Presto! You should now be able to watch your website wireframe change shape as you resize the browser.

5.   Finally, there will be some trial and error with the positioning of the Image Map Regions. Publish your prototype and try resizing the browser. Note where the panel state changes and adjust the x axis positioning of each of the Regions.