Learn how to create responsive prototypes

Prototypes with responsive design adapt to your screen size when simulating. When a prototype has an adaptive design, it will display well on any screen size, including mobile, tablet, and desktop.

Here’s what you need to know to create responsive prototypes in Justinmind:

Pinned elements

Pinning an element will place it on a defined position on the screen. You can pin an element to create Parallax effects with sticky headers and footers, centered content, and more.
Check out our tutorial on pinned elements here.

Percentage height and width

Elements with percentage-based height and width will automatically resize to the simulation browser’s dimensions. Use elements with percentage height and width to define elements that respond to the screen size.
Check out our tutorial on using percentage width and height here.

Liquid layouts and breakpoint events

Create breakpoints with events to detect the screen size and adjust elements on the screen to match the new screen dimensions. Use events to make truly liquid layouts.

Check out our tutorial on liquid layouts and breakpoints here.
 
Once you learn these principles, you can create many responsive elements with Justinmind. Check out the following tutorials to learn how to apply these principles:

• Create a basic responsive prototype
• Create a conditional menu
• Create a fluid table
• Create a fluid grid