ADAPTIVE VIEWS

OVERVIEW

"Adaptive views" are used when designing for multiple screen sizes. An adaptive view is a version of a page designed for a specific screen size. Changes to a widget or page property can affect one view, several views, or all of a page's views.

SETTING UP ADAPTIVE VIEWS

To create and manage your adaptive views, go to "Project > Adaptive Views". You can also click the "Manage Adaptive Views" icon at the top-left corner of the ruler. You'll only be able to see this button after adaptive views have been enabled for the specific page you're working on (see below to learn how to enable adaptive views).

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Website Hosting Tutorial

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

THE BASE VIEW

The "base view" is the view from which all adaptive views inherit their widgets and properties. When you enable adaptive views, the project will start with just the base view.


In the "Adaptive Views" dialog, click the base view on the left side of the dialog. On the right side of the dialog, you can optionally name the view (e.g. "Desktop", "Mobile 360px") and add the width and height of the view. Or, you could choose a preset name and size from the "Presets" dropdown.

MORE RESOURCES

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

ADDING AND MANAGING VIEWS

Think of your adaptive views as being organized into a "chain of inheritance". You'll typically want each view to be a "child" of the previous one.


For example, working from large to small, you might create the following chain, with each view being the child of the view listed above it:

Desktop (Base): 1200 pixels wide

Portrait tablet: 768 pixels wide and below

Portrait phone: 360 pixels wide and below


Working from small to large—this is sometimes called the "mobile-first" approach—you might use the following structure, with each view being the child of the view listed above it:

Portrait phone (Base): 320 pixels wide

Portrait large phone: 480 pixels wide and above

Portrait tablet: 720 pixels wide and above

Desktop: 1000 pixels wide and above


We recommend using three to four adaptive views, so as to target each of the several most common screen sizes used to view your final application or site.


In some cases you may wish to have two chains of inheritance: one chain for mobile devices with several mobile breakpoints, and a second chain for larger desktop monitor sizes. We recommend against having any more than two views inheriting directly from the base view. You'll lose many of the benefits of working with adaptive views if you don't take advantage of related views inheriting changes from each other.

ENABLING ADAPTIVE VIEWS

Once you've configured your adaptive views, you'll need to turn them on per page. You may have pages in your project like documentation pages, personas, and flow diagrams that do not need adaptive views.


To enable adaptive views on a page, go to the Properties tab of the page Inspector and click the "Enabled" checkbox next to the "Adaptive" line item.

NOTE FOR MOBILE

If you're planning to view your prototype on a mobile device, make sure to include the viewport tag in the mobile generator. Go to "Publish > Generate HTML Files…". Switch to the "Mobile/Device" tab and click the "Include Viewport Tag" checkbox at the top.

EDITING EACH ADAPTIVE VIEW

SWITCHING BETWEEN VIEWS

Every adaptive view—other than the base view—inherits from another adaptive view. As noted above, we recommend making one chain of inheritance, from small to large, with each view inheriting from the next-smaller view; or from large to small, with each view inheriting from the next-larger view.


On a page with adaptive views enabled you will see your views listed in a toolbar just above the canvas's top ruler. The views will be listed in order of inheritance. If you have multiple chains of inheritance (though we usually discourage this, as noted above), you'll see the base view listed multiple times--once before each view that inherits directly from the base view.


Click any item in the adaptive views toolbar to switch to that view on the canvas.

INHERITANCE OF EDITS

The base view is the default view for all adaptive pages. Start by designing your diagrams in the base view. When a widget's location or style will vary in another view, adjust it in that view after first creating it in the base view.


Changes will affect the current view and all views that inherit from that view. So a change in the base view affects the base and all other views. A change in the view at the end of the chain of inheritance affects only that view.


Once a property has been changed in a child view, further changes to that property in the parent view will not be propagated to the child view. So for example if you had a base view and a 320 view, and you changed the size of a widget in the 320 view, changing the size of that widget in the base view would no longer affect the widget's size in the 320 view. Changing another property (e.g. the position) of that widget in the base view would, however, propagate to the 320 view.


You can choose to have changes in a child view ignore the normal chain of inheritance and instead affect all views. To do this, check the checkbox "Affect All Views" in the adaptive views toolbar just above the ruler before making your changes. (And remember to uncheck that same box when you're done making changes to all views!)


The color of the view's name in the adaptive toolbar tells you which views will be affected by edits.


Blue: The current view

Orange: Child views that will inherit changes from the current view

Grey: Views that will not inherit changes from the current view

Green: "Affect All Views" is checked

INHERITANCE OF EDITS EXAMPLES

1. Change the fill color of a button to purple in the parent view. It will be purple in the child view.

2. Make it green in the child view. It will be green in the child view, and still purple in the parent view.

3. Change the fill color of a different button to blue in the child view. Then, change it to red in the parent view. The button in the child view will still be blue.

4. In the child view, check "Affect All Views" in the adaptive views toolbar. Change the fill color of a button to orange in the child view. It will now be orange in the both child and the parent views.

ADAPTIVE AND NONADAPTIVE PROPERTIES AND ATTRIBUTES

Some properties and attributes can vary in each adaptive view, while others will remain consistent across all adaptive views.

 

Adaptive / can vary in each view: Location, size, style, and interaction styles

Not adaptive / changes affect all views: Widget text, interactions, and selected / disabled by default

UNPLACED WIDGETS

"Unplaced" widgets are widgets that appear on the page but are not in the current view. There are a few ways a widget can become unplaced.


When you add a widget in a view, it is added to all of the other views. In the child views, it will be in the same location as in the current view. In the parent views, it will be marked as "unplaced", you won't see it anywhere on the canvas in those views, but it will still appear in the Outline pane (depending on your filter settings). In other words, it is impossible to have a widget that only exists in some views and not in others—instead, a widget can be placed in some views and unplaced in others.

 

When you have adaptive views enabled on your page and you delete a widget using the [DELETE] or [BACKSPACE] keys, it won't be truly deleted—instead it will become unplaced from the current view and from any child views. It will not be removed from any parent views. (If you delete a widget in this manner from the view in which it was originally created, it will be truly deleted from all views instead of unplaced.)


You can also right-click a widget and click "Unplace from View".

SWITCHING ADAPTIVE VIEWS IN THE HTML OUTPUT

AUTOMATICALLY

The correct adaptive view will be shown on your device when you view the generated HTML in the browser. (A noted above, make sure you have selected "include Viewport Tag" in the "Mobile/Device" tab of the HTML Generator to view the prototype on a mobile device.)

MANUALLY

There are two ways to manually set the adaptive view. In the Pages tab of the prototype sidebar, you can use the adaptive view button to choose to view a specific adaptive view.


You can also use a "set adaptive view" action in an interaction to dynamically set a specific adaptive view.

LIMITATIONS OF ADAPTIVE VIEWS

For a few types of widgets, their only adaptive property is their location. The size and styling must be the same in each adaptive view. These widgets are: classic menus, trees, tables, and connectors.


As a workaround, you can place a separate widget of each type in each view, unplacing the other widgets.

Sometimes, you may want an attribute that isn't adaptive to vary in different adaptive views. For example, you may want a shorter passage of text in the mobile view, and a longer piece of text in the desktop view. In these cases, you'll want one widget with shorter text placed in the mobile view and unplaced in the desktop view, and the other widget with the longer text placed in the desktop view and unplaced in the mobile view.


Unplaced widgets are listed in the Outline in red text. (If you aren't seeing your unplaced widgets listed in the Outline, click the "Sort and Filter" icon in the Outline's local toolbar and verify that it's configured to show both placed and unplaced widgets.)


To add an unplaced widget to a view, right-click it in the Outline choose "Place in View".


To delete a widget from all views, you can right-click it and select "Delete from All Views". If you delete the widget on the view where it was added, this will also delete the widget from all views.

To add a view, click the green "+" icon in the "Adaptive Views" dialog. When you add a view, it'll be the child of whichever view is currently selected (i.e. highlighted blue) on the left side of the dialog. (All views besides the base view will be children of other views.)


You can also click the "duplicate" icon to make a new adaptive view that's a duplicate of the current view. Delete a view by clicking the red "x" icon.


When you create a view you have the option of choosing from a preset for commonly-used breakpoints, like 768 pixels wide for a portrait tablet view or 320 pixels wide for a portrait phone view. You can also choose a custom size for your view.

After you create your view, name it in the "Name" field. The subsequent fields—condition, width, and height—determine the circumstances in which the view will show. (When the browser window size doesn't meet the criteria for any of your adaptive views, the base view will show.)


Use the "condition" field to specify if the size you're defining for the view is the minimum or maximum size. When you're working from large to small, you'll use the condition "is less than or equals". When working from small to large, use "is greater than or equals."


In most cases, you'll just need to use "width" field to indicate the width at which the browser will switch to that view. The "height" field is useful when designing for a mobile app where the full height of the page typically fits onto the screen. You can usually leave the field blank when designing for pages that will be scrollable.