The browser is one of the most used applications on the computer, yet marketers sometimes overlook this platform for some of their marketing initiatives. The average web user is online 5 hours a day and might spend 2 minutes on your website.
But what if you could keep your fans in front of you the entire 5 hours they are online? This is now possible with the recent browser theme tool recently created by Brand Thunder, a company that has worked with some of the largest brands in the world to help increase fan engagement. Clients include: CBS Sports, Huffington Post, Bob Marley, The Daily Beast, NBA, NHL, NFL, College Humor, Looking For Group Comics, and many more.
If you like this article, you might be interested in some of our other articles on The Branding Potential of the Internet Browser, IE9 â€“ The Final Incarnation Of Internet Explorer, A Guide To Split Testing , and Applications of AIDA.
What does it mean exactly to create an interactive browser theme? A great example would be the theme they did for the news site The Huffington Post.
This theme has a simple design thatâ€™s easy on the eyes and yet keeps both The Huffington Post brand and content in front of those using the theme. According to The Huffington Post, this theme yielded some impressive results to the tune of an 8x increase in site visits from those using the browser! That means people who read The Huffington Post on average about 5 times per month were now visiting the site 40 times per month. Obviously, this custom browser thing has its perks. So how can you get in on the action?
Fortunately for those of you without the resources of a HuffPo, you donâ€™t have to hire a team to make a theme like this for you. You can create one yourself in minutes with BT:Engage, Brand Thunderâ€™s new browser theme tool. Hereâ€™s how…
Step One: Visit BT-Engage
Go to http://bt-engage.com and create an account. Then decide what sort of theme you want to create. For this tutorial weâ€™ve chosen: SloDive.com
Step Two: Create Theme
Click – â€œGet Startedâ€
Step Three: Select Browser
Select which browser you will be designing for. We will be sticking with Firefox but the steps should be extremely similar if not the same for both Firefox and IE.
Step Four: Choose a Background
Choose a background. Since we are designing a theme around the website www.SloDive.com, we are going to use the properties window to make the background black to match the look of the site. In the â€œPropertiesâ€ window, simple add the CMYK value for a black background, which is simply â€œ000000â€. Donâ€™t forget to name your theme here as well. In this case â€œSloDiveâ€.
Tip: Add a Custom Background
If you would like to use a custom designed background instead of just a standard background color, you can do this at this step as well. The recommendation here is to make your background image 3,000 pixels wide. Itâ€™s a good starting point if youâ€™re only using a single background image and want to ensure the background works for almost all monitor sizes. For BT:Engage themes, you may want to limit the height to 100 pixels. The theme creator currently re-sizes your background image to fit the height of the theme (about 100 pixels). So if you upload a 3,000 x 200 pixel background image, when it re-sizes to 100 pixels high, itâ€™ll also shorten the width to 1,500 pixels. Even Firefox recommends this type of guidance for their own personas design guidelines.
To upload your background image file, simply click on the â€œMy imagesâ€ tab and click â€œUpload Backgroundâ€. You will then be able to drag your background onto your theme to position it as you see fit:
Once you have added your background image, you can position the background where you would like on the browser. You can check â€œLock Aspect Ratioâ€, to retain resolution and your image quality.
Step Five: Add Your Logo
First youâ€™ll want to click on the â€œMy Imagesâ€ tab in the assets section at the bottom of the page. Next youâ€™ll need to upload the logo youâ€™re using from your computer. We simply went to the SloDive website, screen-captured the logo on the about page and uploaded that image. Many times you can simply â€œRight-Clickâ€ on your websiteâ€™s logo and save the logo on your desktop.
Once your logo image appears in the assets area, click on it and drag it over top of the theme youâ€™re creating. When you release the mouse button the image will be loaded and placed automatically. Adjust image size according to your personal taste, but be sure to click the â€œlock aspect ratioâ€ check box in your properties window just like you did for your background image, to retain resolution and your logo image quality.
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. Our suggestion is to stick with small, square logos, not wide ones. Pushing the navigation too far to the right creates problems for your browser users who are used to seeing the â€œBackâ€ button in a certain place.
Step Six: Link Your Logo To Your Website
You want people to visit your site regularly, right? After uploading your logo and aligning it where you desire, you can also add your website URL directing clickers of your logo to your homepage. In this instance, we will enter the link: http://SloDive.com
Step Seven: Choose Widgets
Choose some widgets that encourage the types of engagement youâ€™d like to see from those who will use this theme. Since SloDive has a feed, we are going to drag the RSS widget just underneath the search bar on the upper right side of the theme, and paste the SloDive RSS link into the properties window. Be sure to click â€œvalidateâ€ and then â€œsave.â€
You can add other widgets to the theme including social media accounts, popular pages on your website, or even products you have for sale.
Here is what the SloDive browser theme ended up looking like with the logo, background, RSS feed and widgets added.
Step Eight: Install & Share Your Theme!
Once youâ€™ve click the finish button at the top left hand corner, your theme will be built and youâ€™ll be taken to another page where you can download and install your theme for free. You can also share this page with others so they can use your theme as well.
Here is the theme download page: https://bt-engage.com/themes/hwgkp/Slo-Dive
More Browser Theme Examples:
Some other examples of themes developed using this tool include:
And some other examples of Interactive Browser themes:
The Tweet Theme: Twitter in your Browser:
The Weather Browser Theme: Get Your Local Weather Forecast: