Advertise here with BSA

The web browser is probably one of the most frequently used applications on a person’s computer. For designers and developers, a browser theme can be canvas that provides hours of exposure to the artist or brand willing to create a theme for their fan base.

But with such an extreme landscape orientation and a range of functional obstructions, designing browser themes is a creative endeavor with plenty of pitfalls and gotchas.

There are many things to consider when approaching a new theme — from avoiding copyrighted images to achieving designs that work within the confines of a particular browser.

This guide contains some crucial tips and general guidelines for designing custom browser themes for Chrome, Firefox and Internet Explorer.

Phoenix Suns browser theme is well balanced with imagery.

Key Considerations for Browser Theme Design

The trickiest part of designing browser themes is the variability of the environment. Keeping designs flexible enough to display well in Firefox and Internet Explorer across Linux, Mac and PC, and across different versions of the browsers is essential. For example, Firefox 4 and IE show part of the background graphics in the title bar while Firefox 3.6 and below do not.

Dimensions and Dealing with Environmental Variability

Firefox offers the greatest design flexibility especially in the browser chrome, which is the area where the navigation button and URL address bar is located as well as the areas outside of the browser viewport.

Firefox 3.6 browser chrome in Windows OS.

IE 9 browser in Windows OS. Compare the differences with the one above.

When we design a cross-browser theme, Firefox is the baseline from which the other designs evolve.

Below, you’ll see the Indianapolis Colts browser theme shows the diminishing design real estate from Firefox to IE to Chrome.

Colts Firefox browser theme.

Colts IE browser theme.

Colts Chrome browser theme.

The vertical footprint of the design is kept to a minimum. While 200px tall graphics are required for Firefox, the reality is that only the top 85 pixels are usually visible.

For Internet Explorer, the vertical dimension is locked at 50 pixels; and for Chrome, even less.

Designs that rely on the user being able to see the full image may not work as the top or bottom chrome will not always be visible.

The horizontal size of the image has its special 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 500 pixels compared to a browser opened at 1024 pixels will have completely different looks from the background image perspective.

Dimension guidelines for browser themes in our company. The total width of the image is 3000 pixels.

Using images that span the full background or a single element that occupies an entire space is one method to solve the problem, but may also lead to an overly large file size (and thus, a slower-performing theme).

Using Repeating Backgrounds

A method to ensure a fully styled background and lower file sizes entails using screened elements, tiled textures or partial images.

These patterned backgrounds can provide a simple elegance, reduced file sizes, greater flexibility, and potentially a more successful design.

Choosing Image File Formats

Choosing the right file format for your browser theme design is a similar process to deciding what format to use in web designs.

If the images need transparency, use .gif or .png format.

If they’re not transparent, use .jpg as the file format.

Animation

Animated components of the design are also available for Firefox and IE. This can be a nice enhancement (for example, in adding twinkling lights to a Christmas tree browser theme), but can easily be overdone. Keep animation to a minimum as it can be distracting to the user.

Firefox allows for animated GIFs or PNGs. IE can only display animated GIFs.

Dealing with Required Browser UI Components

Designers must bear in mind that there are specific elements that need to be visible when creating any design.

For example, in Microsoft Windows, the controls are in the upper right of browser. Chrome, Firefox and IE all have visual differences in tab opacity depending on if a tab is in focus or in background.

The visibility of the design behind navigation controls, address bar, and search boxes also varies across browsers and operating systems.

Old Comic browser theme is a fun concept with lots of legibility issues.

Keep It Simple and Avoid Visual Fatigue

Remember: the browser is used for hours a day and the user will have to look at the browser theme design every time they fire up their web browser.

Keeping the design pleasing to the eye is a vital criterion to avoiding visual fatigue and a lost user.

Dealing with the "New Tab" User Experience

Oftentimes, when designing a browser theme, the browser chrome should be the focus because that’s what the user is exposed to for hours at a time.

The "new tab" experience — the event where the user opens a blank tab or opens another browser window — however, also creates theme opportunities within the browser.

In the case of Google Chrome, this is the area least encumbered by restrictions. Rather than a blank page waiting for the user’s next URL, the new tab image can bring a design element to this area. An image is used in Chrome, and HTML in Firefox.

File size is again a consideration to keep the tab loading fast. The browser tab, more and more, has become increasingly functional; it’s become a holding place for new features like search boxes, thumbnail images, and dynamic counts (such as how many unread emails you have in Gmail).

We advise you to put the strength of your design at the bottom so the chance of it being obstructed is limited.

Porsche Panamera browser theme shows off the "new tab" experience.

Things to Avoid in Browser Theme Design

Now that you’re familiar with some general design considerations for creating browser themes, let’s take a look at some things you should avoid.

Browser Theme Logos That Are Too Wide

Firefox allows insertion of a logo to the left of the navigation buttons. Your logo can actually shift the entire browser navigational UI to the right.

Users, however, have a strong preference for the browser’s back button to stay where it is — call it "muscle memory" — and it creates frustration if the browser theme moves it too far from its original position. Keep logo width to a minimum.

Designs That Rely on Pixel-Perfect Placement

Designs that rely on the exact placement of vertical elements must be eliminated from consideration because of cross-browser platform variations. For example, background graphical elements can shift upward in some instances and create a conflict between the design and the browser layout.

Brown University browser theme needed a refresh to fix the misalignment in Firefox 4 created by the horizontal line.

Getting Started with Browser Theme Design

The browser theme offers you a great place to engage your online audience. For companies, it extends their brand to an application that’s widely used.

For designers, browser themes are a challenging place to show off design skills and their creativity in overcoming restrictions imposed by the environment.

Are you interested in getting started building your own custom browser theme? It’s easy to get started. Here are some resources to get you up and running.

• Chrome: Getting Started – Themes – Google Chrome Extensions
• Firefox: How to Create Personas (basic Firefox theming guide)
• Firefox: Create (and Host) Custom Personas
• Firefox and IE: BT:Engage (Design, build and share your own browser themes)

Related Content

• 10 Web Browsers You Probably Haven’t Heard Of
• The History of Web Browsers
• Performance Comparison of Major Web Browsers
• Related categories: Web Development and Resources

About the Author

Patrick Murphy is the founder and CEO of BrandThunder(BT). With its extreme makeovers for Internet browsers, BT creates persistent engagement between major brands and their online consumers. BT’s new platform, BT:Engage currently in private beta, gives everyone the tools to build and share their own browser themes.

At the end of the day, the quality of a web design can only really be measured quantitatively in the results it brings a site. As they say, results speak for themselves.

Being a web analyst for more than four years now and regularly working side-by-side with a designer, the biggest thing I have learned is Data identifies the problem and Design solves it.

This article looks at web design from a web analytics perspective. We will focus around the questions that a web designer should answer using metrics and tools to measure the impact and effectiveness of a web design.

Stages of Visitor Engagement

At any time, website visitors are in one of the following stages:

1. Attention
2. Interest
3. Desire
4. Action
5. Satisfaction

At each stage, a visitor has different expectations, and it’s the design that leads the way to making sure those expectations are met.

Designing for Grabbing Visitor Attention

Questions to ask: Does the design grab the attention of your visitors in just a few seconds? Does the design help visitors quickly find the information they are looking for?

While different approaches need to be applied to landing pages and inner pages of a website, one thing is sure: If you don’t manage to garner the user’s attention quickly, she is gone to the next website.

Headings are known to have a strong impact in grabbing user attention.

What to measure: Bounce rates and exit rates.

Solution: Most web analytics tools out there will tell you how many times you failed to grab the attention of your users.

Exit rates will tell you how many people left the website through a particular page, while bounce rates tell you how many people left the website without visiting a second page.

You can go a step further and measure the bounce rate as being the rate of people spending less than 10 seconds on your website. The more people are bouncing off your page, the less your design and content have helped them spot the information they were looking for.

Designing for Raising Visitor Interest

Questions to ask: Do visitors think they are in the right place? Can you convince them that the information on your website is (or might be) right for them?

If you manage to get the visitor interested in your site, he will spend more time reading and engaging with it. In such cases, design should make it really easy to scan, read and engage in interactive actions on a page.

How long does it take to read an article versus how much time do most visitors spend reading that article? For example, according to some sources, the average reading speed of college students is between 250 to 350 words per minute. If your article has 1,000 words, it could take between 2.8–4 minutes to read the article fully. If the average time on the article web page is only 5 seconds (in other words, only 4–8% of the time required to read the entire article), it means most of the content isn’t being read and isn’t engaging enough to keep the visitor’s interest. This problem can be pointing to web copy issues, design issues, or both.

Other examples: How many people click the Play button for a video, or check the other product images of a certain product? While content is what generates interest, design is what makes the content easy to spot and engage with.

Web analysts call these interactions and events micro conversions. The more such micro conversions happen, the larger the number of people that will eventually engage in buying, signing up or filling in a lead web form (macro conversions).

The way people interact with a website denotes their interest for what the website has to offer.

What to measure: Number of interactions with a design. Time spent on web pages.

Solution: One way to go about measuring how well web designs keep visitors interested is to dive into advanced features of Google Analytics by tracking events of every action that can be interpreted as the user becoming more interested in the web page (such as clicks, scrolls, comments, video plays or anything else you can think of).

You could also give ClickTale a try, a tool that records entire sessions of website visits and allows you to play them back. It can offer great insights about how visitors interact with a web page. Six Revisions uses ClickTale on the front page of the site.

Designing for Increasing Desire and Taking Action

Questions to ask: Does the design explicitly engage the imagination of your visitors and make them feel they will get value from what you’re offering? Do visitors click on the call-to-action buttons?

Every product or service out there on the web is unique, and it’s the web design’s job to point out what makes it different and why the visitor should choose this one instead of another.

If the design does its job well, the path to a user clicking on call-to-actions is a short one. In the very moment the user decides to sign up or buy the product, it’s crucial for the call to action to be within quick reach.

A heat map displaying mouse clicks on a call-to-action button.

What to measure: Call to action clicks.

Solution: Click-tracking offered by solutions like Crazy Egg will give you the answer about how people interact with your call-to-action buttons.

As for increasing visitors’ desire, multivariate testing and A/B split testing will help you test different designs and find the one that’s most effective.

Designing for Visitor Satisfaction

Question to ask: After they’ve clicked, does the next page satisfy your visitors by providing exactly what they wanted?

The design of what comes after the click is crucial for getting what site owners are looking for: a conversion. You have already managed to get the visitor’s attention, interest and desire so, from now on, design should only have two main roles.

The first role is making the conversion process as easy as possible (e.g. optimizing the checkout process and optimizing the web form submission process).

The other role of the web design is making sure that any question a user might have about the process is answered right there on the spot so that she doesn’t have to abandon the process to search the site looking for her answer.

It would truly be a pity to lose visitors at this stage because of a design flaw.

Funnels give a clear image on conversion success rates.

What to measure: Funnels and/or paths taken.

Solution: If you have the budget for it, I would go with Kissmetrics, MixPanel or Performable for tracking funnels and paths to conversion.

Otherwise, you can stick with Google Analytics goal- and funnel-tracking, or use PadiTrack, a free Google Analytics app for building funnels on the fly. (Disclosure: PadiTrack is developed by the company I work for).

Conclusion

In the end, what matters is the impact of every element of a website on reaching its goals. Data-driven, informed design, in all of its forms, has a strong say and quite a big responsibility when it comes to a website’s performance.

Related Content

• 10 Promising Free Web Analytics Tools
• 7 Incredibly Useful Tools for Evaluating a Web Design
• Search Analysis with Google Analytics
• Related categories: Web Design and Tools

About the Author

Claudiu Murariu is a web analyst and co-founder of PadiCode, a company building conversion optimization tools. Claudiu can be found on Twitter (as @padicode) and on his conversion optimization blog.