Setting up Adaptive Views
Adaptive Views define the breakpoints where you want your pages to switch to a different layout or style.
To create your views, click on the Adaptive Views icon at the very left of the tabs above the wireframe pane, or select Project > Adaptive Views.
In the Adaptive Views dialog, you can set up your adaptive views using presets (i.e. Landscape Phone, Desktop, etc.) or enter your own values.
Presets: typical views with preconfigured device widths
Name: a label for the view
Condition: whether the view will be shown if the browser width is less than or greater than a specified width and/or height
Width: browser width (blank means the browser can be any width for this view)
Height: browser height (blank means the browser can be an height for this view)
Inherit from: specifies the ‘parent’ of this view (more on this below)
What does Inherit do?
The location, size, style, and interaction styles of a widget can vary across adaptive views. Properties like text, interactions, disabled by default are not adaptive and are the same for a widget across all views.
A widget in an adaptive view inherits its location, size, and style from its location, size, and style in the parent view. If you make a rectangle blue in the parent view, it will be blue in the child view. If you make it blue in the child view, it will not affect the parent view. If you make it red in the child view, and then blue in the parent view, the child will stay red because you've already "overridden" it in that view.
The views in the adaptive toolbar are ordered by inheritance.
In this screenshot, 320 inherits from 768, and 768 inherits from the base.
What is Base?
The Base view is the default view for your project. Every other view will be a child, grandchild, etc. of the Base view. Generally, you will start designing your project in the Base view and then adjust the widgets as needed in the child views.
In the example above, the 768 view was defined to be shown when the browser width is less than or equal to 768. That means that the Base view will be shown any time the browser width is greater than 768.
So if you're starting Desktop first...
You're likely to create views that inherit from each other as they get smaller. (As seen in example attached below)
If you're starting Mobile first...
Your Base view would be designed for the phone and the views would inherit from each other as they got bigger.
If you are starting from somewhere in the middle, like a tablet view, you can create two inheritance chains. One chain that goes up, and another goes down. Each time you create a view that inherits from the Base view, it will create a new inheritance chain.
Next: Editing your Adaptive Views
adaptive-example.rp (50.8 KB)
MobileFirst.rp (49.4 KB)