Responsive design

Learn how to create responsive screens that seamlessly adapt to all devices and screen sizes.

Introduction to Responsive Design

Responsive design is a web design methodology that ensures websites or applications automatically adjust to the user's screen size, be it a desktop, tablet, or smartphone.

The Default Fixed Layout

When you initiate a project in PandaSuite, it defaults to a fixed layout. This layout is designed based on a specific screen size ratio. While the project can expand, this ratio remains consistent regardless of the screen size. As a result, black bars might appear when viewing your application on a different screen ratio.

For an optimal user experience across devices, it's crucial to enable Responsive mode. This ensures your design adjusts automatically to various screen dimensions.

Managing Orientation

However, the responsive mode doesn't account for changes in device orientation. For instance, if you've designed a mobile app in portrait mode but want a landscape layout for tablets, you'll need to create a distinct layout.

Some components, like the Video component, can handle orientation changes. Alternatively, you can display a prompt encouraging users to switch orientations based on screen size conditions.

Activating Responsive Mode

To enable responsiveness, select your project and navigate to its properties.

Click on the Yes button next to Responsive.

However, simply pressing this button won't magically make your project responsive. You'll need to set the responsive properties for each component within.

Responsive Features of Screens and Objects

Understanding Containers

Before adjusting the responsive properties of objects, it's vital to grasp the role of containers. They act as "boxes" in which you place one or more objects. When responsive mode is on, each object within a container adjusts based on that container's properties, adhering to a hierarchy.

This means an object's behavior is influenced not just by its own responsive settings but also by the container it's placed in.

Think of it like nesting dolls: start by setting the responsive parameters for each screen, then focus on the containers, and finally the objects within.

The primary containers in PandaSuite include: screens, Group, Scrolling area, Gallery, Multi-state, Drag & drop, Pop-up, and Flexbox.

Setting Properties

Select an object and navigate to its properties.

You can adjust two parameters: position and resizing.

Positioning

Using the pin feature, you can allow an object to move as the screen edge shifts. The object's movement is based on the difference between its original size and the device's size. Choose one or multiple directions for this movement.

If you pin an object to a non-opposite edge, the distance between the object and the edge remains constant. For instance, if your object is 100 pixels from the right edge and you activate the pin on this side, your object will always be 100 pixels from that edge.

Pinning an object to an opposite edge means its position will change to maintain the same proportion between the object's center and the opposite edge. For example, a centered object will remain centered regardless of screen size changes.

Resizing

An object's resizing is controlled by two arrows in the properties window. By default, both arrows are active, indicating that the object's size changes proportionally with the project's size.

For both horizontal and vertical resizing, you have three modes:

• Stretch: The object adjusts to fill all available space, which might distort it.
• Aspect Fit: The object resizes to fit the available space while retaining its original ratio, ensuring it's fully visible without overflow.
• Aspect Fill: The object resizes to cover all available space, maintaining its original ratio, which might cause some overflow.

Default Responsive Behaviors

When responsive mode is enabled, objects follow a default behavior based on their type. Here's a breakdown:

• Screens: By default, they're set to Aspect Fit to ensure content remains visible and proportionate.
• Images: Care is taken to ensure images aren't distorted. They adjust to the available space while keeping their original ratio.
• Text: Text might stretch or compress by default. To prevent this, use Flow Mode, which ensures text remains legible.
• Containers: They default to Stretch mode.

Diving into the Flexbox Component

The Flexbox component is a cornerstone of responsive design. It's a container that dictates the position of its child elements. This means if one child element changes in size, the positions of other elements adjust accordingly.

Flexbox offers a dynamic and adaptable layout. In PandaSuite, Flexbox adjusts based on its content, ensuring your design remains consistent and harmonious across all screen sizes.

Testing Responsiveness

In the Preview, use the handles to resize your screens and observe the behavior across various devices.