But FAQ’s are a different type of content. Just like search and sitemap, it has its own particularities and things that you can do to improve user experience. You have to keep in mind, for instance, that users don’t go to FAQ pages, you have to lead them there.

Here we’ll see a couple of thoughts about it, good practices, inspiration and tools.

So, let’s rock!

7 check points

1. Keywords

Ok, first thing you need to keep in mind: Users don’t read on the web. They scan the page trying to find main keywords about something that may be important to them (just like 90% of you are doing right now). So use good headlines and questions keywords, avoid clichés and keep them short.

If you can, outline main keywords, like searched terms, or main topics.

2. FAQ or WAQ?

For a long time FAQs have been misused, instead of real and relevant content, companies put questions they “wished” users would ask (WAQ, Wished to be Asked Questions).

It’s very important to put users needs first, just cover topics that are really important to them. Otherwise it’ll be just another page trying to hide the solution from them. Which, by the way, won’t solve the problem at all, leading to future problems, like unnecessary support requests, or lost sales.

3. People don’t go to FAQ pages

People don’t go looking for FAQs. It’s not a common workflow thinking “Hey, I need to know about their refund policy.. Let’s go to FAQ”. Sounds strange, huh?

So you have to interlink it wisely in places where users may need help. Like using them along with search pages. Or using them as a “wall” before chat with real attendants: Ask the user what kind of problem they have, then suggest a few FAQ searched items based on the users keywords.

4. Sometimes you don’t need to lead them to FAQ, just use tooltips instead

FAQ are great to provide complete answers, but if you just want to tell users how features work, or which type of data they should put in a registration form just go with tooltips or something like that.

Oh, and don’t forget to make it easy and mobile friendly, or in other words, don’t use just a simple hovering element or title attribute. You may use a plugin or add it as a plain text right above your field or button.

5. Do you really need an FAQ?

I know I’m saying that it’s important, but it has its place in websites. It’s a good idea for sales websites, services, apps… But if you have a simple blog or simple company website, just create an “about” page and you’ll be fine.

6. SEO

Have you ever thought about it? If you have a single page with good keyword density about your product and link it in several places inside your website, it can be a really good landing page.

So, think carefully about it, it may lead a lot of users to your website.

7. KISS

Again, Keep It Simple, Stupid my friend .You don’t need to clarify every single question that may pop up about your product. You may categorize questions (if you have a huge amount of them), show content just when users need it.

Just keep in mind that landing page idea, you have to talk about the most main topics and solve users problems fast, if not they will just leave website.

Implementation tips

jQuery / Javascript enhancements

Like I said above, you may hide content by default and just show it when a user wants/requires it. You can use, for instance, jQuey Collapsible panels plugin and create dynamically collapsible panels. You can also use jQuery accordion plugins.

Another good thing to do, is add a “Table of contents” with smooth scrolling, so users can reach what they want easily and with a pretty cool effect.

Scrolling like a boss

You may use smooth scrolling scripts or something like LocalScroll so you’ll get a better organized and easier to use FAQ page.

How about reading a tutorial on it?

Well, Matthew Corner wrote a tutorial with smooth scrolling, table of contents and good looking, and you can just download and edit it to better fit your needs.

Doing the right markup

Although many people use simple headings (h2,h3) for questions and paragraphs for answers, I think that it’s much more semantically correct using definition lists for them. So you may use definition title(s) and definition description(s) to wrap them up accordingly.

Another option, really good one actually, is to use the <details> HTML5 element, which gives you those good looking collapsible panels by default (with browsers that support it, of course).

Nice examples out there

Search + FAQ

Paypal uses a really good system where users can see their FAQ or search by keywords, as well.

FAQ preventing unnecessary support

It pretty common to have users asking you really dumb questions. Don’t get me wrong, but sometimes they could easily find the answer themselves, if we gave them a chance.

Doing the easy way

Did you know that we have a tool for FAQ development? Pretty cool, huh? It’s called FAQme, and worth trying!

FAQ, the Social Way

If you’re more of a social company, why not use a tool that integrates questions and people? Well, I’ve seen a couple of (young) companies using FormSpring as a simple way to answer real questions and let them be easily accessed by other clients

Remember that a FAQ should supplement good content, with answers to those questions also found elsewhere on the site. It’s a section of questions that visitors genuinely ask and should be arranged with care. Above all, keep it simple! Your user is more interested in finding specific information than anything else. Read on to discover how to best present a FAQ page.

Gather Appropriate Questions

In putting together questions for inclusion on your site, it’s essential they be real. Give yourself a month and collect all the questions you receive from customers in that time frame via email or direct calls.

Another valuable research technique is to ask good friends or customers to give you feedback on your products or service. What questions popped into their minds when they visited your website. (You might offer a small gift or discount to your customers in exchange for feedback.)

After getting everyone’s comments, assemble the questions and group by category. For example, questions about how quickly you ship products would be under your “Shipping” category, etc.

Takeaways:

• Write your FAQ in a “Question & Answer” format.
• Organize the questions in each category so the most important questions appear near the top.
• If you’re having trouble collecting questions, announce an open question period on your website.

Questions and answers are clearly displayed on the website for Pixelmator.

Provide an Adequate Entry Point

If you’re going to provide a FAQ page, finding it should be easy for your visitors. A distinct, well-positioned link will do the trick. There are a few good entry points which I’ve gathered:

• Main Navigation: It’s hard to miss when it’s right there with the meat and bones.
• Subsection of the help or about pages: When someone has a question about your site or company, the help or about sections are the first logical places they’ll look.
• Double exposure: Even better is if you link to your FAQ twice on your index page. For example you can include a link in both the header and footer.

A support link is displayed in the top navigation on VersionApps.

Readability

I’ve stressed at the beginning of this article how important the information in this section is, and how users are primarily concerned with scanning to find their appropriate topic for an answer. The best way to achieve customers satisfaction in this area is to provide typography with a good contrast between the background and the text itself and to address line and letter spacing.

Takeaways:

• Distinguish questions from answers, whether by color, size, typeface or decoration.
• Page length should be kept to a minimum. Endless scrolling will tire users and cause them to leave before finding answers to their questions. Make sure each question and answer pair is valuable.

Tinkering Monkey uses a different font and size to differentiate the questions from the answers.

Categorize Questions

Categories are the best way to organize a longer FAQ. Categorization aids readability, so it’s important to design a hierarchy that users can easily access. Give short, intuitive names to each category to further enhance readability and avoid confusion. You also don’t want to include more categories than are necessary, so choose them wisely based on the questions you’ve collected earlier.

• Create a “Table of Contents” at the top of your FAQ page and put the most asked questions here.
• Hyperlink them so your customer just has to click to get to the answer. Or hyperlink your categories at the top of the page.
• If you have more than 10 questions, it’s a good idea to list your questions without showing the answers directly under them, and instead include a link.
• Order questions according to priority and frequency of the query. Questions can also be grouped together by topic.

Mint.com has a well-categorized FAQ page complete with succinct and descriptive categories. Their most frequently viewed questions help guide the users to pertinent topics.

Comcast’s FAQ page, while not over the top, allows the user to click on a question and be directed immediately to the corresponding answer via JavaScript.

Provide Assistance

If a user can’t find an answer to their question, it would be a great idea to allow them to contact you directly. A question or contact form that allows them to achieve this through your FAQ page is the best alternative.

• Place the contact form prominently on your FAQ page, allowing visitors to reach you easily.

Search

If a FAQ has many categories and sub-categories, search becomes more important than ever. It’s essential for longer FAQ pages where a customer is likely to encounter lots of questions.

• FAQ search should differ from a regular site search and be clearly designated in order to reduce the amount of results that turn up.

The label of the search feature on the FAQ page of SurveyMonkey works well.

SXSW clearly designates their search field through bold typography and a catchy illustration.

Summary

While not the most glamorous part of any given site to design, the FAQ is where a user goes when they have a question about the rest of the site. With this in mind, it’s pivotal that you address usability concerns in the design of the FAQ. Putting careful thought into how your users will use your FAQ’s is of the utmost concern, as you intend to have these visitors stick around for the duration.

While designing a recent project in Photoshop (a software sales theme), I decided the support area was something I wanted to get right, with the focus falling heavily on the FAQ page. I wanted to get a feel for how I wanted it to work, and so I got thinking; What is it that the end-user wants when they arrive. I came up with these thoughts,

• Ease of reading – the hierarchy of the text needs to be distinct
• Organization – questions should be split into categories
• Navigation – finding their way to the information they want should be made easy, and quick

With these three points in mind, I came up with a tidy, and importantly clean FAQ page concept, the demo of which can be found below. I’m going to talk you through how it was made, and teach you how to build it yourself.

Click this link for a demo of the FAQ page we are going to make. You can also download the source code here.

Tutorial Requirements

This tutorial assumes you are fairly comfortable using the following languages

• Html
• Css
• jQuery

Step 1 – Structuring our Html

Our html is split into two main sections. Within our wrapper, we have a primary column, and a sidebar column.

<div id="wrapper">
	<div id="primary></div> <!-- Main content column -->
	<div id="sidebar"></div> <!-- Sidebar Column -->
</div>

The primary content column is where we are going to split our questions into simple categories. Each category will have a title, a list of the questions with links, and then the questions split up using a definition list. The markup we are looking for goes like this. (This shows a category with two columns)

<h3 id="1">Lacus pulvinar
<ul class="section_menu">

	<li><a href="#1_1">Lectus massa adipiscing, mattis. Turpis integer massa.</a></li>

	<li><a href="#1_2">Integer enim montes mauris, arcu est.</a></li>
<!--<span class="hiddenSpellError" pre=""-->ul>
<dl class="faq">
	<dt id="1_1">Lectus massa adipiscing, mattis. Turpis integer massa.</dt>
	<dd>Ultricies in mus, magna rhoncus augue, nec magnis facilisis integer ut pellentesque aliquam sit! Enim odio, porta augue, sed turpis dolor ultrices porttitor arcu massa cum elementum hac in vel, magna magnis, enim scelerisque? Amet aliquam, magna dis porta platea. Cras aliquet. Arcu mid eros aenean parturient cras ac egestas tempor? Lundium parturient dapibus, ridiculus ridiculus dapibus! Quis eros amet.</dd>
	<dt id="1_2">Integer enim montes mauris, arcu est.</dt>
	<dd>Et ridiculus vut dis vel integer pid? Adipiscing nec tristique dictumst tristique duis rhoncus sed, scelerisque. Porta, diam augue vel augue porta enim. Et! Tristique montes. Auctor! Pid tristique purus montes. Quis? Sit, enim. Egestas! Tristique amet mattis adipiscing, proin elit adipiscing integer! Enim, odio. Etiam ac, nunc est purus turpis. Nunc! Pid cras scelerisque mid habitasse. Cum magnis.</dd>
</dl>

It is important that you match up the navigational links for each category of questions with their ID’s. Notice that the first question in this category has an id of “1_1″, and the link the first question has a href of that id. This is important in solving our navigational problems for the user. Similarly, notice that the category title has a numerical id, to show that this is the first category. These id’s need not be numerical, they can be whatever you want, as long as they are unique to the category / question.

Moving onto the sidebar, this is where navigating the bigger picture comes into place. We’ve linked up out category questions, but how to users navigate to the categories themselves? Through the sidebar is how.

Within the sidebar, we are going to include a header, and another navigational menu linking to our categories. You can build upon, this of course, and add whatever you want to your sidebar, possibly a quick contact form, or support contact details.

<div id="sidebar">
	<h3>Select Category</h3>
	<ul class="section_menu">

	<li><a href="#1">Lectus facilisis vel</a></li>

	<li><a href="#2">Vut magna</a></li>

	<li><a href="#3">Lacus pulvinar</a></li>
	</ul>
</div>

Step 2 – Creating our layout and typography with Css

First off, we want our FAQ page to look universal in all browsers, so as always we will apply a css reset. We also want the FAQ page to be easily readable, and look stunning yet simple. For this I’ve used a modified version of the text.css that comes with 960.gs, instead using Myriad Pro, and Helvetica as our fonts. Since this section of css is large, and very basic, you can copy and paste it from here.

Starting off with our basic styles, we are going to create our layout columns, and center our page in the middle of our window.

/** Center our page in the middle of the window **/
div#wrapper{
	width:960px;
	margin: 0 auto;
	position:relative; /** Important later on **/
}

/** Give our primary column a width and float it to the left width a right margin **/
div#primary{
	width:720px;
	margin: 20px 40px 0 0;
	float:left;
	display:inline;
}

/** Position our sidebar to the right of the primary content bar **/
#sidebar {
  	left:760px;
  	position: absolute;
}

You’ll notice that we have absolutely positioned our sidebar rather than float it to the left of our primary content column. This is important for something special we are going to do with our sidebar later on.

Now it’s time to start adding some subtle styling to our page content to bring it up to standard and make viewing it extra eye pleasing. We’ll start off with two basic styles on our h3 and a tags.

/** Give our category headers room to breath **/
h3{
  	padding-top:30px;
}

/** Color our links blue **/
a{
	color:#0986e3;
	text-decoration:none;
}

/** Add a hover effect to links **/
a:hover{
	text-decoration:underline;
}

You’ll have noticed some of the class names I dropped into the html when we created it. These include section_menu and faq. They’re used to style our navigational menus (sidebar included), and our questions themselves.

/** Styling the navigational menus by adding a subtle background, and padding **/
ul.section_menu{
	background:#ededed;
	padding:20px 10px;
}

/** Style our faq questions **/
dl.faq{
	margin-bottom:30px;
}

/** Make the question itself stand out **/
dl.faq dt{
	font-weight:bold;
	color:#000000;
	padding:25px 0 5px 0;
	display:block;
}

/** Add a divisor below the question answer **/
dl.faq dd{
	padding-bottom:25px;
	border-bottom:1px solid #cccccc;
	display:block;
}

Step 4 – Creating a static sidebar with Jquery

Now we are going to start using Jquery to improve the usability of our page. Currently it looks nice, and works well for a page without any javascript, but we can make it so much better! Start by including jquery in the had of your page. We are going to load it directly from google.

<script><!--mce:0--></script>

Secondly we are going to add slightly the html of our sidebar. Add another div wrapping all the content of your sidebar. In our case, I’m going to give it an id of “sidebar_content”.

<div id="sidebar">
	<div id="sidebar_content">
		<!-- Sidebar content in here -->
	</div>
</div>

We also need a bit extra css, and css for our sidebar for when it becomes fixed.

/** Position our sidebar content at the top of our sidebar, and give it the width of the full sidebar **/
#sidebar_content {
  	position: absolute;
  	top: 0;
  	margin-top: 20px;
	width:200px;
}

/** When the sidebar becomes fixed, it'll fix to the top of the page **/
#sidebar_content.fixed {
  position: fixed;
  top: 0;
}

You may not understand the fixed class yet, but the following Jquery will help clear that up for you. Create a script tag in the head of your document, below, the Jquery we are loading from Google, and insert this code.

$(document).ready(function () {
	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));
	$(window).scroll(function (event) {
		var ypos = $(this).scrollTop();
		if (ypos >= top) {
		sidebar.addClass('fixed');
		}
		else {
			sidebar.removeClass('fixed');
		}
	});
});

This may look daunting if you’ve never touched Jquery before, but don’t worry, we’ll step through it line by line. We start off with the Jquery basic of when the document is ready, run this code. The create two variables.

	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));

Our first variable, “sidebar”, assigns the variable sidebar, with the selector pointing to our inner sidebar div. We called it “sidebar_inner”, but you may have called it something different.

Our second variable, top, calculates the distance of the sidebar from the top the top of the page, minus any top margin that we have applied.

$(window).scroll(function (event) {
	var ypos = $(this).scrollTop();
	if (ypos >= top) {
	sidebar.addClass('fixed');
	}
	else {
		sidebar.removeClass('fixed');
	}
});

This snippet of code starts off by saying, if the window is scrolled, carry out this code. I starts again by creating another variable by calculating how far from the top of the page we are, and assigning it to the variable “ypos” (position on the y-axis).

We then enter an if statement, that says: If the distance to scroll to the top is greater than the distance that the sidebar is from the top, give it to class of fixed. If not, don’t give it the class of fixed. This is where the fixed class we created earlier on comes into play. Easy huh? =)

Step 5 – Making a smooth page scrolling effect

So we have a lovely fixed sidebar as we scroll, without the traditional glitchy jumping that used to be commonplace with fixed sidebars, but out internal page linking still jumps directly to the destination, and while this is good, it isn’t very eye pleasing, so we are going to add an animated page scroll. Since the jquery to achieve this is too complex for us to hand write, we are going to use a plugin called localScroll, and another called ScrollTo for our animation. Download them both from here, and include them in the head of your document again, this time between our Google hosted Jquery, and our custom written Jquery.

<script src="jquery.scrollTo-1.4.2-min.js"></script>
<script src="jquery.localscroll-1.2.7-min.js"></script>

The implementation of this is stunningly easy. Simply add to our custom Jquery this one line of code.

$.localScroll();

Note : Make sure you place this line of code within the jquery wrapper,

$(document).ready(function () {
	// Somewhere in here!
});

And there you have it! A fantastically usable, and simply beautiful FAQ page that means the user can easily navigate between categories and questions, without having to spend ages scrolling through search pages, and loading page after page for different categories, or even clicking to open a single question.

Further Discussion

Have some thoughts on the usability of this page? Give them to me, I’d love to hear them. This is as much a proof of concept as it is a tutorial introducing you to basic html, css, Jquery, and plugins, but I’m sure there will be people out there who will feel a perfect FAQ page is something else. If so, what would you do?

Before I start, you can view my StumbleUpon profile as well, to see I am not just talking nonsense, I really spend time to build relationship, find more good friends and finally be active myself and help my friends as good as I can! I strongly encourage to look through this article, look for guidelines you are interested in and I am sure you’ll find something you didn’t know too!

How to find more related friends

- Meet people like you

I did this proactive activities for some time, because I was struggling with too less contacts and friends, who could help get more stumbles, because really – more stumbles you can get in short period of time, more traffic it will deliver. Right..it’s not so easy but in short, that’s all that matters.

I’ll now explain how to find similar friends, just go to your friends section and on the right sidebar under your friends you’ll see section – with title “Meet people like you” (see the screenshot below). In my case address is http://dainix.stumbleupon.com/friends/. Now just spend time to establish relationship, I suggest you to send message explaining what’s you are up to before and only then friend request. In that way you’ll be something more than just some unknown fellow in their friend request page.

If you’re really serious about finding very focused people to your niche, also use this “”Browse stumblers” feature:

You’ll find it on your public profile – http://dainix.stumbleupon.com/public/ in my case and there you really can search by interests, gender, find people from your country and more.

- Check what kind of people are stumbling your website

If they like your content already, why not establish good relationship with them? To dig even deeper, check also who is stumbling related sites in the same niche, for example I am checking other design blog article review pages to find new friends.

- Buy sponsorship

I tried this one just know and sponsorship is really rewarding. Thing is – you pay 10$ (minimal donation price) and become a sponsor for a year. Before you start complaining why to that, I’ll explain my reasons. The first thing you get is that small sponsorship badge on your profile (you can see it on my profile too), which means that you’re respected SU user and second the most valuable one – your account shows on StumbleUpon Sponsors page and it actually delivers ~3-5 friends every day. I find it really rewarding because I don’t have to do proactive friend searching any more.

How to establish better relationship

- Don’t spam to your friends with numerous non-related content webpages every day. This is obvious I think, nobody loves spammers;

- Try to respond to your friends shares and establish personal relationship, people will help much more gladly people they know.

- This is time consuming task if you have many friends, but if you spare time and write reviews (testimonials) to your friends, you’ll be more likely noticed – remember before you ask others something to do, be first to take action! People love friendly and helpful friends!

- Spend time to create good profile – fill About me page, customize theme so it looks more eye candy – let people know what you really are!

- When adding new friend, write him a short message explaining why do you want to be friends with him and introduce yourself building personal contact in that way.

How to share article

If you use StumbleUpon in daily basis, you should know several months ago SU added Share This feature to easily share websites between your friends automatically. I just love this feature because it let’s me more focus on stumbling articles, not spending like an hour to share it between my friends manually.

This feature is a little bit hidden so I’ll explain it too. The first thing to do is stumble and review article you want to share. Then just go to your profile, in my case it is dainix.stumbleupon.com. You’ll find reviewed article on Reviews section, now all you must do is mouse hover to the image and Share button will reveal.

Click to it and you’ll get Share this feature pop-up on right side of profile. And one more thing – I strongly recommend you to enter that optional personal message, because usually it’s the best way to get personal relationships with friends. Now just check all friends and send your new discovery – and you’re done!

How to get StumbleUpon traffic

This is common question how to play with StumbleUpon good enough to get traffic from it. And it’s really easy – as soon as you got 10-20 friends to Stumble your website quickly you’ll get like ~500-1000 new visits almost immediately! StumbleUpon is great for new blogs, it was main traffic for my website in early month and even now it always take 3-4th place in top traffic sources.

- Get many active friends

More friends you’ve got – better traffic it will deliver. In short that’s so true, more stumbles you can get in short period of time, better your new article will do.

- Create your IM friend list

This is very powerful tool not only for StumbleUpon but for other social networks. I use Gtalk (it’s very popular between Digg users) for my all business contacts and there I can contact with my friends rapidly and contact only ones are online – I strongly recommend you start using IM if you’re serious about bringing traffic and social networking. If you’re just starting, here you can dowload Gtalk and feel free to add me as your friend too (Gtalk user-name: dainis@1stwebdesigner.com) , I already benefit from such networking!

- Good Design

Really people on StumbleUpon are more to look not to read, well designed logo and website is very crucial to leave good first impression and people will much more likely stumble website in that case and may even remember your website.

- Don’t use many ads

If the first thing new visitors see will be many ads, you’ll really turn them away, of course you need to monetize your site, but don’t do it too much.

And finally be always active and helpful because these kind of people are rare, your friends are your success!

StumbleUpon Addons, Buttons And Tools

1. Promote Your Site with StumbleUpon Buttons & Tools

Add a button to your site to make it easy for your visitors to submit your content to StumbleUpon. Simply copy and paste the code into your site and start receiving free exposure on StumbleUpon.

2. Tag Blaster Online

This page modifies text so that it will not be parsed by stumbleupon.com as HTML/PHP formatting. It also fixes URLs so that they will not be changed to SU review links. It is designed for web developers to be able to post visible HTML/PHP code for tutorials or problem solving.

3. StumbleUpon Random Group

Great tool if you’re searching for new groups, but you enjoy how SU offers you random links – here you get random StumbleUpon groups! Just refresh that page to get a new random group.

4. SU Archive Links Creator

5. SU Music Player

This tool let’s you to create a custom music player for your StumbleUpon blog. After registering, you can add MP3 links, customize your player and then embed it into your blog page.

WordPress plugins

6. WP_StumbleDigest

WP_StumbleDigest is a Plugin to create daily posts on the things you stumble across on the web. Using you StumbleUpon Account.

7. Stumble! for WordPress

Stumble! for WordPress extends WordPress to support a “random article” feature, similar to StumbleUpon’s StumbleThru and Wikipedia’s (Mediawiki’s) random article feature. Not really SU related plugin, but interesting plugin with that kind of feature – should work good for blogs!

8. StumbleUpon WordPress plugin

Wonderful plugin which shows the popularity of ALL your links and gives you can active StumbleUpon bookmark button.

9. StumbleUpon Favorites

StumbleUpon Favorites is a widget based on the default RSS widget that was developed to allow the sharing of bookmarks with blog visitors. This plugin makes it much easier to use and customize the list grabbed from your own StumbleUpon account. Also there are several features you can change on the panel, which is not supported by default RSS

StumbleUpon Related Userscripts (Greasemonkey required)

10. EmbedWidgets

Allows viewing and embedding of flash widgets on StumbleUpon Pages.

11. SU Visitor Icons

The visitor icon script has optional dynamic updates. If you have dynamic updates enabled and your visitor page open, any new visitors will be added to the top of your visitor list. Any changes to friend/subscriber status are also dynamically updated.

Additional visitor count displays the number of visitors added to your visitor list since you opened the page.

Dynamic update switch allows you to enable or disable the dynamic update functionality. Visitor icons will still be enabled.

12. SU Status Indicator

This script adds functionality enabling you to set and display an online status on your public profile page, similar to MSN. It does not affect your normal SU online status indicator, this script is meant to provide an additional indicator, with more options. You can set your status on your favorites page, which will stay that way until you change it to something else (so don’t forget to set to offline when you go to bed).

13. SUEditor

A WYSIWYG Editor for Stumbleupon.com, works on blog, forum, contact, and site review pages

14. SU Element Styles

Basic HTML/CSS editor for SU. Preview blog posts and edit CSS styles by clicking on any element.

15. Clean’n'Readable

Very small script that solves the problem of low-contrast, over-styled and plain unreadable su blogs. It collapses all custom backgrounds, sets bg color to white and font color to black.

16. SU Extended What’s New

This script adds an option to generate an extended “what’s new” page, with the following:

• Full length posts
• Blog posts
• Thumb down reviews

It generates this page by visiting the first page of up to 20 people you subscribe to, and checking for new posts. It remembers approximately the last 1800 posts it has shown you and doesn’t show anything over 24 hours old, so you should always get only what is actually new. Retrieving the first page does register as a visit, so the script keeps track of the last 60 people it has taken posts from and refrains from visiting again for at least another 3 refreshes of the page.

17. SU Page Control

This is a simple script which replaces the normal page control on SU pages with a drop-down box, and buttons. Currently works on the following pages:

• Blog
• Reviews page
• Favorites
• Discoveries

18. Tag Details for StumbleUpon

This script replaces StumbleUpon tag clouds with ordered lists.

FAQ and Guide for Stumbleupon

19. Unofficial StumbleUpon FAQ

Read this unofficial StumbleUpon FAQ to get many more and different questions answered than in official SU FAQ.

20. StumbleUpon Wiki

StumbleUpon Wiki is a place where groups of stumblers work together to describe and evaluate the best of the web.

Other related resources and useful reading:

• StumbleUpon Addons
• How To Take BackUp Of All The Email Ids Of Your Friends On StumbleUpon
• 28 Tips To Make You a StumbleUpon Superstar
• Building Your Blog With StumbleUpon
• How To Get StumbleUpon Traffic
• How to Write Posts That Set StumbleUpon on Fire
• A Comprehensive Guide to StumbleUpon: How to Build Massive Traffic to Your Website

I’ll be happy to hear about your experience with StumbleUpon and maybe you know more StumbleUpon tools I didn’t list here?