How to create a responsive prototype in Axure [Tutorial]
Today, the Responsive Web Design is, to a large extent, the most used approach to create pages that automatically adapt to different devices. It requires a new way of designing content. This tutorial shows a clever technique to build a responsive prototype with Axure in a quick and effective way.
(Vai alla Versione Italiana)
One of the main tools for representation used by interaction designers is the wireframe: it is used to describe a layout made of content and functions. It is usually drawn on paper with pencils and markers or, in digital form, with dedicated applications: it is the equivalent of a project plan for an architect or engineer, which has to explain the construction workers how a building should be created.
In order to simulate the interaction, it is important to combine the wireframe with an interactive prototype, for presenting key concepts to clients, instructing the development team, running a user test.
The following tutorial explains how to create a responsive prototype in Axure1, a rapid prototyping tool for web design.
Axure does not have a built-in function for the creation of responsive prototypes. This tutorial allows you to get around this limitation by using a combination of techniques.
The goal is to show a different layout on the prototype depending on the size of the screen, exactly as a responsive website would appear.
The first step is to create an intermittent dynamic panel2 which is used as a sentinel to intercept the screen size, detecting the presence or absence of another dynamic panel below its bottom side.
On the page of the prototype, below the sentinel, there are as many panels as many dynamic layouts we want to show. The sentinel activates the panels one by one, as soon as it comes into contact with one of those.
In this way the prototype will always show the correct layout when dragging the edge of the browser window, changing the resolution of the screen, using different devices.
Inspector: Scrollspy technique or Crazy Flicker
It is therefore necessary to create the dynamic panel for the sentinel, called Inspector in our example, and associate the necessary actions to make it intermittent.
The first picture displays the OnShow conditions that allow the panel to cycle between active and not active state.
To make the sentinel intermittent we need to activate it (Show Inspector) on the event OnPageLoad:
In this way we created a panel with an intermittence of 250 ms (to change this parameter we need to adjust the value of Wait action on the OnShow event).
The next step is to place the panel in a fixed position depending on the viewport size of the browser using the Pin to browser function. In this way, by reducing or increasing the viewport size of the browser, the Inspector will always be sticked to the edge of the browser.
In the options window it is possible to choose where the panel should be placed. For the purposes of the tutorial it must be positioned on the top right corner so it can slide along the right edge of the browser window.
Finally, it is necessary to associate the actions which allow the switching between different resolutions on the OnHide event of the Inspector (OnShow is already used for the intermittence) so the Inspector can communicate with the other panels that are activated by different viewports.
The image above shows the actions associated with the OnHide event, used to display a green rectangle that shows on which panel is the Inspector.
Dynamic panels for different resolutions
The technique described above can be used to simulate a layout with a parallax effect or scroll-spy — that shows or hides content when scrolling the page — but in this tutorial we simply used it for the creation of a responsive prototype.
You have to to create as many dynamic panels with different versions of the layout as many devices are intended to load the page.
In our example we created four dynamic panels — each representing a breakpoint of the device screen that will be prototyped — with the following dimensions:
- 320px, vertical smartphone
- 480px, horizontal smartphone
- 768px, vertical tablet
- 1024px, horizontal tablet and desktop
Obviously it is possible to create other breakpoints to simulate different devices, but those are the most used.
The final result is shown in the second demo.
iframe and pages for independent prototypes
The previous technique is effective to create prototypes of key pages in a complex project but is difficult to manage when the prototype is made of many pages and has a lot of content, because it requires that all the pages should be designed differently for each dynamic panel.
The solution is to use some iframe widgets inside the dynamic panels, so the content is independent from the container.
On the first page called Responsive framework (our container) resides all the logic, described above, used to load the content according to the device.
Each dynamic panel contains an iframe that loads the first page of the structure.
The final result is shown in the third demo.
Below you can also download the Axure file with the complete responsive framework ready to be used.
➜ Download Axure Responsive Web Design Prototype [456KB]
Using Axure to build a responsive prototype allows designers to focus on the interaction and avoids wasting time to debug a code that will be hardly re-used by the development team.
The technique described in this tutorial, if on the one hand allows the creation a responsive prototype quickly and without coding a single line of HTML, on the other forces the designer to create multiple versions of content for each device.
The design of the entire site, multiplied by each considered resolution, may compromise the initial goal of quickly creating a responsive prototype.
The suggestion is to carefully evaluate — for each project — what are the key pages that are intended to be prototyped responsively.
(Big thanks to Carlo Cerati, for proofreading.)