RSS: Best Design Practices And Icons

Advertisement

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

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 Bloglines4 or aggregators such as Netvibes5. 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.

RSS In Plain English6

To get an instant idea of how it is actually done you should take a look at RSS in Plain English7 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).

Screenshot - RSS8
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-icon9 is used in most cases.

Screenshot - RSS10

Screenshot - RSS11
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:

Screenshot - RSS12

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

Screenshot - RSS13

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

Dezinerfolio RSS14

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

Screenshot - RSS15

What about an RSS-icon with foot?

Screenshot - RSS16

RSS-symbol is integrated into a notebook.

Screenshot - RSS17

Blue variation, independent in the header.

Screenshot - RSS18

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

Screenshot - RSS19

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

Screenshot - RSS20

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.

Screenshot - RSS21

The design can also be completely different: actually this RSS-blimp on Zach Braff’s page22 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.

Screenshot - RSS23

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 world24.

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.

Screenshot - RSS25
Real Live Button. Source: Flickr26

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 Magazine27 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 Icons28. In this post we’ve taken a profound look at what is available on the Web and collected our best findings.

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.

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/08/25/20-free-and-fresh-icon-sets/
  2. 2 http://www.smashingmagazine.com/2007/05/24/freebies-round-up-icons-buttons-and-templates/
  3. 3 http://www.smashingmagazine.com/category/graphics/
  4. 4 http://www.bloglines.com
  5. 5 http://www.netvibes.com
  6. 6 http://www.commoncraft.com/rss_plain_english
  7. 7
  8. 8 http://www.cadenhead.org/workbench/news/2872/support-common-feed-icon
  9. 9 http://www.feedicons.com/
  10. 10 http://www.feedicons.com/
  11. 11 http://www.feedicons.com/
  12. 12 http://www.webfruits.it/dblog/
  13. 13 http://www.techtear.com/
  14. 14 http://www.dezinerfolio.com/
  15. 15 http://www.vikiworks.com/
  16. 16 http://www.bartelme.at/
  17. 17 http://oilman.ca/
  18. 18 http://stylishlabs.com/
  19. 19 http://guide.studyabroadoffers.com/
  20. 20 http://www.gosquared.com/liquidicity/
  21. 21 http://zachbraff.com/
  22. 22 http://zachbraff.com/
  23. 23 http://www.aaronovadia.com/clients/photoshopit/rss_feed_icon.htm
  24. 24 http://www.havelaptopwilltravel.com/biggestRSS.html
  25. 25 http://www.flickr.com/photos/46438110@N00/516980714/
  26. 26 http://www.flickr.com/photos/46438110@N00/516980714/
  27. 27 http://www.drweb.de/weblog/weblog/?p=887
  28. 28 http://www.designbliss.com/2007/09/27/over-25-different-styles-of-rss-icons/
  29. 29 http://vikiworks.com/2007/06/15/social-bookmark-iconset/
  30. 30 http://vikiworks.com/2007/06/15/social-bookmark-iconset/
  31. 31 http://devilcry.org/?p=49
  32. 32 http://devilcry.org/?p=49
  33. 33 http://browse.deviantart.com/customization/icons/dock/?order=9&alltime=yes
  34. 34 http://browse.deviantart.com/customization/icons/dock/?order=9&alltime=yes
  35. 35 http://skingcito.deviantart.com/art/RSS-NEWS-37909197
  36. 36 http://skingcito.deviantart.com/art/RSS-NEWS-37909197
  37. 37 http://www.drweb.de/photoshop/rss-icon.shtml
  38. 38 http://www.drweb.de/photoshop/rss-icon.shtml
  39. 39 http://alperesin.deviantart.com/art/Rss-Dock-Icon-65975386
  40. 40 http://alperesin.deviantart.com/art/Rss-Dock-Icon-65975386
  41. 41 http://iris-design.info/photoshop/web-20-style-buttons/
  42. 42 http://iris-design.info/photoshop/web-20-style-buttons/
  43. 43 http://www.valentinaolini.com/
  44. 44 http://www.valentinaolini.com/
  45. 45 http://feedicons.com/
  46. 46 http://feedicons.com/
  47. 47 http://www.bittbox.com/freebies/free-glass-style-rssfeed-icons/
  48. 48 http://www.bittbox.com/freebies/free-glass-style-rssfeed-icons/
  49. 49 http://nam0.deviantart.com/art/Rss-Icons-Orb-v2-41870546
  50. 50 http://nam0.deviantart.com/art/Rss-Icons-Orb-v2-41870546
  51. 51 http://www.zeusbox.org/blog/feedicons
  52. 52 http://www.bittbox.com/freebies/free-glass-style-rssfeed-icons/
  53. 53 http://www.zeusbox.org/blog/feedicons
  54. 54 http://www.zeusbox.org/blog/feedicons
  55. 55 http://utombox.com/my-works/
  56. 56 http://utombox.com/my-works/
  57. 57 http://lorinator.feminoise.com/feed-icons-for-blogging-guitarists/
  58. 58 http://lorinator.feminoise.com/feed-icons-for-blogging-guitarists/
  59. 59 http://www.webfruits.it/dblog/articolo.asp?articolo=33
  60. 60 http://www.webfruits.it/dblog/articolo.asp?articolo=33
  61. 61 http://www.webfruits.it/dblog/articolo.asp?articolo=33
  62. 62 http://simdes.org/?p=92
  63. 63 http://simdes.org/?p=92
  64. 64 http://www.snap2objects.com/2007/06/10/30-free-vector-rss-buttons/
  65. 65 http://www.snap2objects.com/2007/06/10/30-free-vector-rss-buttons/
  66. 66 http://abdussamad.com/archives/93-How-to-mess-with-your-readers.html
  67. 67 http://abdussamad.com/archives/93-How-to-mess-with-your-readers.html
  68. 68 http://petemh.deviantart.com
  69. 69 http://petemh.deviantart.com/art/RSS-Icons-41137866
  70. 70 http://nam0.deviantart.com/gallery/
  71. 71 http://carlnewton.deviantart.com/art/RSS-Icon-37808083
  72. 72 http://leoparn.deviantart.com/art/rssicon-55368737
  73. 73 http://jb55.deviantart.com/art/Feedreader-Dock-Icons-38485532
  74. 74 http://petemh.deviantart.com/art/RSS-Icons-41137866
  75. 75 http://carlnewton.deviantart.com/art/RSS-Icon-37808083
  76. 76 http://www.famfamfam.com/lab/icons/silk/
  77. 77 http://www.gosquared.com/liquidicity/archives/96
  78. 78 http://www.pixelhivedesign.com/tutorials/Design+a+custom+RSS+feed+icon/
  79. 79 http://photoshopcandy.com/?p=82
  80. 80 http://photoshopcandy.com/?p=82
  81. 81 http://pinkzap.com/?p=454
  82. 82 http://www.blog.spoongraphics.co.uk/tutorials/create-a-vector-rss-icon-with-illustrator
  83. 83 http://www.blog.spoongraphics.co.uk/tutorials/create-a-vector-rss-icon-with-illustrator
  84. 84 http://photoshoplovr.com/web-20/make-your-own-rss-feed-icon/
  85. 85 http://www.communitymx.com/blog/index.cfm?newsid=743

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising
  1. 1

    great post…I was just working on the placement of a rss button today

    -cheers

    0
  2. 2

    Great article, and I am still in the process of switching to the new “standard” icon. I was using the old orange “RSS” buttons, and now I’m having to track them all down and change them…for the sake of good communication with my visitors.

    0
  3. 3

    Great list and, some nice inspiring designs as well.

    Thanks

    0
  4. 4

    Please use Atom. Applications support both for now, but Atom is better defined and has a richer content payload.

    0
  5. 5

    I love the look of some of these…..Although the orb with the horizontal spiked lines I think deviates just a little to much.

    Also i uploaded a zip file with a PSD, illustrator CS2 and illustratore file compliant with older versions of the icon, so it would be easier to customize without having to recreate it. You can find that here in case you would like to skip that step and jump right in.

    0
  6. 6

    I love the look of some of these…..Although the orb with the horizontal spiked lines I think deviates just a little to much.

    Also i uploaded a zip file with a PSD, illustrator CS2 and illustratore file compliant with older versions of the icon, so it would be easier to customize without having to recreate it. You can find that here in case you would like to skip the creation step and jump right in.

    0
  7. 7

    Jorge I. Figueroa Sarcos

    November 2, 2007 5:26 am

    Incredible selection of Icons, nice work!

    0
  8. 8

    Great selection of Icons.
    I agree with you about the fact that design plays a very important roll in your subscriptions.

    -1
  9. 9

    Being a new blogger, this is valuable information!! In our ongoing quest to attract more traffic and increase readership, this post on RSS icon placement and style will certainly help. Great job. I will probably try some of these icons on my site!

    0
  10. 10

    Fantastic resource. I personally use the circle feed icon for my blog. I am thinking about personalizing it more to attract more RSS subscribers though. It seems that once people find my blog they like to sign up, it just needs to be more prominent.

    0
  11. 11

    Nice resource list…once again.

    I use a custom made one to attract subscribers. In fact, I’m a little offend that you didn’t feature it ;) (joke)

    0
  12. 12

    Nice icons gona use some one.

    0
  13. 13

    A good roundup but there’s one thing missing – put a rel=”alternate” link in the so that nice browsers will place an icon in the address bar. I never hunt for an orange icon on the page any more, I just glance at the address bar.

    Not sure if the comment system will cope with an example, but here goes:

    0
  14. 14
  15. 15

    What a nice intro picture. I want such an RSS pillow for Xmas. Then I can get my RSS notifications when I m sleeping…

    0
  16. 16

    Wanted to say the same thing – The RSS pillow looks awesome! A great Christmas gift for people whom have interest in the internet field. And great list of rss buttons!

    Swift

    1
  17. 17

    Hi! Thanks for the link! BTW – This blog ripped off your post: http://www.zaesar.com/blog/?p=26

    0
  18. 18

    Very nice article, I’ll probably chomp up one of these to use on my website.

    1
  19. 19

    So much things to still

    Just Joking!!!

    Good work!

    0
  20. 20

    Awesome article. I will be using a couple of the free icons on a few new websites.

    0
  21. 21

    I just love useful lists, and it looks like you guys are the best in gathering useful information.

    0
  22. 22

    Man…just THIS SECOND I was wondering if you guys had an article on RSS icons. Perfect timing!

    0
  23. 23

    Over at my blog I use a different style to show my rss off.

    Its nice, big and different which hopefully will help interest people more…

    0
  24. 24

    Very nice icons. It’s good to see high quality graphic design.

    0
  25. 25

    Incredible collection! I love some of these icons, I’ve already downloaded many of them.

    0
  26. 26

    Fantastic – thanks for gathering these lovelies together in one place. One of them will definitely go on my blog. Only trouble is, choosing which one could take some time…

    0
  27. 27

    Great post! If you wondering where that “Real Live Button” came from, it was a prop for a short video we produced to help explain RSS. You watch it at http://www.youtube.com/watch?v=4osqHYW1qyg

    0
  28. 28

    A purely excellent article really is, this will great for future reference.

    0
  29. 29

    Great collection of rss icons! But where are the atom icons? :)

    0
  30. 30

    OK, now I can have my guitar pick as RSS icon. Thanks!

    0
  31. 31

    Awesome designs!

    0
  32. 32

    I like the post, great collection and search :) thanks for sharing.

    0
  33. 33

    Brilliant sorting… all in one place, sometimes like today needed the rss icon but in a different shape, and I found it in here, thanks a lot. Keep it up

    Cheers

    0
  34. 34

    Great list.. Verry useful :-)
    Thanks!

    0
  35. 35

    Great post. We were looking for some ideas to spice up our blog. The ideas here look amazing!

    1
  36. 36

    Nice selection. I made a few icons more recently so they never had a chance to make it in to this collection, but if anyone is after a few nice 80′s-neon style RSS logos… please see my blog, they’re free!

    -1
  37. 37

    Great icons!

    0
  38. 38

    Great, great, great !!!

    0
  39. 39

    Nice! There are also some cool rss icons on http://www.freefeedicons.com and they have original PSD too so you can modify them.

    ~Nick

    0
  40. 40

    Great resource. There is a rss feed icon generator which could generate rss icons with different colors and sizes.

    0
  41. 41

    great !! beautiful

    0
  42. 42

    This is lovely. Will love to try puttting on my web http://www.echomusic.com.sg/. Thanks for sharing this info!

    0
  43. 43

    really good post

    0
  44. 44

    Thanks for this great stuff.

    0
  45. 45

    I have a question I am hoping someone can answer…I work for a Bank and we are in the process of implementing RSS Business News Feeds. In many areas of our website we have links to third party sites. In addition to stating the fact that we have links to third party sites that have separate online privacy policy in the provacy and security section of our site, we also have a “speed bump” message when a customer clicks on one of the links to a third party site reiterating this. Now for my question, does anyone know if having a ‘speed bump” letting a customer know they are leaving our site is “industry practice” when hosting RSS feeds to news articles…Seems like it would not be a great web experience. any info would be helpful! Best Regards

    0
  46. 46

    Designing unique RSS icons has become a bit of a competiton amongst designers, so I thought I’d give it a go, check out my unique RSS icons here: Free RSS Icons

    0
  47. 47

    Thanks for this excellent post, it’s very usefull, i’ll try to implement it to my blog

    0
  48. 48

    Reallyu nice display of RSS buttons.

    I have am major question and that is how do I actually place these images and link to my rss feed in the wordpress.org sidebar
    I have searched endlessly for a tutorial on how to do this and have found zero.
    Please some one send me a link as to how I can place one of these cfabulous buttons
    Best Regards
    Greg

    0
  49. 49

    Great examples and content. My blog got an immediate make over.

    0
  50. 50

    I think other website proprietors should take this website as an model, very clean and magnificent user genial style and design, as well as the content.

    0

↑ Back to top