How toddle thinks about responsive design

"Responsive design" means to design your UI in a way where it looks good on every possible screen size. Almost every programming platform from IOS and Android to Windows and Mac supports building responsive applications but one platform has been leading the way for decades. When it comes to responsive design, you cant beat the web!

Every app is unique, or it should be. As the designer you must control every pixel regardless of the device. It is your job to ensure a good user experience across different devices. HTML and CSS are tried-and-tested languages, and our goal is not to reinvent the wheel but rather to present a much better way to wield their power.

Building fully responsive apps is not easy so we wanted to share a few tips on how to approach it in your projects. If you’re a seasoned web developer, you can skip this article, as the answer to how you do responsive design in toddle is the same as how you do responsive design on the web. If you have focused on backend or no-code development, you may want to enlist advice from a developer who’s spent the last 20+ years pushing HTML and CSS to the limits.

Rule #1: Breakpoints should be the last tool you reach for

For many developers, “Responsive design” and “Breakpoints” are interchangeable. This is especially true for developers who primarily use visual page builders like Webflow and Framer. When you use a breakpoint (or media queries, officially called in CSS), you create a whole new set of styles only applied to a device size.

More sets of styles can make it harder to understand which styles are used at any given time, so when possible, don’t add unnecessary breakpoints.

Luckily, CSS has a lot of other tricks up its sleeves.

Rule #2: Use relative units and with constraints

Pixels are not the only unit in CSS—there are many others . Relative units such as percent (%) or “em " change your layout based on the size of the container element or the current font size. 

You can use CSS properties such as min-width and max-width to create constraints that ensure your layouts don’t exceed certain thresholds.

For example, you can add a max width of 100% to a card element that has a width of 400px. This will prevent overflow issues on smaller screens. 

Relative units and constraints should be the workhorse of any responsive layout.

Rule #3: Learn the different layout engines in CSS

CSS has multiple layout engines that you can choose between with the “display” property. In toddle, the default for most elements is Flexbox since it is versatile and straightforward. Flexbox lets you create dynamic layouts that can adapt to both the screen size and the content placed inside each of its flex children. You can also control how and when the elements in a flex container should wrap onto new lines.

Flexbox makes it easy to center content within a container. It takes no more than a click on a button. Before the arrival of Flexbox, this was notoriously difficult in CSS.

For text, the standard flow layout engine is generally a better fit. Select “Text” under Layout to enable the flow layout in toddle.

Knowing when to use which layout is crucial, and it’s a muscle you’ll slowly train as you build more. We also recommend reading up on the various layout engines to get a good feel for their utility.

It’s a bit of a chore, but it’s 100% worth it!

Rule #4: Use rem and em for text

The “rem” unit in CSS is a relative unit based on the font size of the root element (HTML). The browser normally specifies this size, but users can choose to increase their default font size if they have trouble reading small text on a screen.

A size of 1rem means 1 x the base font size. 2rem means twice that.

The em unit works like the rem but is relative to the current font size, not the root. This means that a font size of 1.25em will differ depending on the container it is inside, whereas 1.25rem will be the same everywhere.

You use rem and em units to respect the user's wish for a more legible font size and keep the relative size of different texts intact. This means the user can read your content without strain on their eyes, and you maintain your beautiful design.

Pro tip: Avoid font sizes below 1rem for blocks of text. Users set their preferences for a reason. It’s not just about your design but also about accessibility to your users.

Rule #5: Be careful with “height”

When the screen size changes, the content has to go somewhere. As the screen's width gets smaller, text will break into new lines, and flex layouts will start wrapping. Put another way: the content's height grows when the width gets smaller.

For this reason, you should avoid a fixed height on any element that will change its size on smaller screens. The default value for height is “auto,” which means that the element will shrink to fit the content inside it.

If you need an element's height to be limited, set an overflow value of either scroll or auto to ensure that the content does not overflow the element.

Rule #6: Don’t use device breakpoints

If none of the tools above will do the trick, then it is time to use a breakpoint. One rule that will save you a lot of trouble is to base your breakpoints on the layout rather than the device.

Many website builders, like Webflow and Framer, use fixed breakpoints, such as phones, tablets, laptops, etc. This can seem like a nice and simple approach, but the end result is usually less good.

Make sure each breakpoint is tailored to the specific design. This will ensure that your layout breaks at just the right time and, therefore, always looks the best it can on every screen size.

The big problem when you define breakpoints based on devices is that a device for almost every possible screen size now exists. There is no such thing as a  “standard phone screen”; ask Tony Stark.

A deep dive into responsive design and breakpoints in toddle

You can watch Andreas detail all these tips and see more about our approach to responsive design.

This advice will save you a tremendous amount of time. Unfortunately, I've had to learn these lessons the hard way.