Fluid Layouts and Breakpoints
Build Responsive Prototypes the Right Way
Finally, you can easily build prototypes that react to browser size and device type.
A unique set of tools, exclusive to iRise, now allows you to build and test responsive prototypes. No coding or complex equations - just set it and go!
- Size and position elements by percentage or pixel.
- Position elements relative to any edge or corner (not just from the upper-left corner).
- Control how the size and position of an element should adjust as its parent container resizes.
- Set up breakpoints to alter the layout or navigate based on browser dimensions.
A fluid page uses relative units for size and positioning, allowing the content to resize based on the browser window size. For widgets or containers that you want to dynamically resize, percentages can be used instead of pixels.
A common use of fluid layout is having the content fill the width of the page, no matter what the width of the browser might be. This can take the form of one full-width widget set to 100% width, two widgets each set to 50% width, or any combination in between.
To give more precise control, widgets may now also be positioned relative to any edge or corner (not just top/left). As an example, this means that you can set a widget to always stay positioned 20 pixels from the top edge and 40 pixels from the right edge.
The image to the left shows the WYSIWYG icons that you'll use to set a widget's position. Just select the layout and margins you'd like, and that widget will behave accordingly.
A good example would be adding a floating action button (FAB) to your page - just select the widget, choose "right/bottom" for layout and enter the right and bottoms margins.
There are times when you want to provide the user with an alternate layout depending on their device or screen size. Using the iRise breakpoint widget, you can set custom screen widths and activate actions when they're crossed - like showing and hiding elements or switching custom views.
Breakpoints combined with the fluid layout settings can be a powerful combination - a one/two punch for creating responsive designs.
In the example below, the middle text column is fluid because I've set it to size by percentage. The images on the left are being hidden when the browser crosses a specified size. I'm also changing the left margin of the text column to go from 350px to 20px using an action and CSS.
Tip: A great use for breakpoints is triggering navigation to another page to show an alternate layout. You might want to navigate to an iPhone page when the mobile breakpoint is crossed, and demo your prototype using the iPhone emulator (this scenario is used in the animation at the top of this page).
To use iRise Breakpoints, you just need to download the iBloc extension and drop it onto your page in Editor. You can watch a video tutorial here.
Widget library items and page templates can be responsive too
Custom libraries and page templates help you leverage the prototyping work you do, so your team never has to build a widget more than once. The widgets that you save retain their responsive attributes, so when you drag them onto you're page they're ready to go.
When you have a page or widget you'd like to save, just right-click and select "Save as a Widget/Template." Then you and your team will have access to reuse it.
Libraries and templates allow you to become more efficient the more you prototype.
See for yourself
Whether you're already an iRise user or considering the tool, schedule a short custom demo for you and your team and see the new responsive functionality and everything else that comes with the platform. We'd be happy to give you a preview and answer all your questions.