Thin & Light

First I’d like to thank Ian for mentioning my widget colorer tool on the MyBlogLog Blog. It’s great encouragement for me. And thanks to the great guys who stumbled it.

As I discovered, hundreds of visitors came according to Google Analytics, but only less than 15 had a try. A failure? I think so. There is some problem with user experience or the tool itself is not very useful.

However I’m not too frustrated (Thanks again to the great people mentioned above). Today I added a widget to track the visitors, so finally the widget colorer got a recent readers widget of its own. It’s at the bottom of the page. Go now for a position on the widget

Of course it’s generated by the widget colorer itself. I used the handy Firefox extension called ColorZilla (highly recommended) to pick colors of the site for perfect match.

Still I want your feedbacks or suggestions to improve the poor user conversion rate. I’m ready for criticisms.

When you use a HTML link (”<a>” tag) to implement a drop-down list or menu, you’ll notice that there are annoying dotted borders around the link after it’s clicked in Firefox. We can just ignore this for most of the times but sometimes it affects the look and feel of the site. Two screen shots from Youtube and Yahoo!:

This can be even worse (Digg front page):

OK. This is fake . Digg did a perfect drop-down menu, though they’re ignoring something. I removed some CSS rules using Firebug and got this effect. It’s ugly, isn’t it?

The Cause

When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.

The Solution

To avoid the border, add this CSS rule to your page:

a {
outline: none;
}

This piece of code is similar to the code I removed from Digg to get the screen shot above.

In fact this is a common problem asked by many developers. For more information, search for “firefox link border“. Many authors wrote good articles on this topic.

Update - This can be seen on every WordPress blog login page (click to enlarge):

There was an article describing Google’s new move to promote recent web pages days ago. Today I tried a search right after I published the previous blog post and the result page surprised me.

“1 minute ago” - The new published post got indexed in less right after it’s pushed on the web! I’m using “Google XML Sitemaps” plugin to generate sitemaps. Maybe it’s the one who first told Google about the new post.

I’m not an enthusiast of SEO (the keywords are quite accurate), but this just gave me a surprise of how fast Google indexes new pages.

Maybe Google has always been indexing like that but I just didn’t noticed.

If you stumble a lot using Firefox, you must have already seen disordered user lists like this one (two blank seats in the second row):

This screen shot was taken from a page on StumbleUpon which received 35 reviews. StumbleUpon automatically finds out who’s living in the same city with you and places them in the beginning of the list. To make it more clear, StumbleUpon adds an “city” icon () in front of the user’s name.

Yes. This icon caused the mess of the list. Using Firebug to inspect the elements, I found the dimensions of the first two list items with city icon to be 145×89, whereas the other items in the list have dimensions of 145×88. This 1px difference, according to the CSS rule, made left-floating elements to be positioned on the right of them rather than under them.

In fact, just one more CSS rule will fix this issue:

div.listPeople dl {
line-height: 16px;
}

Another solution is to have “clear:both” style on each element starting a row.

This page looks OK in all other major browsers including IE 6, Opera 9.24 and Safari 3.0.4 as I tested. However market share of Firefox is growing steadily, so websites should pay enough attention on it. Besides, with the great power of Firebug, it’s much easier to develop a site for Firefox compared to the ancient browser - IE.

When I started to use MyBlogLog days ago, I thought it should have another widget generator besides the current one (http://www.mybloglog.com/buzz/community/[community name]/widgets/). The current widget customizer first give you a preview of color scheme but no layouts. When you’re satisfied with the colors, click the button and you’ll see the actual layout with the colors.

The problem is that a color scheme good for the default layout is not necessarily good for customized layouts. When you realized this and want to tweak the colors, you just can’t do this based on previous customization. Even you hit ‘Go back’ button of your browser, the color scheme is lost.

It’s more natural for users to choose a layout first and customize the colors based on the “real” layout.

Widget is critical for MyBlogLog. It won’t go far without providing the widgets for bloggers to put on their sidebars.

So I created the tool - MyBlogLog Widget Colorer.

Features

• Live preview of colors on real widget. You’ll get the *real* effect whenever you change a color (click to enlarge):

  

• Unrestricted colors. With the color picker you can choose any color available and there’s an input for hex color code, so you can make it exactly match your site theme. (I did this by editing the code by hand before )
• Quick adoption of user submitted themes. If you like a color theme listed in the right panel, use it with just one click. Also you can share your beautiful theme with others by clicking the show off button.

  

How to use

1. Go to MyBlogLog Widget Colorer.
2. Enter the mblID. It’s a 16-digit number assigned to your community by MyBlogLog. You can see it in the code provided by MyBlogLog:

   

3. Change the layout settings.
4. Click the “Customize Colors” to go to the next step. Here you can tweak the colors or directly use a color theme listed on the right. When you’re done, copy the code to use in your site. Don’t forget to show off your beautiful theme!

Beneath the scene

Thanks for mooRainbow - the great JavaScript color picker from w00fz. If you’re feeling great joy when selecting a color, thank him . This color picker is made with mootools JavaScript Framework. I had no experience with mootools before, but since it adopts the similar way with Prototype, it’s not too hard for me to use.

If this tool become popular, I may enhance it with more features like customization history, etc. Sadly there is still no API from MyBlogLog, though expected by many people.

Please leave a comment here if you have questions or suggestions