Note: This is an introduction to concepts around Responsive, Reactive and Adaptive design, code will follow in subsequent posts aimed at implementing such designs in MAUI applications.

When we start developing cross platform applications with frameworks such as MAUI, Xamarin Forms, React Native etc., we really want to create (where possible) one code base for our application (only deviating from this for platform specific code).

As you’ll probably aware, the real problem areas for this are in the UI code, and this is really what this post is all about.

Definitions

I’ve based these definitions on various websites and blogs talking about such things. Personally, I tend to feel that they all ultimately mean the same thing which is just simply, how to make our apps work best on different devices, screen sizes and orientations. But, let’s take a look at the definitions anyway.

• Responsive – A responsive design takes a single layout and changes elements on the page, such as adjusting font size, even adding elements to utilise the space or a device accordingly but the general layout remains unaltered.

  Note: Responsive also refers to Responsive UI, i.e. when a UI feels responsive, such as when a button is clicked how it gives feedback etc. and is as non-blocking as possible. This is a different subject altogether, so not covered here.

• Reactive/Adaptive – A reactive (also known as adaptive) design will use different layouts to cater for different screen sizes and/or devices. The classic for this is a design for mobile screen sizes which has a single navigation page that navigates to other pages and back, whereas on a tablet or desktop, the navigation pages becomes a docked (usually to the left) page which the pages previously navigated to, shown on the right (as and when selected).

So, in essence, responsive designs change values within the existing design to respond to the device/space, whereas a reactive or adaptive (I’ll stick with using the word adaptive for reactive/adaptive design from now on) design has specific designs for each device/size of view.

What we’re really talking about is how to make our application look good and work well on different screen sizes and orientations.

If our application design can get away with just changing font sizes, then that’s a relatively easy win. However, to truly cover all options we need to look at how our application might be more adaptive.

Breakpoints

Web technologies, whether CSS or other has been implementing adaptive designs for a while. A website may be designed for mobile-first where it has a single page with a hamburger menu or other means of navigating to other pages but when that same view is expanded to a larger size, the UI may switch to show a navigation bar on the left and each page that’s navigated to gets displayed on the right. This is a pretty standard sort of design, UWP templates use it and I’ve used for my My Unit Conversion app to show different layouts on phone and tablet as well as different orientations. Anyway, back to breakpoints…

The word Breakpoints is used to refer to the screen sizes that we might want our application to adapt to. So, typically we’ll have a mobile device (or smaller still a watch), tablet and ofcourse a desktop and maybe even a large screen TV. We can think of these screen sizes as different breakpoints, in other words the points at which the app. or website changes to provide the best UI and UX.

For example, if we take a look at the boostrap breakpoints, by default the breakpoints are separated into x-small, small, medium, large, extra large and extra extra large. As you can see, there’s no mention of devices like mobile phone or tablet, instead we just need to concern ourselves with the screen or more specifically window/view sizes. With such a system we can change the size and shape of a window/view on a desktop and it’ll change layouts etc. based upon the breakpoints being reached.

So what do we need to support for a fully adaptive application?

• Fonts – we need a way to expand text to better fill and display on larger devices. I mean a 24 pt font might look great on mobile but becomes a small island of text in a larger landscape of a tablet or desktop app.
• Element Sizes – closely related to font sizes. A button that says OK will become lost on larger screens.
• Element Positioning – we need a way to move elements on the screen. For example, maybe in landscape orientiation it makes sense to put buttons on the right of the screen instead of the bottom.
• Changing layouts – (the canonical example discussed above also). Take a mobile app that has two section, one page with a list with navigation items and another page that displays when click by the navigation items is great on mobile but for tablet or desktop, would be better if the navigation page became a docked panel on the left of the screen and clicking links shows the navigated page on the right of the screen – this is a pretty standard layout change you’ll see in lots of apps.

What’s next?

This post just covers some of the concepts around creating adaptable UI’s, in the next post we’ll look at using this knowledge to create more MAUI applications.

Useful references

Screen sizes
Breakpoints
Adaptive Design vs. Responsive Design