Widget Makeover Project

Transforming a plain-Jane wallflower widget into a thing of beauty….

I know some of you will read this and think, “Widget makeover?” Who is worried about widget makeovers when I haven’t even got a handle on this widget thing-a-ma-jiggy in the first place?”

Ah yes. But that’s why I’m here. By sharing with you my angst and dissatisfaction you too will see the holes and quite possibly leapfrog up to a much higher creative level.  Nitpicking and seeing where some things miss the mark, and could be so much better, is a skill I’ve honed admirably over the years. It’s second nature to me, and many creative directors and designers, to poke at things and say,“Well, yes it’s good¦ but if you just changed this, this and that — oh it could be so much better!”

This desire for the best touches all aspects of my life¦ I routinely drive my partner/husband nutty by sending back food or wine in restaurants. But, hey I figure I’m doing them a favor. You know what they say… That your most critical customers are your best; Because they care enough to complain in the hopes of making things better.

BEFORE: THE DULL REALITY

So, onto this exciting Widget Makeover. In June we showcased 4 creative content sites we produce as a lineup of four widgets. I thought it was fun using a new toy to push content out there for viewers to see and interact with. No longer would people go to our website and wonder,“What is the James Gang up to these days. It’s obvious. No surfing or drilling required. Right there, plain as day, in your face what we are up to. The widget line-up achieved that goal.

But then… Dissatisfaction took hold. A tiny doubt was tickling my consciousness that maybe some of our widgets were handsomer than others¦ I looked at our row of widgets with a cold, critical eye. And one was falling short, sadly. I almost zapped it immediately, but I steadied my delete finger and pondered the big question. “Why is the Franke James environmental widget lacking? Why am I unhappy with it?

I didn’t have to think too hard before I realized the drastic disconnect between the intensely visual site content and this sterile little widget. It could be an accountant’s site! Scroll back up there and see if you agree that my widget was desperately in need of a Makeover.

See? Just RSS text on a white background. Basic. Boring. Blah! The site is so much more exciting and so much more visual than this widget is making it out to be. And that little icon logo up at the top is just too inconsequential to matter. Indeed, when I compared it to our Verbotomy widget, (see on the right) which my programming partner Bill James had made, it paled in comparison. Mine was a plain-jane wallflower in the world of widgets. And that is not what the site is about.

I was suffering from a self-image disorder… I could not stand the reflection! I had to have my own visual widget. But how and where? Well, I didn’t want to just copy my partner so I researched some alternative visual widgets.

Did you know that Slide.com is the most popular widget site on the web? comScore has just launched a new service to track widget traffic. Photo-based widgets aimed at personal bloggers and social networking sites are the leaders in the widget world. A quick glance at their results, shows that Slide.com totally whipped their competitors with 117 million users in April alone. RockYou.com came in second with its slick widget that allows you to add music, motion and photos. These fun toys are helping both sites to grow rapidly and attract huge audiences. Interestingly widget penetration is highest in North America, where 40% of users visited a site which featured widgets.

Now a reality check here… Although big players like AOL icons Ted Leonsis, Steve Case and Miles Gilburne, as well as venture capital money is flooding into the space, nobody has figured out how to directly monetize the widgets (except perhaps designers and ad agencies who can create viral widget ad campaigns). As we know, cool widgets are excellent at spreading the buzz and building communities quickly — so if you can monetize the traffic you’re happy.

But Slide.com’s nifty widgets didn’t do it for me. Pictured below are two samples of www.frankejames.com widgets made using Slide.com (smaller than actual size).

While they are both dazzlingly handsome widgets, (if I do say so myself) I worry about hogging so much CPU and slowing down people’s computers… The spinning cube one is undeniably cool but does it communicate the message of each post better for the spin? I think not. Now, if I was speaking to Slide.com’s Marketing managers I’m sure he/she would be having apoplectic fits and yelling at me, “You’re not our target market! Slide widgets aren’t meant to be used this way and certainly not for RSS! They are for personal blogs, and social networking sites like Bebo.com where everybody is sharing their coolest photos.”

And of course, I’d have to agree with them. Me using them is just Wrong, Wrong, Wrong! But it was fun to experiment and see what they could do. And I never like being told I can’t do something, so I may just find a use for them.

I returned to lusting after the visual www.Verbotomy.com widget. I wanted one too — badly. So, I asked Bill, “How do you put a picture in the widget? Is this something I can do using Springwidgets or do I need Widgetbox?”

Like many programmers do, Bill rolled his eyes and cloaked his knowledge in secret-programming-speak muttering something about php, and databases pulling single pages, and complex widget schedules. My eyes glazed over but not before I asked him to please make me one.

BEFORE AND AFTER: THE REVEAL

BEFORE

Get this widget!

AFTER

The Makeover was a success. The widget is bouncier and more vibrant than ever and it didn’t hurt a bit… On the left you can see the plain-Jane ‘BEFORE’ version, and on the right, the ‘AFTER’ widget made using Widgetbox (both are live and plugged into this post). While I could not have done the database programming (clearly my education is lacking), the ability to preprogram a schedule and link it to any post is quite a nice feature. Now people who have signed up for My Green Conscience via Widgetbox get the visual widget for their site or desktop. And people who have only signed up for the RSS, get the post delivered as an HTML feed by Feedburner. It’s a great system. Easy to use. I love it!

And sensing that Springwidget aficionados are probably getting a little irate now that I seem to be dissing them in favor of Widgetbox, I will admit that you can make a handsome visual widget with Springwidgets, too. It is flash-based, and for some people it may just do the trick. (It looks virtually identical to the WidgetBox one on the right but is created using Flash.)

Now it’s your turn…Which widget do you prefer? The Before or the After? I have to admit, for some sites, the wallflower may be more appealing and more appropriate than the colorful, in-your-face version. And the beauty is this… I know which one I like better. But you can have either one. Just click on the link under the widget to download the code.

Let me leave you with this one thought which is from a posting about the popularity of widgets with teenagers — and thus points to the tremendous opportunity in the widget marketing space…

‘Widgets have so much buzz now and every advertiser wants to do a widget,” says Marc Fireman, head of digital media for Reebok…’

Whipping off Widgets

In my last post “Nine Ways to Widget Wisdom“, I claimed that “Widgets are so easy to build, you can whip one off in 5 minutes…”

Well some good blogging friends in Chicago, Derrick Sorles and Michael Snell, at BUSINESS BLOGGING TIPS & SECRETS took me up on my offer to prove it. They were a little skeptical — but game to try. So, I called Michael one morning and coached him through how to make a basic, template Springwidget

But why just read, when you can play along for yourself? Do you use Feedburner? Are you ready to make a Widget? Okay — look at your watch. Time yourself. (If you’re a developer, go here for the advanced class.)
1. Login in to your Feedburner account
2. Click on ‘Edit My Feeds’
3. Click on ‘Publicize’
4. You’ll see a list of publicity options. Look for the one that says ‘Springwidgets Skin’ and click on it.
5. You’ll see a screen like the one below. Except there won’t be an image loaded in yet.

screen shot of springwidget

The first thing you’ll do is make an image the exact size they ask for, which is 480px by 75px. Your logo should be no wider than 150px and be centered in the middle. (When I first read that I thought they had the size wrong… But no. They really do want you to make it 480px wide. That is so the widget can be resized by anyone, and your nifty logo [at 150px.] will never be squeezed, stretched or otherwise abused!) So, have you got your 480px by 75px Logo image made? This isn’t the time to be fussy! Time’s awasting… You can always go back and fix it later.

Once you have your image made, upload it to your server. Then enter the image url in the Widget Logo URL box.

Click on the Preview Image and see if you like it. Let’s assume it’s perfect (remember you can always fix it later).

Now take another look at your watch. We’re almost done.

Click on the Activate button.

Voila! Your widget is made. It is reading your RSS Feed. It works. (And if it doesn’t, call Feedburner, not me!) It is a thing of beauty. Save it! Then run and show it to all your friends. Glory in the brilliance of it… But don’t forget to grab the code and insert it into your site. They work well in sidebars.

And if it took you longer than five minutes… well, what can I say? It was your first. But your next one will be done in three minutes, right?

So, now that you know how super easy these SpringWidgets are to make, let’s return to Michael and Derrick in Chicago. I called later that afternoon — and Michael had whipped off not ONE widget — but THREE! He was having lots of fun and already pushing the boundaries of what Springwidget can do. (He said it took him 7 minutes, but Michael, being a Designer is fussy…) You can read all about it here: The 5 Minute Widget Wisdom Project With Guest Franke James

Below are screenshots of two of Michael and Derrick’s Springwidgets — go to their sites to see them live. And of course, leave a comment — they will want to hear what you have to say about Widgets, particularly theirs! And if you really LOVE them, you can put them on your site, and stay connected to all their great content.

Business Blogging Tips: Sorles and Snell Business Blogging Tips: Sorles and Snell

Now, if you’ve been reading along and not actually trying your hand at widget-making, let me share two inspirational quotes on why you should get Widget Wisdom:

“If a website visitor sees a widget they like they can click a link and add it to their own site, or their desktop, or both. That’s an important innovation, and a useful one.”
Michael Arrington, TechCrunch

“I’ll go out on a limb and say that this is more important (in terms of content consumption / RSS adoption) than the new yahoo mail beta and/or IE.”
Don Loeb, VP FeedBurner

I absolutely agree with Michael and Don (clearly we see eye to eye on widgets). Now, I can’t get Widgets off my mind…

So, next week I’ll show you the creative fun we’re having with WidgetBox Widgets that will let you insert Flash images, and draw from a database to set up a daily schedule. But, sadly, they do take a little longer than five minutes… And you might need a talented programmer holding your hand. Fortunately, I’m married to one. But he doesn’t do anything for free…