Making a Platform Adaptive for Everyone

The logos of Purism and GNOME
mobile

This article was written for Purism and it was first published on its website.


A Mobile Platform

When we announced the Librem 5, we knew we would have to invest in and build a mobile operating system and applications to run on it — by “mobile” understand “for smartphones”. To avoid reinventing the wheel, we decided to base that system on an existing environment. Librem laptops ship with our operating system PureOS, which provides GNOME as its graphical user environment as it is a modern environment and a very active project with which we share many goals, design principles and values.

Touchscreens bring a new set of possibilities and constraints to user interface designs. For many years, GNOME’s main target is laptops, and it acknowledges in its design that they can have touchscreens. All of these factors made GNOME a serious candidate for Purism to turn into a mobile platform, and using it on both the Librem laptops and the Librem 5 brings some very valuable consistency to our broader software ecosystem and user experience.

To feed that system we need mobile applications, but rather than creating mobile duplicates of existing GNOME applications, we decided to take an approach the web has been doing for years: making existing GNOME applications adaptive. Making an application adaptive not only makes it work on smartphones just as well as on laptops, but it allows it to work well on anything in between, e.g. when its window is small or tiled. Adaptive applications also means same app code for multiple device sizes.

Writing Tools for Adaptive Apps

Making applications work on smartphones just as well as they do on laptops at the scale of a whole application ecosystem can seem like a daunting task, but Purism’s multi-year effort was helped and simplified a lot with good design and appropriate tools.

We experimented creating mobile-specific and adaptive widgets — the elements composing a graphical interface, like text, images, and buttons. We needed a way to provide these experimental widgets to GTK developers without modifying GTK directly. This led to the creation of a library to include into a GTK application: Libhandy — Handy being the German name for a mobile phone.

Here are a few examples of widgets available in Libhandy.

When the window is narrow, the leaflet turns side-by-side panels into a stack of panels with gesture navigation.

The view switcher relocated itself depending on the available width.

The carousel helps navigating between pages with gestures.

The flap can be used to implement sidebars which will smartly use the available space.

As time went on, we needed to develop new and experimental widgets that aren’t specific to mobile phones and adaptiveness. Actually, designers and application developers from both Purism and GNOME wanted widgets to modernize the platform as a whole — e.g. a preferences window and an avatar widget. As Libhandy already was the widgets library we developed for a very similar purpose, it naturally became a host for said widgets.

How it Impacted GNOME

As it allowed to easily and quickly develop modern, adaptive and snappy applications, Libhandy quickly gained popularity among the GNOME application developers, both for third party GNOME applications and core GNOME applications such as Settings, Files, Web, and more.

Libhandy got closer to GNOME to the point of becoming its unofficial high-level widgets library, sitting atop GTK. Our work on Libhandy benefited not only Librem device users but GNOME and all its users as a whole.

Changing Times

After many years of development, GTK 4 got released in December 2020. Libhandy was relying on GTK 3, and needed to be ported so applications depending on it could, in turn, be ported to GTK 4 and benefit from all its novelties.

Concurrently, a will grew in the GNOME community to have an official widgets library that would implement its human interface guidelines and that would be developed in close relationship with the GNOME design team, which is exactly the role Libhandy ended up filling over the years.

For these reasons, it was decided to change the role of the GTK 4 version of our library, making it not a library focused on mobile and adaptive platforms that accommodate GNOME, but a canonical implementation of GNOME’s human interface guidelines and visual language. In turn, GNOME would take adaptiveness from smartphones to desktops into account in its guidelines. To reflect this new role, it was decided to rebrand that library after Adwaita, GNOME’s design language brand already used for its stylesheet and icons set.

Enter Libadwaita

We are currently investing in and working on Libadwaita and have recently released its first alpha version. Its first stable version is planned to be released in September 2021 alongside GNOME 41, as it follows GNOME’s development schedule like all other core GNOME projects.

GTK 4 will allow us to make Libadwaita go way further than we ever could in Libhandy. Here are some demos of what we plan to bring to the library, with no estimated date for completion.

We want a modern and adaptive tabs overview for AdwTabView, it could be used for web browsers, terminal emulators… any application using modern tabs.

We would like to offer some degree of style customization to applications, beyond letting them load custom CSS files. With Libadwaita now hosting the Adwaita stylesheet and thanks to Alice simplifying it, we could bring some API to customize the stylesheet.

We could also offer some neat stylesheet transition animation.

Conclusion

To build the ethical and secure mobile platform we need, we invested heavily transforming and expanding over GNOME in many ways that benefit all its users. While what we have done has been immense, we still have many plans to continue to improve the whole ecosystem for smartphone and laptop users alike: it’s all just the start!