ADAPTIVE VIEWS TUTORIAL

Adaptive views are great, but try not to go overboard with more than 3-4 total views.

First, open DIYAdaptiveTutorial.rp.

 

In this example, we'll create a simple adaptive layout that changes when the browser size is smaller than 768px.

 

Select the adaptive icon above the 0,0 coordinates to open the Adaptive Views dialog.

In the Adaptive Views dialog, click the Green plus sign to create a view.

 

In the Presets droplist, choose Portrait Tablet.

 

Click OK.

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

u13_start u13_end u13_line

In the adaptive view selection toolbar, choose the 768 view and then unplace the blue rectangle. You can do this by pressing delete or right-clicking and selecting [Unplace from view]. This will remove the widget from the 768 view but not from the base view (its parent).

Move the pink and green rectangles so they are stacked underneath the image. Resize the rectangles to be the same width as the image.

Select the green rectangle and change the fill color to orange. Switch back to the Base view and notice that the color change is only affected on the 768 view because it is a child of the base and the style property does not affect all views.

Select the pink rectangle and add the text "Get busy!". Notice the text will be added to both the base and the 768 view. Unlike style properties, text changes apply across all views.

Preview the prototype by clicking the preview icon in the toolbar. Resize your browser to the the adaptive views change. 

 

Congratulations! You've built your first adaptive prototype.

 

To see the correct adaptive view when viewing your project on your on your mobile device, make sure to include the viewport tag and other mobile viewing settings as explained this tutorial.

Step 1: Select the Adaptive Views Icon

Step 2: Add Portait

Tablet preset view

Step 3: Select 768

view and unplace

blue rectangle

Step 4: Move and resize pink & green rectangles

Step 5: Change green rectangle to orange

Step 6: Add text

on pink rectangle

Step 7: Preview & Test

DOWNLOAD

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUNDUP

u70_start u70_end u70_line
u72_start u72_end u72_line
u74_start u74_end u74_line
u76_start u76_end u76_line
u78_start u78_end u78_line
u80_start u80_end u80_line

ADAPTIVE VIEWS TUTORIAL

Basics of using Adaptive Views

u94_start u94_end u94_line

MORE ADAPTIVE VIEWS ARTICLES ::

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.