Archive for Design

The Benefits of Having Two Sidebars

Hey there! Welcome to Making the Web - my personal blog about website development. Feel free to subscribe to my RSS feed to keep up with the latest. Alternatively, subscribe by email. Hope you enjoy this article!

You may have noticed that I recently put an additional sidebar onto this website. But, you may not no the reason why. It's a very good reason, and you should think about how it applies to your website too.

Because I, like many bloggers, wanted to earn a decent amount of revenue from blogging, I placed advertisements (from Google AdSense) on to my blog. I placed these advertisements onto the sidebar, mainly because they would not interfere with the content (articles), and because they would be noticed.

But, to get a good click-through rate, I started moving the advertisements towards the top. The thing I did not think about then was how it affects the ability to navigate the site. And, it does affect it quite a lot. The whole navigation section is pushed down, and many important links pushed below the fold.

To overcome this problem, I was thinking about ways I could improve the ease of navigation, while, at the same time, getting a decent click-through rate from the adverts. My final solution was to add another sidebar…

…By adding another sidebar, I was able to place the most important navigational elements on to one of the sidebars, where they would not be broken up by adverts, were above the fold, and could be easily identified as a collection of navigational elements.

And, on the second sidebar, I put adverts and sponsored links, which also had the benefit of being higher on the page, which would probably increase the click-through rate.

So the two benefits are:

  • The user can more easily navigate the site, because the navigational elements are collected together; and
  • The advertisements are more noticeable, increasing the click-through rate, and increasing the advertising revenue.

If, on your site, you can not easily differentiate between the navigation section, the advertisements and sponsored links, and the other content, maybe you should consider implementing similar changes. I found this useful article on the internet which describes how to set up two sidebars in WordPress.

Comments (2)

Web Developers' 7 Must-Have Firefox Extensions

Firefox extensions allow you to add great tools to your browser. As a web developer, I've used extensions to assist in developing and testing my websites.

Here is my list of the must have Firefox extensions:

Firebug
This extension is by far my favourite. It allows you to edit pages live, identify JavaScript errors, debug, and more. Download

Web Developer
This adds a toolbar which allows you to disable JavaScript, add and view cookies, edit CSS, view response headers, validate the page, and more. Download

Screengrab!
This extension doesn't really help you develop your site, but it does allow you to save the entire page as an image, which may sometimes be useful. Download

IE Tab
IE Tab allows you to test you sites in Internet Explorer, without actually having to open the application up. Download

ColorZilla
ColorZilla allows you to get the colours from the page. Saves me alot of time, because I no longer have to copy the image into an application like Fireworks, then get the colour. Download

Tamper Data
This allows you to change headers and POST data, which is always useful. Download

Html Validator
Although the Web Developer toolbar allows you to validate pages, I recommend this extension because it shows you live the results of validation in the status bar. Download

If you have any other extensions which you like, feel free to leave a comment.

Comments (4)

Making the Web | Chalvedon School and Sixth Form College | Messenger History | GCSE(WIKI): Simple bitesize revision for secondary school, KS4 students. | Encrypt files for free - high-grade encryption
Who's Populating The Web?