Smashing Magazine we smash you with the information that will make your life easier. really.
RSS: Best Design Practices And Icons
November 2nd, 2007 in Design Showcase | 126 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.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Jason (November 2nd, 2007, 12:42 am)
great post…I was just working on the placement of a rss button today
-cheers
Guido (November 2nd, 2007, 1:04 am)
Great selection of Icons.
I agree with you about the fact that design plays a very important roll in your subscriptions.
Victoria Oldham (November 2nd, 2007, 2:37 am)
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.
Evangelist (November 2nd, 2007, 3:12 am)
Great list and, some nice inspiring designs as well.
Thanks
Alex (November 2nd, 2007, 3:38 am)
Please use Atom. Applications support both for now, but Atom is better defined and has a richer content payload.
Rick (November 2nd, 2007, 4:06 am)
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 Link [www.arcdesignnc.com] in case you would like to skip that step and jump right in.
Rick (November 2nd, 2007, 4:16 am)
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 Link [www.arcdesignnc.com] in case you would like to skip the creation step and jump right in.
Jorge I. Figueroa Sarcos (November 2nd, 2007, 5:26 am)
Incredible selection of Icons, nice work!
turtie (November 2nd, 2007, 9:13 am)
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!
Ravi Vora (November 2nd, 2007, 1:25 pm)
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.
Armen (November 2nd, 2007, 4:14 pm)
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)
Martijn (November 2nd, 2007, 5:26 pm)
Nice icons gona use some one.
Andy (November 2nd, 2007, 5:33 pm)
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:
Salis (November 2nd, 2007, 5:35 pm)
The best icon I have ever seen:
Link [www.papelcontinuo.net]
by Link [www.papelcontinuo.net]
Awesome!
Gerd Wippich (November 2nd, 2007, 6:05 pm)
What a nice intro picture. I want such an RSS pillow for Xmas. Then I can get my RSS notifications when I m sleeping…
Swift (November 2nd, 2007, 6:46 pm)
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
Design Bliss (November 2nd, 2007, 9:12 pm)
Hi! Thanks for the link! BTW - This blog ripped off your post: Link [www.zaesar.com]
Andrew Benton (November 3rd, 2007, 1:55 am)
Very nice article, I’ll probably chomp up one of these to use on my website.
criticalerror (November 3rd, 2007, 5:36 am)
So much things to still
Just Joking!!!
Good work!
Kicks Junkie (November 3rd, 2007, 7:21 am)
Awesome article. I will be using a couple of the free icons on a few new websites.
Daniel (November 3rd, 2007, 7:08 pm)
I just love useful lists, and it looks like you guys are the best in gathering useful information.
Sean (November 4th, 2007, 3:09 am)
Man…just THIS SECOND I was wondering if you guys had an article on RSS icons. Perfect timing!
Jermayn Parker (November 5th, 2007, 1:34 pm)
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…
Richard (November 6th, 2007, 10:41 pm)
Very nice icons. It’s good to see high quality graphic design.
Tom (November 6th, 2007, 11:49 pm)
Incredible collection! I love some of these icons, I’ve already downloaded many of them.
Andy Towler (November 7th, 2007, 3:39 pm)
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…
Danny (November 8th, 2007, 3:56 pm)
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 Link [www.youtube.com]
Resonate (November 11th, 2007, 12:34 am)
A purely excellent article really is, this will great for future reference.
killerog (November 13th, 2007, 1:35 am)
Great collection of rss icons! But where are the atom icons? :)
Robert Marbun (November 20th, 2007, 1:17 pm)
OK, now I can have my guitar pick as RSS icon. Thanks!
Pinyo (January 9th, 2008, 10:56 am)
Awesome designs!
SyedZaeem (January 14th, 2008, 5:21 am)
I like the post, great collection and search :) thanks for sharing.
Ivo (January 22nd, 2008, 6:38 am)
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
NiC (January 22nd, 2008, 4:08 pm)
Great list.. Verry useful :-)
Thanks!
RV Blog (February 7th, 2008, 7:57 am)
Great post. We were looking for some ideas to spice up our blog. The ideas here look amazing!
Cameron (March 8th, 2008, 9:26 am)
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… Link [www.cameronqueen.com], they’re free!
Stryker (March 13th, 2008, 2:05 pm)
Great icons!
viviana (April 29th, 2008, 9:27 am)
Great, great, great !!!