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:
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.