Buttons, Buttons — Let’s Clean Up The Feed Buttons!

As part of adding our new "Lands" tabs to Search Engine Land last month, I cleaned up our feed page that helps people understand how to add our feeds to various feed readers. The biggest challenge was dealing with the inconsistent sizes of feed buttons from the different providers. I wanted to share how we arrived at a cleaner look, along with an fresh urging for feed reader providers to standardize buttons to help publishers. Plus, I’ve got some standard buttons anyone can grab, if you want help with the issue now.

At Search Engine Land, we have one main feed page that describes all the feeds we offer. The intent of this page is to help the newbie user, the person who has heard about feeds but probably is not comfortable with copying and pasting the feed URL into their feed reader. Instead, my assumption is that these people are looking for "My Yahoo" or "Add To Google" they’ve somehow heard they should use. Our page provides those.

When Search Engine Land initially launched, I listed virtually every button I could find, one on top of each other. It made for this wonderfully attractive look:

My Old Bad Feed Subscribe Button List

I knew the page needed to change, and a few months ago, I was inspired by the feed page over at MediaPost. You can’t see this unless you are a registered member, so for those who are not, here’s a screenshot:

MediaPost Feed Page

Everything is so nice and neat! Let’s zoom in to better understand:

Feed Subscribe Buttons At MediaPost

The two key things that MediaPost does is to focus on only the most important services and to standardize the button sizes.

I wanted to do the same, so the first step was understanding if MediaPost was indeed focusing on the most important services. For that, I turned to FeedBurner.

Back in February, FeedBurner published a snapshot of the most popular feed readers. There were two separate ways popularity was determined (clicks versus views), and I ultimately decided to rank the services in this order:

  1. Google
  2. Yahoo
  3. Bloglines
  4. Netvibes
  5. Windows Live
  6. Newsgator
  7. Rojo
  8. Pageflakes
  9. AOL

MediaPost only listed five services, but after playing with my page a bit, I figured I could accommodate more in a compact side-by-side format, as shown below:

Various Feed Subscribe Buttons

There are actually 11 buttons shown, as opposed to the 9 services in my list. That’s because I made a feed icon-style button that I decided should come first and — for our main feed — I decided to allow the Technorati button to remain. More on this below, but first, a chart!

The chart below gives you a link to where you can find original subscribe buttons from various services. Then you’ll see the original sizes for those buttons — and the differences in sizes illustrates the need for more consistency.

"Action" shows how I altered the original button to get to the 91×17 size I considered standard. The last column shows the actual final button that I used. These could be better, but if you want to use what I created, right click and help yourself to the images. If you find them useful, considering linking to this article in some way. That’s not required, however. I’m sure the guilt won’t be crippling or anything.

Service Size Action Final Button
Feed Icon
(icon info)
None rectangular Made new one Subscribe Via Web Feed
Google
(button info)
104×17 Tightened up Subscribe with Google
Yahoo
(button info)
91×17 No change needed Add to My Yahoo!
Bloglines
(button info)
76×17 Expanded white space to right Subscribe with Bloglines
Netvibes
(button info)
91×17 No change needed Add to netvibes
Windows Live
(button info)
106×17 Tightened up Subscribe with Live.com
Newsgator
(button info)
91×17 No change needed Subscribe in NewsGator Online
Rojo
(button info)
91×17 No change needed Subscribe in Rojo
Pageflakes
(button info)
116×17 Tightened up
AOL
(button info)
63×14 Expanded Add to My AOL
Technorati
(button info)
80×15 Didn’t change Add to Technorati Favorites

I said earlier that I considered 91×17 to be the standard size for subscribe buttons. Don’t ask me to back this up with official sources. This comes purely from noting that it is the most common size used. Four of the nine major feed reading services noted as popular by FeedBurner offer this size. That’s the minority of services, true — but only because the remaining five services each use their own unique sizes (104×17, 63×14, etc.).

To get buttons to be the same 91×17 size, I generally removed white space between words or expanded the buttons in a few cases. I tried to stay as true to the originals as possible.

I also mentioned the generic feed icon. That’s this familiar orange square:

We actually use the icon in various places in the site, including at the top of the feed page as a fast way for those more knowledgeable about feeds to get to our main one:

Feed Icon In Use

Still, similar to MediaPost, I thought it would be nice to have a rectangular version of the standard feed icon. I’m not thrilled with what I came up with, but it does the job for now.

Technorati is a unique case. Technorati is not a feed reader, and offering a button doesn’t subscribe you to blog posts. Instead, it allows someone to flag your site as popular, which might help you rank a bit better in Technorati.

For our main feed, I let the Technorati button be present with a link to our home page, rather than to our feed. I didn’t bother making a 91×17 sized version because I’m not sure if I’ll keep that button going in the long-term. It doesn’t really fit with the others in terms of functionality.

Has the cleaner feed page helped? Our feed subscriptions keep going up (we have over 12,000 hitting our main feed right now), but I can’t say if the new page is massively increasing readers. There’s a lot more conversion testing that I should (and want) to be doing. But I feel it looks better than in the past. In addition, I feel the standard buttons make it possible that I might consider listing a side-by-side element for our main feed that would show up in our sidebar navigation area, in the future. That would make these buttons more visible for newbies seeking them without looking too ugly or unmanageable.

Overall, it was amazing to discover how inconsistent the various services were between each other. Often, I felt like no one was even watching over the buttons much. Microsoft was the worse. Windows Live didn’t seem to have a dedicated button page, instead putting info about its button into a blog post. As for My MSN, this page mentioned it having a button, but trying to reach the button page brings up nothing.

Overall, I’d make these best practice suggestions:

  • Always offer at least a 91×17-sized icon.
     
  • Consider beginning the icon with a standard-sized "plus" box.
     
  • Always offer a version on a white background and with the plus box recessed away from the border (compare the Pageflakes button above to the others, and you’ll see how it is an example of the plus box not being recessed).

And finally — hey, consider taking one of our search feeds!

Related Topics: Channel: SEO | SEO: Blogs & Feeds | Social Media Marketing

Sponsored


About The Author: is a Founding Editor of Search Engine Land. He’s a widely cited authority on search engines and search marketing issues who has covered the space since 1996. Danny also serves as Chief Content Officer for Third Door Media, which publishes Search Engine Land and produces the SMX: Search Marketing Expo conference series. He has a personal blog called Daggle (and keeps his disclosures page there). He can be found on Facebook, Google + and microblogs on Twitter as @dannysullivan.

Connect with the author via: Email | Twitter | Google+ | LinkedIn



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:
 

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://www.wolf-howl.com graywolf

    If you’re looking for feed icons in different sizes or colors visit Feed Icons where you can nice clean ones in practically every image format you’d want.

  • http://www.toprankblog.com Lee Odden

    Online Marketing Blog offers a free RSS button tool that has been implemented by over 200,000 blogs.

    Two formats are offered: Individual buttons as you’ve indicated in the post above and also an Ajax drop down menu – my personal favorite.

    Put your cursor over the orange RSS button and as few or as many RSS reader services will appear. Move your cursor away and it folds back up.

  • giedrius

    why not to use such services like addthis.com or quicksub javascript? They cover most popular bookmarking services.

  • http://www.helpdocuments.com Randy Duermyer

    Danny, I agree the sizes need to be standardized, else they are just plain “fugly”.

    Lee, thanks for providing the link for the drop down code. I saw the drop down feed selector on your site and thought, “Now where can I get the code for that?”. The selector saves a lot of page real estate.

  • http://searchengineland.com Danny Sullivan

    Graywolf, did link to that site, but nope — not every size you can imagine. Every square size. You want a rectangle, you’re out of like (ok, i know, a square is technically a rectangle, but you get the point).

    Lee, love the tool and do know of it. But it doesn’t solve the problem that these buttons look ugly at all different sizes (if you go for the default). The drop down is a nice alternative, but that doesn’t help with the newbie who is scanning your page thinking, “Now where’s that My Yahoo button?”

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide