When you come right down to it, the humble web browser is the most frequently used piece of software in the world. It’s used for everything, from checking your bank balance online to interacting on today’s social networks. However, you’ll find that most browsers are also immensely boring. They lack style and color – a monochromatic browsing experience is just not fun.
Changing that experience for something a bit more personal is possible. Creating custom browser themes is perhaps the best way to achieve personalization and enhanced usability within your choice of browser. Four of the top five browsers used today (Internet Explorer, Firefox, Chrome and Opera) support the development and installation of custom themes.
If you’re going to dive into theme creation, it helps to know your motivations and audience. If it’s a creative endeavor for the sake of the design challenge, then design for the browser you use and reap the rewards of your efforts. If you’re designing on behalf of a client, like we are, then you have the ultimate end user you’ll need to satisfy as well.
We found it necessary to tailor our offering toward Firefox and IE to reach the widest audience possible. We’re now adding Chrome to the product suite given its rapid adoption. For commercial purposes, specializing in a single browser may be too limiting. Our sales efforts were much harder in our early days when we had a Firefox only solution. Chrome generates a lot of buzz in the tech community, but if you’re developing for a mainstream brand, Chrome’s 11.5% market share isn’t going to be too exciting. It does help to know the audience of your client. If they skew more heavily toward one browser theme versus another, then your offering can be more focused.
Browser Dimensions
You’ll also need to consider the browser dimensions. Firefox offers the largest footprint for themes, and Chrome offers the least, with IE coming in square in the middle. Firefox can support 200 pixels in height with versions 3.6 and below showing 85 pixels and Firefox 4.0 showing 110 pixels. Internet Explorer can do no more than 50 pixels. Chrome has the most minimal options. For our own work, we use Firefox as the benchmark design and base other designs off of that. Below is the design template we use.
Designs that rely on the user being able to see the full image may not work as the top or bottom will not always be visible. As seen in the template, less than half of the image will be seen in most cases. It’s important to keep the key visual elements within that space.
The horizontal size of the image has its own set of challenges. The total width of the image is 3000 pixels, but it’s a moving landscape. A browser opened at 1024 pixels compared to a browser opened at 1920 pixels will have completely different looks from the background image perspective.
Looking at the Daytona International Speedway browser theme shows how Brand Thunder uses layered images in the design. In this case, the Speedway logo and track image make the core of the design. The track is faded to allow a graceful transition for wider browsers, and the bottom layer is an official color that represents DIS and the Daytona 500 race. This split image has the added advantage of lighter weight. A single image would be a much larger file size and can have a performance impact.
Using screened elements, tiled textures or partial images is another way to get a fully styled background with less file-size weight. These patterned backgrounds can provide a simple elegance, lighter weight and potentially a more successful design.
Image Placement Within the Theme
If you’re developing a Firefox Persona or a Google Chrome theme, you’re most likely dealing with a simple background image. A Persona is, for the most part, a single 3000×200 pixel image.
Chrome offers a few more elements, but is fairly restricted in their use. You have the Theme Frame, which will host your image and can be tiled. The Theme Tab Background and Theme Toolbar are both color choices that extend through the tabs, new tab and browser navigation elements. All three elements can be tiled and are aligned to the left only. Given the narrow nature of the Chrome navigation area and the limits to placement, it’s hard to have a strong visual theme within Chrome.
Chrome pushes most of the design freedom to the new tab page. Rather than a blank page waiting for the user’s next URL, the new tab image brings design to this area. A flat image is used in Chrome. File size is again a consideration to keep the tab load fast. The tab is becoming a holding place for new features like a search box or thumbnail images. Put the strength of your design at the bottom, so the chance of it being obstructed is limited. See the example of the Happy Snow Bear theme where minimal information is in the browser chrome, and most resides low on the new tab so not to be encumbered by information loaded on the tab.
If you look at some of Brand Thunder’s tools, you can go beyond these limits in Firefox and also, to a lesser extent, in IE. For Firefox, our Personas Interactive extension allows you to create Enhanced Personas. Enhanced Personas allow for a full range of CSS background attributes to be applied to the background, as well as providing more control over color.
Background images can tiled, solid and layered. You can align images left or right, with the left image layered above the right image. Logos can be placed to the left of the browser, but as browser platforms are being updated, we’ve found that logos work best as a background image, incorporated into the overall background design. If a logo is used on the left, it should be sized at approx. 50 px tall and be as square shaped as possible. Wide, rectangular logos won’t work.
Designs also should not rely on the exact placement of horizontal lines or horizontal design elements. Background images may shift up or down slightly depending on user browser settings.
The old and new versions of the CollegeHumor browser theme show the evolution away from both design points. The older, original browser theme had both a wide logo and horizontal line. The newer design makes better use of space and has less alignment issues across the various browser and OS versions.
Background images may appear in the title-bar on Windows browsers (see screenshot below). Important elements should maintain a slight margin from the title-bar so that they won’t get lost in the title-bar.
Get Started
As a heavily used application, the browser theme can’t be overwhelming or it will turn off the user and they’ll turn off the theme. Yet the design has to be bold enough to stand up amidst the browser elements that are obscuring the design. We’ve found that bold over busy works better. Strong line and image have enough presence to maintain their visual integrity despite being covered to an extent by tabs, URL bar and the like.
It’ll be a fun and challenging experience when you dive into it. If you want to get started now, there are simple wizards like our BT:Engage platform currently in private beta. You can also go into deeper details with specific browser themes via the tutorial sites listed below:
• BT:Engage: Firefox and IE theme creator →
• 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 →
• Opera: Opera Skins Tutorial →
