It’s no wonder, Chrome is the current hotbed for designers to turn their creative attention. The Internet browser is the most frequently used application on a computer and Google Chrome is the fastest growing browser. Chrome has a minimalistic interface and boasts a variety of add-ons similar to Firefox, while attempting to maintain a smaller overhead and also integrating with other Google services.
Despite being the new browser on the block, there’s a lot of good information and tools available to get you into themes quickly. As you prepare for your Chrome theme journey, there are key design considerations and technical constraints to keep in mind when working with Chrome.
Here’s some of the key design decisions you’ll need to make if you design a Google Chrome browser theme.
Chrome is an open-source browser, but that doesn’t mean it’s a completely customizable solution. Even though Brand Thunder is the leader in custom browser themes, we haven’t rolled the interactive and visual component of our themes into a simple, single installation on Chrome like we offer for Firefox and Internet Explorer. The technical hurdles for integrative solutions are high despite the “openness” of the technology. For someone focused on purely visual elements, though, you can immediately dive into graphically reworking the browser.
When you look through the documentation, http://code.google.com/p/chromium/wiki/ThemeCreationGuide, there are more than 20 images and variables available to change. Don’t get overwhelmed. There are really just two things that need your focus. The rest of the variables are all supporting elements, colors and tints that you can leave alone and they’ll use the default setting or you can change to work seamlessly with your design. It’s all up to you.
This is the element most people think about when they think browser theme. It’s the visual element at the top of the browser where the URL address bar and navigation buttons reside. In Chrome, it’s downplayed. Google has taken a minimalist approach to the browser and it shows in the reduced real estate in the navigation and search area of the browser.
You get about 80 pixels high to work with and about 60 pixels visible to the user, and once three tabs are open you’ve covered about half the design. Challenging to say the least. Keep focused on the core elements that are the strength of your design. When Brand Thunder built the Chrome theme for the Miami Heat, the two elements of focus were the logo and the team’s home court.
Both of these elements are visible at a 1024 wide resolution, the lowest common denominator from a monitor resolution standpoint. It takes three tabs to encroach on the Heat logo and five to cover all elements. Left justification of the logo is not practical in Chrome as there are too many obstructions. And unlike Firefox, you can’t layer or anchor to different sides of the browser. It’s a single, repeating image that repeats along the x-axis. If your design was exactly 1024 pixels wide and someone’s monitor was set to 2048 pixels wide, they’d see the image twice.
Since we tend to work with brands so we plan for logos and predefined imagery, and generally use longer horizontal image. It’s important to pay attention to file size when you use these larger images. Smaller is better with 300kb being the upper end of the comfort range. You don’t want to negatively effect loading time of the theme and degrade the user’s experience.
An alternative design strategy is to take advantage of the pattern created by repeating a smaller image. Just remember it only repeats along the x-axis (horizontally). You still want the image to be at least 80 pixels high with a transparent fade at the bottom so the image blends with any frame color.
Theme_NTP_Background – New Tab Page
The New Tab Page is where Chrome lets designers have freer reign. It’s still a single image, but you’re working with a more normal-sized canvas. The minimum recommended size is 800×600 so you do have more space to work with, but you are still likely to deal with obstructions to your design.
The default setting for Chrome is to show thumbnail images of Most Visited sites on the New Tab Page. These will tile across the top two thirds of the New Tab Page. The most important elements need to be considered in light of this.
Brand Thunder tends to position the New Tab Page image bottom center to ensure key design features are present in the lower third of the design. That gives us the most space and visual impact for our clients. With your own designs, however, you cam justify the image in virtually any location on the page so you get the best layout for your own design.
You also have the opportunity to repeat your image on the New Tab Page. In this space you can repeat either along the x and y-axis. Giving you more freedom and options to experiment with repeating images.
While you do have more creative freedom on this page, you still don’t have any interactivity. Even the attribution logo placement is non-clickable, which is unfortunate.
You can see that while there are some constraints, there’s still quite a bit for the designer to leverage. And it’s an added boost of energy to work with something that is rapidly gaining market share.
If you’re now eager to get a start, the fastest method available today is to use this Chrome theme generator: http://www.chrometheme.net/chrome-theme-creator-online.html.
Once your themes are created you can find help for either publishing your themes to the Chrome Webstore or to self-host your own themes at the following locations:
Self-hosting or packaging the theme