In today's digital landscape, users access content across a variety of devices, from smartphones to desktops. Ensuring that interactions adapt seamlessly to different screen sizes and devices is crucial for providing a user-friendly experience.
This guide will walk you through the process of implementing responsive interactions that adjust dynamically to various platforms. By following this guide, you will learn how to use breakpoints, apply minimum and maximum size constraints to optimise layouts for different devices, and create one interaction that works across mobile and desktop environments.
|
Mobile Mode
|
Desktop Mode
|
Not using the breakpoints leads usually to the creation of separate interactions for each device type, which can be time-consuming and less efficient.
These are the functionalities that are essential for creating responsive interactions:
- View element (Minimum and maximum sizes)
- Constraints
1. Designing the responsive interaction
Suppose you are designing a pop-up quiz that needs to work on both mobile and desktop devices. In the images below, both interactions perform the same function but initially had to be designed separately for mobile and desktop versions. However, with the responsive feature, this can now be achieved in a single interaction, making the process more efficient and user-friendly across different devices.
-
Begin by creating a new interaction. By default, the interaction is in mobile mode, so it's best to start designing for mobile first.
- In the new interaction, the view is initially invisible or transparent. This view is primarily used for positioning the other elements within the interaction. Select the view and choose the constraints type from the dropdown menu based on where you want the interaction to appear on the screen. For instance, you have the option to align it at the center of the screen.
The view can also be aligned to the center by being dragged. The red magnet lines will indicate that the view was perfectly centered.
- Next, let's include a Rectangle Shape element to serve as the background for the other elements. Simply drag the shape element to the top-left corner of the view and adjust its size to fill the entire view. This action will activate the stretching mode, ensuring that the background adjusts accordingly in both directions as the view size changes.
You can confirm this by checking the placement panel, where the stretching feature will be activated.
It is advisable to avoid filling the entire screen when designing interactions. In this example, the rectangle shape has 30px padding. - Apply styling to the Rectangle shape using the Styles Settings menu. This includes adding rounded borders and a top-right closing button. To create the closing button, insert a button element and change the button text to '✕'.
- Now, let's add text, button and image elements for . Select the image element and make sure that the constraint type is set to the stretch bottom.
6. To simplify the process of aligning text and button elements in both mobile and desktop modes, it is recommended to group the elements together. This allows for easier positioning of a single grouped element rather than adjusting each one individually.
- select the text elements and buttons
- right-click to open the context menu and choose the group option
Once grouped, the elements will appear together, making it easier to manage their placement within the interaction.
7. Now that we have finished designing the interaction for mobile devices, let's take a look at how the interaction appears on both mobile and desktop platforms.
2. Using breakpoints
Next, we'll adjust the layout of the interaction for desktop mode by using breakpoints. To create interactions using breakpoints, follow the steps outlined below:
1. Select the element and go to the Settings tab2. Under the Placement category, you will find a switch to enable “Device specific placement”.
To change the layout of elements in a specific device mode, follow these steps:
- Select the element and enable "Device specific placement".
- Change the layout or styles as needed.
To check if the interaction changes layouts, follow these steps:
- Select Custom device mode.
- Go to Preview.
- Adjust or modify the frame size to observe any layout changes.
Resize the size of the image element to fit the right half of the view and set the constraints type to right stretch if those were not set automatically.
After implementing these adjustments, the interaction now appears differently in mobile mode compared to desktop mode:
Below we used the option to hide elements (the image in this case) for the mobile version. We can achieve this by selecting the element, navigating to the settings side panel and disabling the "Show by default" option for the element that we desire to be hidden on the specific device.
This guide has shown you how to use responsive design in your interactions. By setting minimum and maximum sizes, your elements will adapt on any device. Using breakpoints gives even more control, allowing layouts to automatically adjust based on the screen size. This simplifies the design process and ensures a smooth user experience without the need of separate versions for each device.
Example:
For any new interaction having the responsive mode enabled, all the elements will be placed inside the View element. The View itself will not contain any styling. Below, we created a floating button interaction.
We can use the power of the groups by selecting the elements that we desire to group. This group can be reused across various views. If any of the styles of the group will be modified, those changes will be reflected in each view, where the group has been reused:
The view itself has the width and height set to "auto" and its constrains as "right bottom", so the interaction will stick to the bottom right of the screen. In this case, where the interaction does not occupy the whole screen, we do not need to use the "Full" mode for the View.
If the minimum width and height are too small in the desktop version, then those values can be modified manually by changing the Min px input.
3. Troubleshooting
Make sure the Responsiveness feature is enabled
- Open the interaction in editor mode.
- In the top left corner, you will see the name of the interaction. Open the toggle as shown below:
3. Click on Advanced options to see more options.
4. In the options, you will see the “Enable responsiveness” option. For the new interactions, this mode is set to responsiveness by default.