Mimicking Native iOS Interfaces with HTML5 and CSS

Share on FacebookTweet about this on TwitterShare on LinkedIn

At Appboy, we’re constantly working to provide developers with tools to deliver an excellent experience for their users. As a result, we have to consider two target audiences and use cases for many of our product decisions: the developers that use Appboy in their apps, and their users. A great example of a case where we’ve designed for both developers and users is the implementation of Appboy’s theming feature.

Application Theming

The Appboy platform functions as an “app-within-an-app” that provides developers with a variety of tools for interacting with users. Certain actions and UI elements allow a user to “drop in” to Appboy and gain access to the additional features that we provide. Once inside of Appboy, users interact with our own custom UI. A common request that we heard from developers was the ability to white-label the Appboy interface. For certain apps, we found that the Appboy color scheme clashed with the host application’s theme, creating a jarring experience for users. Additionally, some developers felt that including our branding elements in their apps (for example, text saying “Appboy” that was originally overlaid on the app’s header bar) was confusing to users. This developer feedback led us to build our over the air Theming offering, allowing developers to customize their users’ experiences.

The Dashboard Interface

The original Appboy interface used the same aquamarine and black theme as this blog. An example of the original UI is below:

Original Appboy Interface

Currently, developers are able to customize the color of the Appboy buttons, the application header, the tabbed navigation, and the distinctive Appboy lightning bolt. These options allow developers to dramatically alter the branding of the Appboy UI without disrupting the application flow or functional layout of the interface. An example of a fully themed app is below. Throughout Appboy, the original color scheme has been replaced with the color scheme of the host app. Our overall goal is to provide users with an aesthetically pleasing experience that captures both the host app’s look and feel and our own Appboy experience.

Native UI:

Appboy Interface UI:

Allowing developers to style their apps can be a double-edged sword, however. Although the Appboy interface is embedded within our developers’ apps, we still feel a responsibility to have our interface look welcoming and appealing. Like giving your aunt Myrtle a karaoke mic after a few glasses of Merlot, giving developers the ability to drastically alter your interface with a keystrokes can be either a huge success or a debacle. To improve this process, we built a full theming demo on our dashboard using HTML5 and CSS to allow developers to preview their theming preferences.

iOS to Web

To create an efficient theming system, we designed a simple, sandboxed interface where developers could test out the look and feel of their app. By showing all of the styleable UI components in a single location, developers gain an accurate representation of how their themed app will appear in a holistic sense. We also included a CSS color picker widget to allow developers to more easily select the perfect color scheme for their app. To drive home the point of the demo, we also embed the theming demonstration in an image of an iPhone to provide a more immersive experience.

Pressing the “Preview” button from our demo automatically generates and applies new CSS rules to the appropriate DOM elements, instantly changing the interface to reflect the new color scheme selected. Coloring the buttons, tab controllers, and segmented controllers was a straightforward exercise, but coloring the header bar that runs across the top of iOS apps was more challenging. The iOS application header bar is usually colored with a gradient that produces a rounded, pseudo-3D effect. In addition to providing a visually appealing gradient, we also needed to superimpose the Appboy lightning bolt (which is also styleable) on top of the header itself.

Generating the lightning bolt was ultimately much more complex than we had anticipated. Not only did we need to arbitrarily color a non-rectangular geometric shape, but we needed to place it on top of a Canvas element that was also arbitrarily colored. We toyed with the idea of generating a colored lightning bolt image, but processing a new image on the server whenever a developer wanted to preview a new theme seemed unnecessarily complex. We also considered programmatically styling an alpha-only image using CSS, but this caused visual artifacts that bled over into our header bar.

Ultimately, we decided to bite the bullet and use HTML5 Canvas to programmatically draw exactly what we wanted on the header bar area. After creating the rounded bar gradient, we use the Canvas API to select the pixels in the area of the lightning bolt. When a developer presses the button to preview their theming options, we translate these pixels into an X-Y coordinate mapping and use parametric equations to identify the pixels that lie within the bolt. For example, the coordinates of a given pixel within the lightning bolt might need to obey the equations X > 2, Y > 10, and -3X + 20 > Y. We can then iterate over the selected pixels and selectively update the color of the pixels that compose the bolt itself. The overall effect is a visually appealing customizable lightning bolt. As a bonus, we now also use a variation of this real-world problem as an interview question.

Theming Results

Overall, theming has been a big success and is one of our most popular features. We’re currently working on expanding our theming options to include UI features such as fonts, enabling developers to customize their apps even further. If you have other ideas on ways to help us customize and improve our user (and developer!) experiences, please let us know!

Share this post

Share on FacebookTweet about this on TwitterShare on LinkedIn