How to create responsive prototypes

Prototypes that are created with responsive design 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

You can place an element in a defined position on the screen through Pinning, this will ensure that your element won’t move even when you scroll down the page. This is useful for creating sticky headers, footers, centered content, and more.

Learn how to use pinned elements.

Percentage height and width

Elements are able to automatically resize themselves to the browser’s dimensions using percentage-based height and width. This way, when you resize the browser, the element will respond accordingly.

Learn how to use percentage width and height.

Liquid layouts and breakpoint events

Using events to create breakpoints will help adjust elements to the screen by detecting when the screen size changes.

Learn how to use liquid layouts and breakpoints.

After learning these principles, you are able to create many responsive prototypes with Justinmind. Here are more examples of how to achieve this:

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