Building User Interfaces with Bubble

In the previous chapter, you learned how layouts and styles work. In this chapter, you will learn about user interfaces (UIs) and how to build layouts that adapt seamlessly to different devices and screen sizes. We will explore the responsive design features available in the responsive editor, and with this knowledge, you will be able to create pages and UIs that are not only visually appealing but also intuitive and user friendly. Making your layouts responsive and properly configured will allow them to adapt across various devices and screen sizes.

In this chapter, you will learn about the following topics:

• How to create responsive layouts
• How to use responsive design features inside Bubble

Getting started with responsive layouts

Inside Bubble, you can build various layouts and pages for your application, but they are not naturally responsive by default, so it is important to make sure you configure it to behave correctly on different screen sizes. First, start by building your desired layout and then you can start making changes to it to make it adapt and behave in a responsive way. Making a layout responsive will depend on how you set up specific container components and the settings you apply to it directly, using the knowledge acquired in the previous chapter, as well as some other settings that are available inside the responsive mode. Let’s learn a little bit about it.

What is responsive design?

Responsive design refers to a design approach used in creating websites or applications that automatically adapt and adjust their layout, content, and features to fit various screen sizes and devices.

An example of different devices and screen sizes are shown...

The Responsive Design tab

When working on the Design tab, the canvas, usually, you are working on the UI Builder tab, choosing components, and adding them to the screen. Now, if you want to check what your layout looks like in different screen sizes, you can do this by simply selecting the Responsive tab, which is also called Responsive mode.

The Bubble interface inside the Responsive tab is shown here:

Figure 6.3: Responsive Mode in Bubble.io

Notice that the responsive mode is very similar to the previous mode, but with a few differences – let’s break it down. In this mode, we still have the Elements Tree section, which works the same way as you’ve learned before. We also have a list of elements added to the page and their current size. We have a new section called Page states, where we can see conditional states in our application so we can test different view modes. One that comes by default is User logged out (toggle) so you...

Different ways of previewing your pages

Using the responsive mode is one way of visualizing how your layouts looks in different screen sizes, but it is not the only way. In this section, we are going to take a look at other methods for testing your application in different screen sizes.

Preview mode

As you may already know at this point there is a button called Preview, available at the top bar of your Bubble Editor. If you click it, a new window will open and load the current page you are working on in the editor. With the Preview mode, you can quickly navigate to your page, and by stretching the browser window size, making it smaller or bigger, you can have a sense of how your layout is adapting to the changes.

Browser Inspector

Another way to validate how your page layout looks using your browser is by activating the Browser Inspector feature. After clicking the Preview button, once you are on your desired page, hit the shortcuts on your keyboard, which are command ...

Summary

In this chapter, we’ve covered the essentials of the responsive editor. You learned about responsive design and breakpoints and how to configure them inside Bubble.

You also learned important tips and tricks on how to properly set up your responsive designs and important concepts that will help you understand how to work with responsive layouts while building your no-code applications.

Understanding these concepts will be important for any future project you build. In the next chapter, you are going to learn how to use workflows to give life to your applications.