Design a responsive layout

Implementing Responsive Design in Appfarm Create

Appfarm Create offers full support for creating Responsive Apps.

Responsive Layout allows you to create a single App targeting different device sizes. The principle is to define a Responsive Stragety, i.e. which device should be targeted first. Typically, if your app is most important for mobile usage, you define a Mobile First strategy. In the oppisite case, you define a Desktop First strategy.

A full example setup on a Responsive App with Desktop First strategy is available in our Showroom. Try resizing the browser window. You may also access the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.

Defining which strategy to use is set on App Settings -> Responsive Strategy.

Having the Responsive Stragety set to e.g. Desktop First, enables some new features.

Step 1 - Design the view for your target device (Desktop)

Select the screen you are designing for in the top section

You may start off by completing the design for your target device. In the above example, we have 3 columns of projects, each of them stretching out and taking a minimum of 300 px width.

However, this design would not look good on smaller devices.

Step 2 - Override UI Component Layout for smaller devices

We would like to columns to be smaller on Smaller devices (1239 - 600px, as seen when hovering the icon behing the orange square in the above illustration). Havning changed the UI Designer to Smaller Devices, you may see that the Styles sections of the selected Container now allows for overrides. This means, unless other stated, use the setting from the larger device. In this case, we have set the Min Width to 150px.

Note that when Mobile First strategy is selected instead, the order of the devices in the top section is reversed. This means, the larger layout will inherit from the smaller layouts.

Step 3 (optional) - Hide or Display different UI Components on different devices

For the Extra Small Devices (mobile phones), we would like to have a totally different layout. We would like to hide the header and project listing as seen in Step 2, and instead display a similar listing, only vertical with the Project Status as headers above each list.

The first thing we do: From the Designer in Desktop Mode (large devices): Make a copy of the project listing, and make the necessary adjustments to it to make it vertical (as we would like to have the listing on mobile devices).

Then, set the Styling setting Layout -> Display to None. This means that the UI component will be hidden on Large Devices.

How to set Display to None on a UI Component

Since the Display is set to None, the above illustration does not reveal how the Container "Content (x-small devices)" will look on Large Devices. We need to switch the Designer to X-Small Devices, and then switch the Layout -> Display back:

The Container holding the UI for the mobile projects listing, now visible on x-small devices

In the above illustration, we see that the Container holding the UI for the mobile project listing is now visible. In all other devices (Small, Medium and Large) it is hidden.

The final step for the Designer for X-Small Devices, is to hide the Containers for larger devices:

Testing your UI

You may open the App in your browser, and test the responsiveness by resizing the browser window. The design for the various layouts (Large, Medium, Small, X-Small) is triggered when the width of the browser window crosses the thresholds.

To see which widths that triggers which layout, you may hover the device selection icons in the designer: