How to Design for a Browser Theme

Over the past few weeks, we’ve covered a few topics relating to custom browser theme design, including A Deeper Look at Custom Browser Theme Design and Creation and Design Decisions for Google Chrome Browser Themes.  Also, if you’re lucky, there might still be an invite available from our giveaway: Giveaway: 25 Invites to BT-Engage Custom Browser Theme Creator

In this article, we’ll look at how to design for a browser theme, and how to deal with background images, logo placements, and resources where you can find out more.

If you’re looking for other web design resources, check out these posts:

Hope you find this article useful!

Browser themes have been around for years and so have the efforts to use the browser theme as a venue for artistic expression and affinity marketing. Here’s a flash back of what was once considered high art in the world of browser themes.

Now, you can have a browser theme that changes with your local weather conditions.

As the most-frequently used software on the computer, however, there’s more than a passing respect to the adage “form follows function.” Something used this heavily must remain functional for its intended purpose while striving for a more interesting form.

Browser Themes vs. Personas

Many browsers allow theme capabilities these days. For sake of this post, Firefox will be used as the example browser. There are also a few definitions that are useful to users not familiar with Firefox terminology. Outside of Firefox, the term “theme” is the equivalent of “skin” in that it changes the look of the browser.

In Firefox, however, a theme will often be a complete rework of the browser from the “skin” to the button design and more. It adds a lot of graphic requirements with each button having multiple states. One of the most popular themes on the Mozilla Add-ons site is Blue Fox and you can quickly see all the additional work that goes into a full theme.

Blue Fox

At the other end of the spectrum are Personas. Firefox introduced these as an add-on a couple years ago and then baked it into the browser starting with v3.6. Personas are lightweight themes that are easy to add and change. They are basically a large flat image that rests behind the rest of the browser interface. This example of the Sunset Over Water Persona shows a section of the full image as well as the Persona installed on Firefox 4.0. You can see how the image is cropped within the browser and how elements of the browser cover and must work within the background image.

Sunset Over Water

Brand Thunder offers its clients a hybrid of these approaches in the interactive browser themes it builds for its clients. The approach improves upon the limited creative freedom Personas allows, provides better efficiency than a full theme demands and integrates engagement which is in everyone’s business plans these days.

In this process, here is some of the valuable insight we’ve learned by living this everyday.

Designing for a Long and Narrow Canvas

In all cases you’re dealing with a hyper-horizontal image that is partially obscured by a range of obstructions beyond the confines of short height and very long width. To make it even more interesting, while 200 pixels tall graphics are required for Firefox, only the top 85 pixels are usually visible. And while you can generally count on the 85-pixel height being visible since the vast majority of users will keep the default settings, the horizontal pixel count is dependent on a number of variables. A user’s monitor can be set to resolutions of 1024 to 2560, and even if you know the resolution, the browser itself can be at any state depending on if the browser window is maximized or not. It’s like making a beautiful painting that’s a foot high and 15 feet wide, and then having to put it behind curtains and a moveable wall.

While the vertical footprint of the design is kept to a minimum, the horizontal size of the image has its own set of considerations as well. As a browser window is enlarged horizontally, the background images will shift. Designers must keep this in mind, as a browser opened at 1024 pixels compared to a browser opened at 1920 pixels will have completely different looks from the background image perspective.

Brand Thunder dimension guidelines for browser themes

The total width of the image is 3000 pixels. Personas use a single image but file size can be an issue depending on the quality of the image you want to present. Brand Thunder, in many cases, will use layered images in the design. One image will be anchored left and another right. We also can anchor additional images at different points within the browser theme. The layered image approach allows us to reduce file size and maintain a continuity of design regardless of browser resolution. The Lady Bug example below shows how a theme element, the ladybug, can maintain a relatively centered position regardless of browser width.

Another method to ensure a fully styled background, but less file-size weight, entails using screened elements, tiled textures or partial images. These patterned backgrounds can provide a simple elegance, lighter weight and potentially a more successful design. The example of the Black Crayon browser theme below shows a repeating pattern with a single, small crayon anchored to the right. If the images need transparency, use .gif or .png. If it’s not transparent, use .jpg.


Logo Placement for Browser Themes

Firefox allows insertion of a logo to the left of the navigation buttons. Your logo can actually shift the entire navigation area to the right. Users, however, have a strong preference for back button to stay where it is. We think of it as “muscle memory,” and it creates frustration for a user that keeps mis-clicking because the button has moved. However, there simply aren’t many places to insert an unencumbered placement, which can be important for a brand and its logo. We suggest keeping the logo width to a minimum.

When the Calgary Flames reworked their web site, the theme evolved to match. The first version below shows how the theme looked with the original design. The new site made use of a new font and the oversized “C.” If we had used “Flames” in the logo placement it would have pushed the browser navigation too far right. The updated theme eventually leveraged the oversized look of both the “C” and the “Flames.” Because of the visual weight of each graphic element, they have enough presence to lay behind the browser navigation.

Design Your Own Browser Theme

The browser theme is an interesting design challenge but can be rewarding through an engaged online audience and a challenging place to show off design skills. The easiest place to get started for Firefox and IE themes is with Brand Thunder’s private beta for its new platform, BT:Enage. But there are other options for Firefox, Chrome and Opera listed below, so get started now.

Firefox and IE: Join the Private Beta of BT:Engage to Build an Interactive Browser Theme
Chrome: Create a Chrome Browser Theme
Firefox: How to Create Your Own Persona for Firefox
Firefox: Create and Host Your Own Personas Gallery with Personas Interactive

Comments 2 Responses

  1. blueway June 17, 2011
  2. Satyadeo Thakur May 31, 2013

Leave a Comment!