I use iGoogle as my browser’s home page. I have 45 gadgets/feeds on a single tab (many of which are gadgets I’ve written) that pull in information from all around the web and iGoogle presents it to me in a single place. It’s extremely efficient and allows me to monitor a lot of sites and news feeds without navigating through bookmarks or having multiple tabs open.

But with that much information on a single page, doesn’t the screen become unusable? Too crowded and hard to see? No!

I’m going to show you two ways to optimize iGoogle and clean up your cluttered screen. This will allow you to put more content in a single place, and not become overwhelmed with things you have already seen or don’t want to see. We’re going to clean up the iGoogle user interface to make it more efficient and usable for you.

First, take a look at the default iGoogle layout with a bunch of RSS feeds added (click images for a full-sized view):

Optimization #1: Stylish

This Firefox add-on lets you write custom CSS rules that get applied to specified url’s. Since Google took away the ability for gadget authors to inline styles and affect the screen’s layout, there are no longer “skin” gadgets that let you remove the search box, collapse whitespace, etc. The Stylish extension lets you go in and do that the “harder” way. Unfortunately it will only work in Firefox.

To add this add-on and clean up your page, do the following:

1. Download the Stylish add-on and install it in Firefox
2. Apply my style by visiting http://userstyles.org/styles/12291 and clicking “Load into Stylish”
3. Visit iGoogle to view your improved layout

The style’s CSS in Stylish is as follows:

After installing Stylish and applying this style, the screen above now looks like this:

It now easily fits on one page with no scrolling. Much better already!

Optimization #2: RSS Feed Customizer Gadget

Many peoples’ iGoogle pages have a large number of RSS feeds. Unfortunately, the built-in functionality in iGoogle to handle RSS feeds is pretty lame, in my opinion. So I built my RSS Feed Customizer gadget to automatically take all the RSS feeds on your page and make them look better and add more functionality.

Step 1: Install my RSS Feed Customizer gadget

Go here and click “Add it now” to add the gadget to your iGoogle page. Then return to your iGoogle home.

Step 2: Inline it

Once it is installed it will show up on your iGoogle page with the message below. You must click the “OK” link in the text to allow the gadget to interact (aka “fix”) your page.

Once you have done this, your page will be magically transformed! It already looks better. You get:

• Icons before stories
• More readable headlines
• Highlighting on mouse-over
• Right-clicking a headline shows you the summary
• A “refresh” button at the top right of each feed to trigger a reload
• And more! (we’ll get to that…)

Step 3: Customize General Options

If you go to the “Edit Settings” for your newly-installed RSS Feed Customizer gadget, you’ll see the following options:

Here you can customize how your feeds will be display by changing some of the options:

• Default Item Bullet: The site favicon looks most colorful, but maybe you want a dot or an arrow
• Link CSS: turns of underlining, etc by default, but you can change it
• Item Format: defines how each headline will be displayed. If you’re an advanced user, you can tweak this however you wish.
• Default Refresh Interval: Now you can make your feeds refresh more often!
• New Window: Self-explanatory, no?
• Alt Row Bg Color: Set alternating row colors to match your screen or theme
• Rewrite Google Urls: If your feed comes from Google News, this will make the links go directly to the source of the story rather than the google.com redirect url
• Message: Leave this blank, it’s kind of a dumb option
• Disable: Don’t check here or the gadget will be disabled! This is mainly for testing or debugging problems.
• Hide Feeds With No New Items: This isn’t checked by default, but you’ll probably want to check it after you read a little further…
• The rest: Don’t change the rest of the options!

Step 4: Minimize the RSS Gadget

Now that the RSS Feed Customizer gadget is loaded and doing its job, you can minimize it and even drag it to the lower right of your page if you wish. Get it out of the way. Unfortunately, it has to stay visible on your page, even if in minimized form. Here’s our screen with the RSS Gadget minimized and moved to the bottom right:

Step 5: Customize Individual Feed Options

In the title bar of each RSS feed, you now have a “?” button. Click it to customize settings for the individual feed:

Here you can edit the options that will apply only to a specific RSS feed.

• Title: Over-ride the default title taken from the feed to something more meaningful for you. Sometimes feeds don’t even have titles, and by default iGoogle leaves the gadget’s title bar empty. Not good!
• Num Items: Here you can specify how many title to retrieve, from 1-100.
• Refresh Interval: If you have a feed that updates often, or maybe one that you know updates once a day, you can control the refresh interval here so your data always stays current.
• Avoid Caching: If set to Yes, a random string will be added to the feed’s url to retrieve. This will avoid the Google Cache and always return you fresh results
• Item Bullet: Here you can over-ride the default settings for a given gadget

As soon as you change the values and click Close, the changes are saved. You can use the Refresh button at the top of the gadget to see your changes in effect!

After we customize all our gadgets to show more headlines (more input!) we have lots to read and a full screen again!

We obviously need a way to clean up the screen. This is all about optimizing and cleaning up clutter, right?

Step 6: Mark Feeds as Read

Okay, here’s where the fun begins. With the RSS Feed Customizer gadget, you can mark feeds as “read”, meaning you have scanned all the headlines and are done with them. Why continue to display headlines that you’ve already read or don’t want to read? Hide them!

In the title bar of each feed is a “clear” button. Clicking it instantly marks the feed as read, clears the titles, then refreshes the feed to check for new items. If we “clear” every feed on our page, look at what we have left!

Ah, much better! But what happens when a new story comes in? When a feed refreshes and a new item is detected, it will expand itself so you can see the new headline:

So our screen has gone from cluttered to mostly empty. Imagine how many other useful gadgets we could now fit on the screen without having to scroll or switch between tabs!

But can we do better?

Step 7: Hide Feeds With No New Items

Remember the “Hide Feeds With No New Items” option in the RSS Feed Customizer gadget options? When it’s checked, any feed that has no items to read will completely disappear! So it doesn’t take up any screen real estate at all. Especially if you have feeds that don’t update often, you can add 10, 20, 30 feeds and not have them take up any room on your page. Now that is clean and efficient.

Here’s our screen after enabling that option:

Wow! No need to scan the screen for things you haven’t read, because when they come in they will pop their containers open and become visible. No need to scroll your page or switch tabs. No need to worry about having too much information overwhelm you.

Your iGoogle page is optimized, uncluttered, and efficient!

Example: My iGoogle Page

As an example, here is a snapshot of my actual iGoogle screen at a random moment. Like I said earlier, I have over 45 gadgets and RSS feeds on my page. Yet most of the time, it’s mostly blank. As feed items pop in I can take a look and clear it. My goal is usually to keep my screen fairly empty. That frees me up to concentrate on other things, since I don’t have to check web sites or scan 30 boxes of RSS feeds.

Conclusion

I hope this was a clear walk-thru that makes your iGoogle experience more efficient and allows you to start concentrating on the information you want to read rather worrying about the UI you use to retrieve it!

Happy iGoogling!