Pop Star Justin Browser Theme
Image by brandthunder via Flickr

The most frequent comment we hear from users new to browser design is “it doesn’t look like it did in the preview” and that’s because 60% of the time it doesn’t. This post will explain why and what to do about it.

Key Definitions

I’ll admit, we’ve got a long way to go in terms of UI with our free browse theme creator, and some of the descriptors we use are based on our own history with the product. That may not be so helpful to you. We’ll get better. For now, here’s what you need to know.

Monitor/Browser Resolution

Brand Thunder’s theme creator, BT:Engage, gives you a canvas for designing your theme. That canvas is 1,280 pixels wide and about 40% of web browser are set to that width. The width of a browser window is determined by size and resolution potential of your monitor. A small netbook may only be 1,024 pixels wide, while an Apple 27″ Thunderbolt display has a resolution of 2,560 pixels. If you don’t have your browser maximized, you can really set it to any width. That’s one issue. If you’re in Firefox, you can get a feel for the different browser resolution quickly with the Firesizer Add-on. I use it regularly.

Anchor

Because the browser width can change (see Resolution discussion above) and we don’t stretch images (that’d be too weird), images will stay in place relative to one side or other of the browser. In the images below, Colts anchors left (it’s a logo) and the team photo anchors right (it’s a background). As the browser is made wider, the two images get farther apart. Hint: Always choose a background color. For a user with a really wide monitor, if the images end they’ll still have color between them.

Colts_narrow

Colts_wide

Logo Images

An image saved to Logo will always anchor to the left of the browser. In Firefox it will push all of the browser navigation to the right. It’s unobstructed, so you’ll see the full image which is important for many brands when it comes to their logo. However, stick with small, square logos, not wide ones. Pushing navigation too far to the right creates problems for your browser users who are used to the Back button being in a certain place.

Logo_Finesse

Hint: I’ve taken to adding a reflection to my logo images. Here’s why. Internet Explorer has less vertical space and your logo will get cropped. To get a usable logo in both Firefox and IE, I make sure I see enough of the logo in IE so that it feels complete, this can leave too small a logo in Firefox. The reflection fills in blank space and adds polish.

The example to the right shows both the Firefox and IE versions of a theme with a logo with reflection added.

Background Images

The background images anchor to the right and are always in the background, meaning any browser elements like address bar, navigation buttons, search boxes always float over the image. The image should be big enough to still be clear even with some of the image blocked. To make matters even more challenging, you have the visual differences between Firefox and IE, but you also have different looks in Firefox. Firefox allows users to set their tabs at either the top or the bottom of the other browser navigation. This can have a dramatic effect on image you’ve selected.

The example below shows how the Crimson Tide text looks great in Firefox, without an RSS feed reader. If you have a feed reader, and I suggest you include one, it would cover that text. You’ll also want to preview the IE version to make sure you get the look you want for both themes.

Alabama Crimson Tide Browser Theme

Suggestion: I typically optimize for the current version of the browser, which is tabs on top for Firefox 5, but you should take a look at your web metrics. Google Analytics, or whatever reporting system you use, will give you a report of browser type being used by your audience. Optimize for that. If your user base changes, you can update your background image and it’ll refresh to your users the next time they launch their browser. (Pretty cool, eh?)

Vertical Dimensions

You’ll also need to consider the vertical space of the browsers. Firefox can support 200 pixels in height with versions 3.6 and below showing 85 pixels and Firefox 4.0 showing 110 pixels. However, this can change depending on what toolbars the user has showing – Bookmarks toolbar or others all add to the vertical height and expose more of your background images. Internet Explorer shows only 50 pixels, so you’ve got to make the most of that space.

Here’s a helpful resource if you want to see our own browser theme design specifications.

In Summary:

This is a lot of information to say there will never be one view for your browser theme. It all changes depending on user, system, hardware and more. The great news is you can update your themes easily and at any time. Try to address the needs of you largest percentage of users. As those numbers change, you can quickly adjust your theme to meet the new profile.

Play with it, explore, experiment and have fun!

Enhanced by Zemanta

Leave a Reply

Your email address will not be published. Required fields are marked *