The Internet browser is the user’s vehicle to all online information. Whether we are checking email, managing accounts, facilitating business, or watching movies, without a browser we would be stuck.

Most of us do not give the browser the credit it deserves and this is probably because most of us are not really interested in our browser itself; we are instead interested in what our browser provides us.

Firefox brings us the best of what a browser has to offer the user. Here, you will not only find a vehicle for online information, you will also find a vehicle for personal interests.

Firefox creates personalized browser themes that are tailored to the individual user. There are a couple key things to keep in mind when creating and designing Firefox skins.

The Dimension of the Firefox Browser

First and foremost, you must know your motivation and identify your audience/end user. Firefox has the largest platform for themes and can support 200 pixels in height with versions 3.6 and below showing 85 pixels and Firefox 4.0 showing 110 pixels. Below, is the design template Brand Thunder uses for Firefox.

When designing a theme, it is important to know that only certain visual elements are going to be visible in the theme. For example, both the top and bottom of the screen are not going to be available visual space for the user and less than half of the image is going to be viewable. The horizontal size of the image is going to require some design work.

The width of the image is a shifting landscape and is 3000 pixels. When looking at a browser that is expanded at 1024 pixels next to a browser expanded at 1920 pixels, you will notice how very different the pixels are from the background perspective of the image.

Split images are less weighty than single images which slow down performance. A great way to get a fully styled background with less file weight is to use screened elements and tiled textures/partial images. You want the design to be minimal and clean and patterned backgrounds are a key ingredient for good design.

Image Placement for Firefox Themes

Simple backgrounds are best for creating Firefox personas and these are usually a single 3000×200 pixel image. Brand Thunder lets you surpass this in Firefox where the creation of Enhanced Personas is possible. Enhanced Personas enable a variety of CSS background traits and let you have more color control.

You can layer a background image with solids or tiles. Images can be stacked either left or right, with the left image layered above the right. Logos work well when they are square shaped and placed into the background of the design at 50px tall. Stay away from rectangles and wide images.

The move away from horizontal lines and horizontal design elements can be seen when looking at the old and new versions of the College Humor browser theme. College Humor’s original browser theme had both a wide logo and horizontal line. The most recent theme design by College Humor is cleaner and more efficient in that it uses the space wisely, and there are less alignment complications throughout the browser.

When creating a successful browser theme, it is important that designs do not depend on the exact placement of these horizontal elements.

Crucial design components should keep a small margin from the title-bar this way they will not get misplaced in the title bar.

Where to Begin

The browser theme will be utilized a great deal by the user and therefore should not be visually overpowering. The design needs to be minimal and clear, yet also bold enough to stand out from other elements within the design. There is obviously going to be a lot going on within the theme (tabs, URL bar, etc.) and the main design elements need to be strong yet subtle. Design should not too visually complicated for the viewer/user.

Browser design is an interesting and challenging endeavor and here are a couple of user-friendly wizards to get you started. For example, BT:Engage is a platform that is currently used in private beta that allows you to create your own browser themes. Below, are some helpful tutorial sites:

• BT:Engage: Firefox and IE theme creator
• Firefox: How to Create Your Own Persona for Firefox
• Firefox: Create and Host Your Own Personas Gallery with Personas Interactive





Author Bio:
Patrick Murphy is the founder and CEO of Brand Thunder (BT). You can follow him on Twitter @brandthunder or Facebook. The team at Brand Thunder creates persistent engagement between major brands and their online consumers with extreme makeovers for Internet browsers. BT’s new platform, BT:Engage, gives everyone the tools to build and share their own browser themes.