Using Adaptive Views inside Axure

axure-adaptive-view

Hi all! I wanted to quickly share this useful tip that I have started to incorporate into my wireframing process which is extremely useful when sharing designs with clients, stakeholders, product owners and the wider team.

When dealing with responsive websites or applications targeted to various devices, its hard to keep track of numerous pages for the same screen. With Axure, a wireframing tool that allows for creating simple mockups or advanced interactive prototypes, you’re able to set up Adaptive View to allow the wireframe designs to “adapt” to different breakpoints but without the fluidity you see with responsive design on websites.

With Axure, you’re able to set up Adaptive View to allow the wireframe designs to “adapt” to different breakpoints

At Bupa, the component library for the UK website supports modules at three different breakpoints; mobile in portrait view (320px), tablet in portrait view (768px) and desktop (1200px). I will demonstrate how to set up in a new Axure project and see how this works:

  1. Open the adaptive dialog by clicking the ‘Mange Adaptive Views’ icon above the 0,0 coordinates or select ‘Project’ > ‘Adaptive Views…’
  2. I prefer working mobile first so I use this as my Base. What this means is that the Base view will be default ‘parent’ view of the project and the child views would inherit from each other as the screen size gets bigger. Since the default Base view is mobile in portrait view (320px), I will need to ‘Add’ the tablet portrait view (768px) by clicking on the plus icon and following the settings:

    ‘Name: Portrait tablet’
    ‘Condition: is greater than or equals’
    ‘Width: 768px’
    ‘Height: *Leave Blank*’
    ‘Inherit from: ‘Base’.

  3. Thats it! What we have done is just defined the breakpoints where the designs switch to a different layout. And so, we do the same again for our desktop view (1200px) by clicking on the plus icon to add a new Adaptive View, and following the settings:

    ‘Name: Desktop’
    ‘Condition: is greater than or equals’
    ‘Width: 1200px’
    ‘Height: *Leave Blank*’
    ‘Inherit from: ‘Portrait Tablet’.

Leave a Reply

Your email address will not be published. Required fields are marked *