Last Updated on February 28, 2024
The Internet browser, long the workhorse of the computer, had the visual appeal of a mule. Today’s browsers offer such flexibility that no one needs to live with an ugly browser again. Plus, with the adoption of “app marketplaces” across smart phones, tablets and browsers it’s lowered barriers and increased the rate of sampling by users.
That increases the challenges to designers. Whether you are offering a design for aesthetic purposes or to help a brand connect to the consumer, you’ve got to find the visual connection with the user to keep them in the theme.
The following explores some of the options and considerations for the browser theme or “skin.”
Where You Can Theme
Firefox Themes and Personas:
Firefox offers theme options within its Add-ons site (http://addons.mozilla.org/themes) and through it’s native Personas extension. A Firefox theme skins the entire browser plus offers new navigation buttons and other style elements. A Persona, by contrast, is a light theme where only the image in the browser chrome and background to browser tabs are changes. The functional elements in the browser remain unchanged.
Google Chrome Themes:
While Google Chrome offers theme capabilities, the user interface minimizes the navigation area of the browser and therefore the more persistent areas of the browser theme. The new tab is where themes for Google Chrome shine. Google utilizes the full page for the visual experience but also includes tile-sized images of most frequently used web sites. The theme designs must work around this grid of sites.
Internet Explorer:
Internet Explorer does not allow themes without third-party software to bring that functionality. Brand Thunder is the only provider offering a platform, BT:Engage, to designers and developers to create and distribute their own IE browser themes.
Opera:
Opera has extensive theme capabilities allowing designers to customize its look and feel by altering the images that comprise the buttons, toolbars, backgrounds, and other visual elements in the browser.
Where You Can’t Theme
Safari:
Safari does not support themes natively, and its low market share makes it a hard to image third parties will work to bring that functionality to the browser.
What to Consider When You Theme
Browser Dimensions:
The general starting point is a horizontal image of 3,000 pixels wide by 200 pixels high. Only in rare instances will the entire image be shown. Each browser has an area of focus where you’ll need to make sure key information is conveyed.
Firefox supports the 200 pixels in height, but in versions 3.6 and below you’ll usually see 85 pixels, in Firefox 4.0 you’ll see 110 pixels. Internet Explorer can do no more than 50 pixels. Chrome has the most minimal options. Firefox makes a good benchmark for design and then base other designs off of that. Brand Thunder uses the design template below.
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.
File Size:
Larger files load slower and can degrade the user experience. Using screened elements, tiled textures or partial images is one 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 starting with the 3000 x 200 pixel image, focus the design in the upper right of the image in about 1,000 x 85 pixels. With that focus, you’ll know the Firefox user has a good experience. For IE, it’s not a huge difference to make sure the design works well in a 50 pixel high view. It also functions as a good starting point for a Chrome theme, though you’ll have to reorient your image anchors.
Firefox justifies the theme image to the upper right of the browser, whereas Chrome left justifies the image. This means as a user drags the browser window wider, Firefox will expose more of your design to the left. On Chrome, it will expand on the right.
New Tab
Chrome pushes most of the design freedom to the new tab page. A flat image is used in Chrome. File size is still a consideration to keep the tab load time fast. Put the strength of your design at the bottom, so the chance of it being obstructed by the features on this page is limited.
Titlebar
Background images may appear in the titlebar on Windows browsers (see screenshot below). Important elements should maintain a slight margin from the titlebar so that they won’t get lost in the titlebar.
Testing
Once the design is done, don’t ignore the important step of going through different OSs and browsers to make sure design integrity is maintained. The image below is old, 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 differences today are more pronounced with tabs on top of the navigation bar for Firefox 4.0 and below for Firefox version 3.6 and under.
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.
Look at your web analytics before you get started as well. You’ll find the browsers that your audience is using most, and you can focus your efforts on the most important for your community. With that information in hand, you can get started 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
Please don’t forget to subscribe to the RSS-feed and follow Inspirationfeed on Twitter + Facebook (100% Spam Free!) If you enjoyed the following article we humbly ask you to help us spread the word by sharing this article with your peers!