A Deeper Look at Custom Browser Theme Design and Creation

When it comes to frequently used computer programs, browsers lead the pack. It’s far more likely that a person will open their web browser and surf the Internet than do anything else on their personal computer. It makes sense when you think about it – to do anything online, you have to use a browser as your gateway.

In the past, that meant suffering with a boring, plain, utilitarian interface that lacked anything remotely personalized.

That’s no longer the case, though, as custom browser themes have made it possible to change the look and feel of almost any browser.

Designing and creating custom browser themes can be an excellent challenge for any designer, but it poses some significant hurdles that must be overcome. It’s not quite as simple as you might think, particularly if you’re interested in designing a theme that operates across multiple browsers (Firefox and IE, for instance).

Here are some vital considerations that you’ll need to make if you’re going to move forward with your design.

(Click for enlarged).

Browser Version and Operating System Implications

You cannot count on Internet users to make use of the latest version of any browser. Consider the fact that IE 6 is still one of the most widely used browsers out there, even though Microsoft recently released the 9th iteration and version 6 has some of the most common stability problems of any browser generation. The same rule applies for Firefox – users might be browsing with 3.5, rather than 4. The problem here is that different browser types and even different versions of the same browser use graphics in different ways.

You will also have to build in flexibility for different operating systems. There’s a reason that Mozilla releases specific versions of Firefox for use on Mac OS, Windows and Linux, and you’ll need to bear those same reasons in mind with your theme design.

This image is slightly dated, but is a good illustration of how Firefox 3.0 looked across different operating systems, in this case Vista, Linux, OS X and WinXP. The images are pulled from the Mozilla blog: http://blog.mozilla.com/faaborg/2008/05/14/firefox-3-themes/.

The Limitations of the Browser Chrome

One of the most important limitations that you will need to understand is that placed on the browser chrome, or the area of the browser dedicated to controls and functions. This is the area at the top, where you’ll find the search bar, address bar and other navigation tools, as well as the menu bar. It also includes all the areas that are not specifically devoted to showing the webpage being viewed.

When it comes to functional browser chrome, Firefox leads the industry. It is this reason that most designers begin by creating a theme for Firefox and then modifying it to meet the needs of other browsers. For example, IE is much more restricted in what can be done in the chrome area, so it needs a design modified to fit that lack of flexibility. Because of that, we’ll focus more heavily on how to create a lightweight Persona for Firefox. Personas are light themes that only change the colors and background image, leaving button design and location alone.

Header Image Creation

The header image of a Persona is the most visible aspect of the theme. You’ll need to ensure that your image has the right dimensions: 3000 pixels in width by 200 pixels in height is the optimum size for Firefox. You also need to make sure that the image is either a .png or .jpg – don’t use a .gif file. Finally, make sure that the images in your Persona are no larger than 300KB in total for the header image plus the footer image described below..

Here’s the Japanese Tattoo Persona image followed by how it’s reflected in Firefox 4.0. Only about half the image is displayed with Firefox’s default settings.


Footer Image Creation

The footer in Firefox is far smaller than the header, but just as important. Here, you’ll need to maintain the same width (3000 pixels), but you only need an image 100 pixels high. As before, use .png or .jpg formats. You’re also still limited to the total 300KB size requirement, so factor that in with the header image.

Testing Is Vital

Once you have created the header and footer, you’ll need to move on to the testing phase. Firefox allows you to do this on your own computer, without the need to upload it to an offsite server. You’ll have to have Firefox Personas extension installed in the browser, and you need to make sure that you can access the Personas menu – you want an offline Persona, which can be chosen from the preferences menu.

The testing process is essential to ensuring that your images work correctly with the user interface and don’t degrade the user experience. Images that are excessively busy can interfere with legibility of web addresses, search terms, tab titles and other core elements of using the browser. It’s also a vital consideration for cross-platform functionality. Firefox has a handy testing template built in that allows you to see how your design will look in different environments, and then make changes based on the results of your testing.

Going Beyond Personas

As mentioned, Personas are really just lightweight skins for your browser, like a wallpaper for your browser. For an example of a more robust interactive browser theme, look at the Colts theme below (this is the Firefox version of the theme):

Here, you can clearly see the custom menu options laid out below the standard back and forward navigation buttons. There is also a custom search box implemented in the theme’s design. Another thing that should be called out in the example above is the layering of the images shown in the browser chrome.

Achieving this level of design requires far more than what is needed to build a simple Persona. Rather than a single image, you are working with images that are anchored on either side of the browser and the left side will cover the right side and the browser window is made smaller.

Implications of Layered Images in a Theme

A number of restrictions apply to your use of header and background images in a full theme design. For instance, you must account for how your theme will appear in multiple screen resolutions. A monitor with a resolution of 1024×768 is going to display much like the screen shots shown above. A monitor with a resolution of 1920×1080 will appear to shrink your images like the image below shows. You’ll as also want to account for the gap that can appear between the two images when the browser window is very wide. Using a color from the design or a tiled image will make the gap seamless. Fading the images will smooth the transition to that background color and make the design cleaner at all resolutions.

Sometimes a single image that takes up the entire background of the browser is the preferred approach. In this scenario, you need to remember that larger images equate to larger file sizes. Large files can create browser performance issues, slowing things down considerably.

Hard Browser Requirements – UI Components

All browsers have hard requirements for inclusion in a theme, namely the UI components that allow the user to navigate through the browser and the Internet. This can pose an issue in theme design if you choose to use transparent tabs, as the level of transparency combined with your background image can make finding UI controls enormously difficult.

For those who find this challenge appealing, Google offers in-depth information about designing themes specifically for Chrome at http://code.google.com/chrome/extensions/themes.html. You can also learn more about designing custom and enhanced Personas for Firefox at  http://brandthunder.com/personas/explanation.php.

One Response

  1. Jeremy Bunks April 26, 2011

Leave a Comment!