Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to prototype adaptive layouts for your web and mobile apps

We’re living in the days of mobile devices and you can’t always know which one your users will use to access to your website or app. That’s why you might want to display the content in your screens in a different way, depending on the resolution of the device they are being viewed on.

Justinmind gives you two practical tools to let you simulate changes to content depending on the resolution of the device:

  • An event that controls the size of the device’s screen, called ‘On Window Resize’.
  • Two constants in the expression builder to set the current window height and width.

Let’s see how to prototype a website that has two kind of layouts: one for desktop and one for mobile.

1) In order to create layouts for both desktop and mobile, you will need to create two screens: one with the content for desktop and another for mobile devices. Alternatively, you can create a Dynamic Panel with two panels and draw the contents of the two layouts in each one of them.

2) In order to control when to show each layout, select the screen background and go to the events tab. Add an ‘On Window Resize’ + ‘Resize’ event and click OK. Once back in the canvas, click on the ‘add condition’ and define a condition like the one displayed below:

adaptative

3) Click OK. Now add a ‘Link to’ action and select the screen containing the mobile layout (or select the event action ‘Set Active Panel’ if you are using a Dynamic Panel).

4) Go to the screen with the mobile layout and create the same event as above, this time showing the screen with the desktop layout when the width of the window is more than 320 pixels long.

That’s all! Click on “Simulate” and resize the browser window until the event is executed. 

You can combine this adaptive feature with liquid layouts to build responsive prototypes and simulate responsive design.

Next tutorial: How to prototype liquid layout elements for your prototypes

9 Comments

  1. harshini

    May 5, 2015 at 9:07 am

    Hi i need a small information

    1. How can I link the screens using the selected drop down list,if a select some thing form the drop down according to the selection the screen must change

    2. How can Select the days in a week ? Is there any option similar to calender and same problem with the time .please reply me

    Regards,
    Harshini

  2. viraj

    June 7, 2015 at 6:03 am

    Can I set different heights to different screens in the same prototype?

    • Lidia Rodriguez

      July 2, 2015 at 10:24 am

      Sure, you can modify the screen size clicking on the Screen element from the Outline tab, and then change its size on the properties tab.

  3. Baris Says :

    July 6, 2015 at 7:52 am

    Do you have video tutorial to demonstrate how we prototype the adaptive layouts? Do we need draw new screens for each screen size?

    Best regards,

  4. Baris Says :

    July 6, 2015 at 7:55 am

    Ok, I got my answer 🙂

    ” First you need to draw both layouts. You can do so creating two different screens, one with the content for computers and another for mobile devices. Or you can create a dynamic panel with two panels and draw the contents of each state one in each panel.”

  5. Baris Says :

    July 6, 2015 at 8:04 am

    When selected the screen’s background and go to the events tab I see that it is inactive, is it normal?

    Best regards,

    • Lidia Rodriguez

      July 6, 2015 at 8:16 am

      Hi Baris. Yes, if you want to select the screen itself, you have to do it by clicking on the screen element on the outline tab.