RSS: Best Design Practices And Icons

• By Sven Lennartz
• November 2nd, 2007
• Buttons, Icons, RSS
• 50 Comments

RSS is extremely simple and yet so powerful. Not only does every weblog need it for content syndication; the number of RSS subscribers is a metric for weblog’s popularity and its success in the blogosphere. However, although millions do use RSS, hundreds of millions don’t. That’s no good news, since RSS offers a bunch of advantages that can boost your productivity and improve your information consumption in a quite elegant and easy-to-use way.

In this article we give an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. We also showcase dozens of free RSS-icons and provide you with references to related tutorials and how-tos.

Please notice that

• you can find even more icons, buttons and design templates in our articles 20+ Free And Fresh Icon Sets, Freebies Round-Up: Icons, Buttons and Templates and in our Graphics category.

What is RSS?

RSS is basically a family of formats used to publish (not broadcast!) frequently updated content such as blog entries, news headlines or podcasts. The main advantage for users lies in the fact that they don’t have to keep up with their favorite web sites checking them manually. Instead, it is done in an automated manner so you get notified automatically once the sites are updated.

RSS content can be read using feed readers such as Bloglines or aggregators such as Netvibes. The user subscribes to a feed by entering the feed’s link into the reader or by clicking an RSS icon in a browser. The feed-reader checks the user’s subscribed feeds regularly for new content, downloading any updates that it finds — automatically.

To get an instant idea of how it is actually done you should take a look at RSS in Plain English which explains the basics of RSS in 3.5 minutes in Plain English.

RSS != XML

Since more and more users and bloggers indeed use RSS Syndication, it is gradually becoming a standard (or already is a de-facto-standard). This reflects in a number of approaches designers choose to animate their visitors for feed-subscription. The early feed-buttons have been labeled with “XML”, which is wrong, because this term stands not for the syndication format itself, but for the markup-language it uses. You can compare calling RSS-feeds XML with calling web sites HTML which obviously doesn’t really make any sense.

This is what it looked like few years ago (and in some cases still exists nowadays).

Source: cadenhead.org

Standard RSS-icon

RSS is used on most sites which are updated frequently; the format has also found its path in browsers and software applications. Therefore it’s reasonable to make sure that visitors can identify and recognize RSS quickly and easily. And this is why the standard RSS-icon is used in most cases.

The common RSS-icon

However, the Web is a creative place for experiments. Variations and modifications are common and interesting to observe. Creative designers come up with unusual solutions to integrate the RSS-button in their design and ensure that the overall site design is perfect.

The button itself doesn’t need to look like the standard RSS-button. For instance, it doesn’t need to have an orange color; shadows, frames and other visual effects can be used effectively to convey the message and attract visitor’s eye. What is important, however, is that despite all modifications the icon remains recognizable. This is not always the case.

If you’d like to use them you’ll find a quite comprehensive choice of possible variations offered for free download as icon sets. Before using them make sure you’ve read the license agreement carefully.

Ideas For RSS-Buttons

If you are a graphic designer you might find yourself in the situation where you’d like to risk some unusual solutions in order to provide your visitors with visually appealing designs. Please keep in mind: experiments can go wrong. You need to make sure that your button is recognizable, not that it simply looks good. After all, you want to find new readers instead of losing them.

Here are some examples of interesting uncommon solutions for RSS-buttons:

Nice, original, and in a different color. Greetings from Titanic.

Excellent placement of RSS-button – at the top of the page; and the design of the button fits to the overall design.

RSS-button in 3D-look. The design fits perfectly to the overall site design.

What about an RSS-icon with foot?

RSS-symbol is integrated into a notebook.

Blue variation, independent in the header.

An extended version of the button; you can download it as a vector template.

Shadows and background in use to put the button in the front.

A part of a navigation menu. Where is the grey zone between creativity and standard? In this case the original theme is hopefully still recognizable.

The design can also be completely different: actually this RSS-blimp on Zach Braff’s page is animated. However, new visitors will find it quite difficult to recognize it as an RSS-button. What is the purpose of such designs? To fit to the site layout or win new readers? It doesn’t matter for portfolio-pages where it’s all about creative design approaches, it is however essential for weblogs.

Not that impressive trend, but still very often used: huge, enormous, gigantic buttons which have to be recognized immediately. Extremely overused and not really user-friendly. If this trend persists at some point we’ll see designs with the biggest RSS button of the world.

Where To Place An RSS-Icon?

The most beautiful design doesn’t serve its purpose if the visitors of your web-site can’t find an easy way to subscribe to your feed. While some designers put an enormous RSS-icon in the middle of the page, the other ones place it at the bottom of the page making it harder for users to find it. The funny thing is that enormous RSS-buttons are indeed more effective.

If the feeds are properly declared in the source code, browsers recognize it and offer visitors a choice of available feeds. Besides, most browsers also use an auto detection-function to find the feeds automatically. Therefore visually appealing icons and buttons serve not only the purpose to animate visitors to subscriptions; they also point visitors’ attention to the fact that the subscription via RSS is available.

An optimal position for RSS-icons is the area that surrounds your logo and the top area of your site. The lower an RSS-icon is placed, the little subscribers you’ll be able to get.

Of course, the best position depends on the layout and design of the site. For instance, if the design is based only upon black and white, it’s enough to place an orange RSS-button in the sidebar. And if a site uses too many colors an RSS-icon at the top of the page won’t help, because users won’t be able to perceive at as a single design element. An optimal position can be determined with usability tests or heatmaps.

Real Live Button. Source: Flickr

Standard in variations: RSS-Icons For Free Download

Please notice that some of the references mentioned below have already been published in our Dr. Web Magazine in September. Brian from Designbliss used some of the references and expanded the collection with further icon-sets and tutorials in his article Over 35 Styles of RSS Icons. In this post we’ve taken a profound look at what is available on the Web and collected our best findings.

• Social Bookmarks Icon Set
  12 .png-icons, among them an RSS-icon.

  

• Fresh Icons Pack
  .png-icons, 256×256.

  

• Browsing Dock Icons
  Taking a look at RSS-buttons from another perspective. 3D Cartoons Icons Pack.

  

• RSS News
  2 RSS icons.

  

• RSS-Icon: standard in variations
  A number of RSS-button-templates by Dirk Metzmacher.

  

• Web 2 Social Bookmarks
  12 FastIcon-freeware “iPhone-like” icons of Web 2 Social Bookmarks. Among them — RSS button.

  

• RSS Dock Icon
  256×256, 512×512, .png-icons.

  

• Web 2.0 style RSS buttons

  

• Dock Icons
  4 Icons by Valentina Olini
  
• A collection of vector templates (Developer Kit) for standard-feed-icon including 14 Photoshop-templates (.psd) and 4 Adobe Illustrator-templates.

  

• Free Glass Style RSS/Feed Icons
  Feed-o-rama. 213 Icons, 8 sizes, a variety of formats: AI(5), EPS (16), SVG(1), PNG (64), JPG (128).

  

• RSS Orb Icons
  4 “orbital” RSS-icons.

  

• Feedicons
  34 Icons in 32*32 und 16*16 Pixels – .png.

  

• 3D Rss Feeds Icon
  1 3D-icon in 4 sizes, by Dirceu Veiga.
  
• Circle Feeds Icons
  4 circular variations in 4 colors.

  

• Zeusbox Feedicons
  A set of RSS-icons.

  

• Web 2.0 Icons
  Include 48×48 and 32×32 RSS-buttons.

  

• Feed icons for blogging guitarists
  Guitar pick style. Get the PSD file or the PNG.

  

• Icone Blog – Set 1
  6 color variations included in a bigger set. Italian. Buongiorno Amici!

  

• RSS Icon
  This is one icon in 8 sizes. Is the RSS-symbol still recognizable?

  

• 30 Free Vector RSS Icons

  

• How to mess with your readers
  Two animated Feed-Icons.
  
• DeviantArt has some quite creative work. Examples are petemh, nam0, carlnewton, leoparn, jb55 and again petemh.

  

• Please notice that also wide-spread icon sets and templates such as FamFamFam Silk Icons and vector templates by GoSquared include RSS-buttons. Not all of them are included.

Make Yourself Your Own RSS-Button

If you’d like to create your own variation of an RSS-button you might find it useful to browse through some tutorials we’ve collected below.

• Design a custom RSS feed icon
  For Adobe Photoshop, by PixelHive.
• Glassy & Vibrant RSS feed icon Tutorial
  Vista Style for Adobe Photoshop

  

• RSS Button Variations
  The first is quite similar to traditional RSS buttons but it has a thick border that makes it look more like plastic.
• Create a Vector RSS Icon
  For Illustrator by Spoon Graphics.

  

• Make your own RSS Feed icon
  A Photoshop tutorial.
• RSS Icons
  A Fireworks tutorial.