How to create a responsive prototype in Axure [Tutorial]

Tempo di lettura stimato: 7 - 12 minuti

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.

Axure responsive prototype (tutorial)

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

1. inspector dynamic panel – le condizioni sull'evento OnShow

OnShow conditions

To make the sentinel intermittent we need to activate it (Show Inspector) on the event OnPageLoad:

2. inspector dynamic panel – le condizioni sull'evento OnPageLoad

OnPageLoad conditions

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.

Menu pin to browser

Pin to browser Axure menu

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.

La finestra con le opzioni del menu pin to browser

Pin to browser options

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.

3. inspector dynamic panel – le condizioni sull'evento OnHide

OnHide conditions

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.

To understand deeply the technique of the Inspector you can view3 the first demo of the tutorial.

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.

4. Axure responsive prototype – La figura mostra le condizioni sugli eventi che gestiscono le diverse risoluzioni del layout

The conditions on the events that handle the different resolutions of the layout

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.

5. Axure responsive prototype framework - Il pannello Sitemap

Axure Sitemap panel

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]

Final thoughts

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

Insights

(1) Axure is a rapid prototyping tool for the design of interactive HTML prototypes for web and applications.

(2) Create a Flickering or flashing widget to detect scrolling or browser width (Scrollspy, Crazy Flicker)

(3) For testing the prototype without resizing the browser viewport is possible to use the Responsive Web Design Bookmarklet

Fabio Sirna

È un interaction designer che vive e lavora a Torino. Fotografo, type enthusiast e appassionato di tecnologia. Disegna ancora a matita.

04. febbraio 2013 di Fabio Sirna
Argomento: Strumenti | 5 commenti


Altri articoli

Commenti (5)

  1. Nice tutorial, Fabio! The only challenge I see is making this approach sustainable for larger sites. The more breakpoints there are, the more iterations you’ll have to deal with. Let’s see what Axure v7 has in store for responsive :)

  2. It seems that it doesn’t work without horizontal browser scrolling, though, it’s a nice try, Fabio.
    Agreed with Panayiotis, looking forward to get something native in v.7

  3. Ciao Rey, yes doesn’t work because of the iframe I think, but is a temporary solution :) I hope in v7 too!

  4. Pingback: Prevent Horizontal Scrolling for hidden panels

  5. Pingback: Axure RP 7 and Responsive Prototyping

Lascia un commento

I campi segnati con * sono obbligatori