Branding is a promise. It’s a guarantee of what to expect and a derivation of an identity. Here at AgileBits, we have strong brand identity and our customers can immediately recognize our app, no matter the platform on which they see it. As a recent addition to the AgileBits family, working on the latest addition to the 1Password application family, one of my priorities has been to ensure our new app feels like 1Password. But this, like so many other things, is easier said than done.
At first blush (and second, and third, and…), Windows Modern applications look nothing like apps on Mac, iOS, Android or any other platform; right out of the gate, we had our work cut out for us and we had to decide how to balance the unique Windows Modern style with what has come to be recognized as the 1Password style. In the end, we decided to keep the Windows Modern app as true to the 1Password style as possible. Despite having to deal with an overly verbose pattern for overriding the style template (in some cases 100 lines of code just to change a single property for a button) we continued to customize nearly every area of the app; when the dust had finally settled, our shared stylesheet (for phone and desktop) was the largest single file in our entire project (~1200 lines of code).
But we were able to stay true to the 1Password brand, as evident in our lock screen:
So it was well worth the effort, and we certainly learned a few new tricks along the way! But styling with such reckless abandon does have a cost.
There will be blood (and hacks)
Issues first began to arise when we started testing theme-switching for Windows Phone. Windows Phone gives users the ability to switch between a dark and a light theme. This is a hallmark feature of Windows Phone and one that users have come to expect. But of course, this feature is only available on Windows Phone; the iOS and Android platforms don’t have this capability by default, which added a new wrinkle: do we introduce a feature on Windows Phone that is not available on our other mobile platforms? We also noticed very poor performance with accessibility features when using high-contrast themes, and ease-of-access font scaling had a very low ceiling before the majority of text was cut off.
Why did we perform so poorly? In part, it was because of all the customization we had done. We became so focused on achieving the 1Password look and feel that we customized nearly everything, including many things that we never needed to touch. We also used the RequestedTheme property heavily, which allowed us to force a page to always render in a specific theme; this is a big no-no for a universal app. But more than anything else, it’s how the platform handles custom styles. The moment you create a custom style, you’re entirely accountable for it: you must tell it exactly how to behave under every single scenario a user may throw at you; and on the Windows Modern platform, there are a lot of possible scenarios. There are two default themes for Windows Phone (and two other high-contrast themes), and Windows desktop has the default theme (not light, not dark, just right) along with four other high-contrast themes. Yep, that’s eight themes developers need to support when they choose to add some of their own styling and branding to their apps. The moment you decide to change a background colour, adjust a font’s opacity, or change letter spacing, you’re abandoned by the Windows app platform, and left to your own devices. This desertion isn’t too much of an issue for developers working primarily on Windows modern, as the support the platform gives you to handle all of these scenarios right out of the box is excellent. But it’s an unfeasible expectation for Windows to extend this support to developers who customize their apps so heavily, so we got to work and began getting our stylesheets under control.
The taming of the shrew
After all of our customization, we had to take a step back and see how we could make 1Password work with the Windows Modern ecosystem, instead of against it.
We had no desire to rewrite all of the styles and themes that Microsoft had given us for free with the operating system. The code was ready and available; all we had to do was let the platform do its work without losing our brand in the platform.
Our first order of business was getting our stylesheets under control. We went through the entire app, page by page, and removed any properties we could live without, thereby giving responsibility back to Windows. We then rebuilt support for all the missing themes by first including them explicitly in our stylesheets, and only overriding the system colors in the default or base theme; for high contrast and light/dark themes, we once again passed responsibility back to Windows.
Prior to coming to work at AgileBits, I gained a lot of experience working on web accessibility for the Canadian Government, and we often discussed how different platforms handled accessibility. On the Mac, instead of separate themes, users are given sliders in the OS preferences to adjust contrast and invert colours when necessary. Keeping these preferences at the OS level takes a lot of the responsibility away from app developers. While it can seem a bit daunting to oversee eight themes (at least) on Windows, the aesthetic and practical usefulness of these themes cannot be denied. For example, users can create custom themes that can be saved to their profile and be made available on the different PCs they use. Also, these themes being predefined make selecting appropriate themes much easier for users.
Branding is a promise. This is our endless waltz, and we cannot fail our dance partners. It’s a delicate balance that we must strike between Windows Modern and the 1Password experience, so that we may engender harmony among 1Password and Windows users.