Social media websites have made a huge splash on the Internet as we know it. No longer do editors dictate what is news, and what is important. The power belongs to the masses on social news sites, which is a huge reason for their traction and loyal users.

It’s no surprise that developing a niche social media site is a popular job request for web developers. When I first learned about brand new social site for financial news, ideas, and tips Tip’d, I was immediately impressed with the clean, sophisticated design and impressive functionality. Yet what was truly amazing about Tip’d was how fast the site was assembled by it’s rockstar development team.

Quick Turnarounds

Most developers know that sites involving social media features are hard to do right. Features like voting, comments, account creation and moderation take a long time to get right. The Tip’d team bypassed a lot of that coding and used a CMS specifically for social news sites, Social Web CMS, which had many of the features that they needed right out of the box.

Here’s an interview with the Tip’d team of Andy Hagans, Chris Pearson and Jimmy (”Jimbeaux”) Atkins.

Planning: Interview with Andy Hagans, Tip’d Founder

WJ: What sparked the idea behind Tipd?

AH: A couple weeks ago, I was reviewing all of the ‘niche social media sites’ (Ballhype for sports, Lipstick for celeb news, etc). I simply couldn’t believe (2 years after social news hit it big) that there still wasn’t a financial social news site with some real presence. So I ran the idea by Jimbo, and that night, around 2 AM, we got the first (very ugly) version of the site up and running.

WJ: What were planning meetings like to get everyone together and organized? Just email, or did you use something like Basecamp to get organized?

AH: Email, Basecamp, and IM, depending on what needed communicated. We work virtually as we all live in different areas.

WJ: Do you have any goals or expectations of the site? Big future plans?

AH: Goals- We want to have 2,000 members by the time we move out of beta in early December. Long term, we want to be THE place people set as their homepage for financial news. We want to have 50,000 members and get 5 million pageviews per month. I think it’s do-able–not because I’m a genius or anything, but because our team is so good at what they do, and because so many bloggers and finance junkies have been craving a more social place to find and comment on financial content.

Development: Interview with Jimmy Atkinson, Tip’d Developer

WJ: What was the total time taken to get the site from concept to launch? Can you kind of give a general idea of the breakdown of time spent?

JA: Andy and I first discussed the concept of Tip’d on September 24. We purchased the domain name and began working on the site that day. Our beta launch occurred just three weeks later, on October 14. Here’s how we got there: The first steps we took was to install Pligg to our server on day 1, September 24. After a few days of customizing it as best we could, we decided on October 1 to contact Ash, the a former Pligg developer and current lead developer on the SWCMS team, to see if he would be interested in working with us. He began working with us later that day, and this gave our development productivity a much needed shot in the arm. It was on this day that we made the change from Pligg to SWCMS. Since then, we’ve constantly been tweaking and adding new features on an almost daily basis. This will likely continue for a few more weeks until we reach a stable point.

WJ: Caching/Performance- What hardware do you guys use to host the site?

JA: Currently the site is hosted on a Media Temple grid server. We use a caching plugin designed specifically for Pligg/SWCMS.

WJ: I hear that you guys had a doozy of a time hacking the socialwebcms. Can you give us a little background about this? What were you changing from the source code?

JA: As I explained in the first question, we did spend a few days configuring (I’m not sure I would quite call it hacking) Pligg after we first installed it on September 24. A few days later, we reached the point where we decided we needed some outside expert help on the system. That is when we decided to reach out to Ash. And since October 1, Ash has been handling all of the really complex stuff (i.e. adding new features and working out bugs).

WJ: I noticed that you guys use a redirect script to track outgoing clicks, as opposed to just linking to the story normally. Are you going to be providing any statistics or analytics in the future?

JA: We are not planning on providing any stats at this point; although this could be something we’ll discuss in the future.

WJ: What tools did you guys use to speed up your development process? Any IDE’s, collaboration tools, etc.?

JA: No IDEs, but we did use NotePad, PsPad, WinMerge, and Windows Grep in development. We love using 37signals’ Basecamp as our collaboration tool.

WJ: 6. Any tips for developers wanting to hack a CMS and create a social news site?

JA: If you’re going to hack a CMS, don’t hesitate to talk to the developer if possible. Doing this has worked out great for us so far. If you’re going to create a social news site, remember that the most important thing is the community. You can have a fantastic CMS with all sorts of great features, but if no one is using it, what’s the use? The community is the most important aspect of any good social news site. The fact that we recognized this before we began work on the project is one of the main reasons for the success of Tip’d so far.

Design: Interview with Chris Pearson, Designer for Tip’d

WJ: Designing a community site is much, much different than designing a website like a blog. Can you explain some of the ways that the Tip’d design is different than a typical blog or website?

CP: Sites like Tip’d exist primarily to steer people in the direction of articles that they want to read, and because of this, the design/usability goal is simply to get people the information they need as clearly and as quickly as possible. In environments like this, users tend to process information in visual chunks, and this means that certain details (headlines, submission data, usernames, links, etc.) must be both obvious and quickly discernable.

On a community site like Tip’d, it’s extremely important to give users the context they need to process information and then to get the hell out of their way. Unlike a blog, people tend to use community sites over and over again in search of new and rewarding content, and this places an even higher premium on usability (which is really the hallmark of any great community site).

WJ: The Tip’d’s theme is very nice, clean, and reeks of Chris Pearson’s excellent design work Did you guys create a theme from scratch, or did you just modify an existing socialwebcms theme?

CP: In order to reduce development time, we simply used the HTML from an existing SocialWebCMS template to build the site. In truth, the existing code was so bad that we had to make lots of little customizations, but when you look at the big picture, most of the HTML is stuff that was there before I got my hands dirty with the styles.

The CSS is a completely different story, though. I rewrote everything from the ground-up and basically breathed new life into an HTML structure that makes me want to pull out my hair. As a result, I don’t really know what to call this… I guess it’s sort of a hybrid re-design, and even though we started with an existing template, the final product looks, feels, and behaves differently than the original.

WJ: What features in the design did you try to do differently than other major social news sites, like Digg or Reddit?

CP: Not that it’s all that “different” from other major social news sites, but with Tip’d, I simply tried to guide users directly to the meat of the site. In this case, the “meat” consists of three main things—article headlines, article summaries, and vote buttons. These are the three most important elements users rely on when scanning, and I wanted to make sure that they didn’t have to put forth any effort whatsoever to locate them.

To accomplish this, I employed some very basic typographical conventions in combination with a limited color scheme to emphasize both important elements and visual breaks. The end result is a layout that is almost devoid of visual fluff, and this makes scanning a more intuitive, less confusing process. The idea is that you want to avoid forcing users to learn a proprietary navigation system or new usability conventions when they visit your site—just give ‘em the keys and let ‘em drive.

WJ: Were there any restrictions designing the theme of a CMS as opposed to a blog or a regular website?

CP: CMS platforms like Pligg exist because they run a very particular type of Website, and naturally, there are little nuances that are unique to each type of site. Aside from that, though, most sites share common elements that constitute a vast majority of both the design and functionality. For instance, the primary content column of Tip’d really isn’t that much different from a stream of blog posts; it’s just been adapted to display the specific blurbs and meta data that are important to this type of site.

WJ: Do you have any tips/advice for anyone wanting to design a killer social news site?

CP: The biggest thing to watch for with any type of site built on a CMS is the core template system that you use as a foundation. Before you get started, make sure you’ve got a sensible markup structure and a stylesheet setup that isn’t overly complicated—it’ll make your life MUCH easier as you trudge through the intricacies of the design process!

Find this post helpful? Support it by saving it at Delicious.

Widgets are excellent for adding unique functionality to a web site. However, as the we becomes more “widgetized”, it’s starting to add strain on the web browsing experience for our users. The more widgets we add to our web pages, the worse it makes the web.

Widget Blindness

Banner blindness was discovered in the late nineties, and it shocked many people that users weren’t actually focusing on ads when a website was teeming with ad banners. Yet 10 years later, the problem isn’t so much with banners (that problem will always be around), but with web designers and site owners going out of control with adding widgets to their pages.

A widget for everything

These days you can find a widget for just about anything. Literally. It seems that every community website or interactive website has a goal to create widgets for their users, and users in turn place all of them on their blogs or personal websites.

Photo by manoellemos

In theory, widgets are awesome additions to websites. They add relevant information and showcase what the community or blog is doing. It’s not like a stale ‘ol banner asking you to hit a target for a prize. However, the problem doesn’t lie with the widget makers. The problem lies with website owners who try to add too many to their layouts. Just like banner blindness, users are starting to not notice widgets. And even worse: Widget blindness might even turn visitors away from your site.

6 Reasons widgets are worse than banners

The negative effects of adding too many widgets to your layouts and pages can have an even worse effect than banners for multiple reason.

1. Slow loading pages

Typically banners are a fraction of the size of widgets. Depending on the type of banner you’re using, they’re typically smaller than the average widget. usually jpegs or animated gifs, and some like adsense use small javascript. Widgets on the other hand typically use larger javascript files or flash.

2. It only takes one bad widget…

While widgets will slow down the rendering of the page in the browser, a slow or unresponsive widget can drastically increase the page load time, if it even finishes loading at all. Popular blog TechCrunch had to remove widgets due to them crashing the site.

It only takes one unresponsive widget to bring a site to its knees. The more widgets you have on your site, the more places you rely on to keep your site’s speed and response times fast.

3. Widgets take attention away from the most important part: Content

You need to ask yourself a fundamental question: Why are users coming to your Web site? Is it because of the widgets in your sidebar? Hopefully, users are coming to your site because of the stellar content.

Content is still king on the web. However, when page has 28 widgets in the layout all begging for your attention, it takes the user’s focus away from the hard-worked content and places it on content that someone else has created.

4. They take up ad space

Most site owners want a part of their layout to be designated for ads. If you’re trying to sell ads, the best spots are above the fold. If you’ve got widgets everywhere, you’re taking up crucial ad space. There is only so much space in your layout that you can devote to things other than your content. Adding a bunch of widgets to your pages only makes less space for the ads that make you money.

5. They can frustrate users

If the page doesn’t load quickly (or at all), and is crowded with cheesy widgets, the user will be prone to leave the site quickly. Unappealing site designs add to the user experience, and bad experiences can turn users away. Overcrowding a site with widgets is an easy way to add to a negative site experience for a visitor.

6. Does anyone still look at them?!

Now that the initial hype of widgets has died down, there seems to be less interest in people looking at widgets. When MyBlogLog rose to popularity and were acquired by Yahoo!, it seemed that people couldn’t get enough of widgets. Now that nearly every online community or similar website offers widgets to their users, the space has become crowded and widgets are everywhere. People have developed widget blindness.

Note: The excitement certainly hasn’t died down for widget makers and web developers. Just the people use them on the web sites.

Widget self-control

There is a temptation to add every widget you come across to your website. There are plenty of great widgets out there, and the possibilities are endless.

So how do we know how many widgets are too many? That’s ultimately a personal decision, based on the type of site you have and how your audience interacts with your site. Widgets can be great compliments to your site. There is one hard-and-fast rule that I use when deciding whether or not to add or remove a widget on any of my sites.

As long as the widget is improving the user’s experience, keep it. Otherwise dump any widgets that don’t achieve that goal.

This method usually separates the separates the wheat from the chaff. The widgets have to “prove themselves” before they can stay on the site.

You can be very critical when deciding what stays and goes. Always remove the widget if you’re wavering between keeping or dropping it. If it’s not instantly clear as to why it’s still on your website, the widget probably isn’t worth it.

It appears that the glory days of the homepage are almost over. Jakob Nielsen has been finding that web users are becoming more and more fickle. Instead of going to the homepage and nosing around the site using categories and site searches, people are instead using Google to find everything and landing on a very specific page. Web users have learned how to master the interactive environment of the web, and are becoming very good at finding what they want. So instead of doing this:

1. Go to site homepage
2. Use navigation or site search to find product
3. Go to product page

Users have completely cut out the need for going to the homepage by doing this:

1. Search for a product/page on Google
2. Go directly to that page

Are you designing for the shift?

This poses an interesting problem for the web developer. How do we get smart, Internet users to go to our homepages when they don’t necessarily need to?

In order to start sending people back to the homepages of our Web sites, a few things have to happen. For starters, we need to ultimately gain the web users’ trust so that they’ll want to see more of the site. Once they trust the Web site to give them excellent, informative information without plastering them with popups and ads, then we encourage them to complete a goal for the page they’re on.

Every Page Needs a Goal

Each second that that the browser spends on your web page is precious. Every page on your Web site should work towards an actionable goal. A goal could be:

• Buying a product
• Signing up for an rss or email subscription
• Signing up for a free account
  
• Clicking on a link to get them closer to one of the above actions
• … and many more

Each page should at least move the user closer to completing that goal. If you can funnel your users into a goal quickly and easily, they’ll also benefit because they’ve found useful information quickly. Completing goals is a good indicator that the user has built trust with your site

Keep ‘em Coming Back

Now that you’ve built the user’s trust, there’s a great chance that the user will want to check out other pages on your site, like the homepage. In order to keep them coming back to the usually neglected homepage, you’ll essentially need to do three things:

1. Make the visit worthwhile
2. Capture their attention
3. Keep their trust

Here are a few ways to make sure the user is stimulated and feels comfortable on the homepage of your site.

1. Offer quality content on the homepage

Content is King. A savvy web user is going to see pretty quickly through snake oil copy, or even content that’s fluffy and doesn’t add value to the site. Use high-quality content that is updated frequently to get people back to the homepage. The user has to find value in what you’re providing before it makes a decision to become a loyal visitor.

2. Get to the point

More often than not, homepages aren’t always explicit in what the site is about. Don’t waste your visitor’s time by adding Web users have little patience for content that doesn’t help them. Meandering, long-winded content on the homepage is a sure way to turn away site visitors. Nielsen thinks most web developers haven’t figured this out yet.

3. Use Promotions

Sites like Threadless use promotions every week that keep people coming back every week to check out the new winning T-Shirt designs. It also helps that the contest results are changed every Monday, so users know to come back every week on Monday.

Promotions done at timed intervals are great for keeping interest and excitement centered not only on your site and products, but also on the homepage as well. However, it’s crucial that the promotions aren’t cheesy or un-authentic. Authenticity is key when it comes to keeping the trust of the web user. Be sure to stay away from gimmicky promotions, and only do promotions that add value to the user’s experience.

4. Weigh every link in the navigation

Navigation systems are crucial to allowing the user to quicky find more information, once on the homepage. Giving the users lots of links to different parts of the website only clouds the mission of the smart web user. Make sure your navigation system is simple, but has enough information.

5. Make sure the design doesn’t break

This falls in the “duh!” category, but I’ve created many sites that IE wasn’t compatible with. Compatability between browsers is a tricky thing to master, but if you can ensure that if your site looks great in modern browsers (IE 6 and above, Firefox, Safari), you’ll do fine. You can check browser compatibility for free using Browsershots.org.

6. Don’t go overboard with Ads

There’s nothing wrong with ads. Ads help alleviate some of the costs associated with hosting and bandwidth. But sometimes web developers think it’s a great idea to litter web layouts with all sorts of ads. This strategy doesn’t pay off because it adds banner blindness and most importantly, it takes away from the user experience. If your ads aren’t helping the user in some way or are, even worse, trying to trick them, the user is as good as gone. It’s beter to err on the safe side and have less ads or none altogether.

7. Speed – Make sure the site is snappy

If your site takes a long time to load, a new visitor who has no loyalty to your site won’t hang around to wait for it. Odds are there are plenty of Web sites other than yours that can help the visitor, and they’re just a Google search away.

Use good practices for fast-loading page design, and check it with web page analyzers to ensure that the pages are loading as quickly as possible. If your site is heavy with css and javascript, you might try out this nifty script that combines your files and reduces load time drastically.

8. Keep the design clean and clutter-free

If you’ve ever stayed with a friend who’s house is really messy and cluttered, you’ll know what I’m talking about. It’s not fun. Cluttered, unorganized surroundings are stressful and make us anxious. This holds true in the web world as well.

Keeping your page design clutter-free is a great way to help the user find the content quicker. If your site’s design is clean and relaxing, the user will be more inclined to stay longer.

9. Give them just enough information

Only show the user what they need to know, and nothing more. This is one of the most difficult aspects of development and design, but also one of the most important. Giving visitors too little information confuses them, so they leave. Giving them too much information bores the visitor, and they leave. So it’s incredibly important to give them just enough information, and never more.

10. Checking validation helps

It’s always, always a good idea to check your html and css validation. Sometimes bad validation means that there are errors in your code that might not be affecting the page when you view it, but it might affect visitors on different browsers and computer platforms. Many web developers overlook the validation stage, but stopping validation errors early on mean that your site design will stay consistent and unbroken.

11. Create awesome product pages

If you can create compelling, beautiful product pages that a web searcher really appreciates, there’s a much higher chance he’ll want to check out other parts of your site. Also, you’ll most likely have to attract the visitors to individual pages (like product pages or blog posts) before they’ll give your homepage a chance.

12. Keep their trust

Now that you’ve gotten the web surfer to your homepage and they trust you, don’t do anything to compromise that trust. The second that the visitor smells something fishy (lots of ads, tricky wording, etc.), she’s gone for good. Don’t compromise a valuable repeat visitor by adding unethical or questionable aspects to your Web site. These usually come in the form of ads designed to trick users into clicking on them. In the end, it’s not worth it to scare away potential repeat visitors and subscribers.