I used to do wire-framing in Photoshop, and until recently I did not see a large need to have a stand alone application for this, but since my Web design company recently expanded, I have found a need to be able to do this in the cloud while collaborating with a co-worker.

So since I have had limited experience with wire-framing apps, I began my search. There were a few thing that I was looking for specifically, first I wanted to find the best value for the money, second it absolutely had to have a cloud based platform. That’s it.

Axure

Click for Video

My search began at Axure, mostly because my co-workers have used it and loved it. I have to say they have an impressive list of features

Use features like built-in widgets, shapes, and annotations to quickly create gray scale, annotated wireframes for evaluating concepts early in the process. Add color, images, and a wide range of interactions to your design from basic linking to expanding and collapsing content and conditional flow for client presentations and usability testing. Generate a detailed specification of your design with screenshots, interactions and annotations for approval or hand off to development. Axure RP can support you and your team throughout the various stages of the design process.

Axure.com

Pros

• Super fast with drag and drop components
• With the newly release Mac version it is now cross platform
• Pretty much any interaction you can think of
• Exports in multiple versions including HTML.
• Collaboration
• Amazing customer service and a really active community

Cons

• Price – this is a serious application but it comes with a pretty hefty price tag

Price: $589/license

Summary

To be honest this is just a drop in the bucket when it comes to these types of apps, these are the ones that I thought were the best at this stage in the race. There are loads of other ones out there and I highly encourage you to look at them all before you make any type of decision.
Here are a few resources:

• 15 Quality Web-Based Applications to Create Mock-Ups and Wireframes
• 15 Desktop & Online Wireframing Tools
• Web Design: Top 7 Wireframing Tools (Updated)

So which one did I decide to go with? Well for once I don’t have an exact answer, I am fairly happy with Mockflow and Hotgloo at this point but I will probably upgrade to Axure before the year is out.

For example, if you decided to add a color to the body element like so:
body{
color:#ddd;
}
then all elements on that page, that do not have a more specific rule would use this rule. Which means that all the text on your website would be displayed in the color #ddd or a grey.

Gotcha: watch out for browser styles as they will take precedent over very generic styles. For instance, the above example will not style the anchor tags , they will still appear in the browser default blue.

Recommended Use

So, here is the thing, this really becomes an art form in itself. Too much specificity and you may be making your CSS too bulky, because you re-declare styles, not enough specificity and things go completely haywire as things inherit styles they shouldn’t.

So, what is the right amount?

Here is how I work, there probably is a better way but this gets it done for me. I like to declare what I see as generic styles. So for instance, I will do something like this:
p {
font-size: 12px;
line-height:1.6em;
}
a {
color:red;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1 {
font-size:20px;
}
...

these are styles that I would want to ‘cascade’ throughout my entire site. I then generally only use one or two more selectors to add specificity like this:
#mainnav li {
float:left;
}
.post p {
color:black;
}

I am not too sure if this adds any speed to my sites, but Chris at CSS Tricks gets into efficiently rendering css here

Rules

So now you know that you want to use specificity, but now you need to understand that different attributes carry different ‘weights’ in specificity. So an ID attribute is worth more ‘points’ than a class attribute. Here is a simple system to help you figure things out:

• HTML selectors are worth 1 point. Examples are p, h1, a tags
• Class selectors are worth 10 points
• ID selectors are worth 100 points

So you add up the points, and the one with the highest point total takes precedent.

Gotcha: If the point totals are equal the selector that shows up lower in the CSS file takes precedent

The last rule you need to remember is that specificity can still be trumped by the actual location of the CSS. If you are doing things properly, and housing all your CSS in and external style sheet than all you need to remember is the stuff above. But, if you are also in the habit of embedding your css or placing it inline, first of all stop doing that, and secondly you need to know that they will also change specificity. In case you don’t know what embedded or inline means:
Embedded Styles
Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.
<style type="text/css">
p { color: #00f; }
</style>
Inline Styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.
<p style="color: yellow;">

Each of these techniques will also have an effect on the cascade. The most important thing to know here is inline styles trump everything no matter of specificity, they are followed by embedded styles and finally external.

Gotcha:
the !important css declaration will trump even inline styles. It is generally used as a last possible option and is not considered good practice. Example:
p {
color:red!important;
}

Summary

I think that every developer creates their own system for specificity, one that works for them. I think that that is fine, but I would caution agains using too much specificity as it not only makes your CSS bulky and ugly it may slow down your site.

As a web developer we all end up working on one type of project more than other, whether it is PSD slicing or application building. I have found myself doing more and more WordPress work these days, so I have done everything that I can to streamline the process.

If there is one common denominator about all websites is that they pretty much all contain some kind of form. Up until recently I have used cForms for pretty much every site that I have built, it seems to work fairly ok, but I have been finding that I am needing something a little more robust. That’s where Gravity Forms comes in.

Gravity Forms is a premium plugin (meaning that you will have to pay for it), it is very well coded and the interface is very intuitive. But, with cForms being free, do you really need the extra oomph that Gravity provides? This video does a better job of showing you the power of Gravity Forms than I can:

That all depends on your needs I guess, if you are like me and work with a lot of clients being able to deliver to them a product that they can just use and not need me holding their hands is a huge bonus. But, if you are a casual blogger that just wants to have a simple contact form on their blog then the $39 would seem a bit steep.

I guess you will have to make that decision, but my personal recommendation is that once you have the ability to create forms whenever you want, than you will find so many uses for them that you will wonder how you possibly lived without them before.

If you are thinking about checking Gravity Forms out here is an affiliate link that will help keep this site alive.Click here to visit Gravity Forms.

• Georgia
• Times New Roman
• MS Serif
• Verdana
• Arial
• Arial Black
• Impact
• Tahoma
• Century Gothic
• Lucida Sans Unicode
• Trebuchet MS

Before all you designers jump on me, I am going to fully admit that I am pushing the envelope on a few of these, and that is the entire point. By definition Web Safe fonts are:

Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families.

Wikipedia

As you can see we are only talking about fonts that are “likely” to be on a wide range of computers but are not guaranteed to be on any of them. This is a serious impediment when it comes to designing for the web, because designers have to limit their creativity or be forced to use an alternate method like these.

Method 1 – Use Images

If your design has a very unique look, this means it will probably also include a very unique font. One way to preserve your design is to slice each and every instance of the unique font into an image. Developers would then insert the image in place of text. Although the web site ends up looking like the original design, it now has some serious restrictions. First and foremost that image text is now no longer editable, meaning that every time the text needed changing a new image would need to be created. Secondly, this text is now not machine readable, which presents a problem for both screen readers and search engines alike.

Method 2 – Using SIFR or Cufon

Even though these two methods use different technology, one uses Flash while the other uses JavaScript, they are very similar in nature. Both techniques require the developer to embed the font, and then replace existing text with generated text. Up until now , I have used Cufon the most, simply because I was noticing some speed issues with SIFR, one nice thing about these techniques are that they leave the text editable and machine readable. Both techniques are valid text replacement techniques and can be explored more at Cufon or SIFR.

Method 3 – Using @font-face

Although @font-face is a CSS rule implemented in Firefox’s latest 3.5 browser this is the same technique that Google is endorsing with their API. Of course, they are not calling it that, but the implementation is the same. To use @font-face you would need to upload the font to your server (or any internet accessible server) and call it in your CSS files, if the end user has the font on their local machine already the site will use that, if not the site will use the font on the server. Here is an example:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}

While this technique is certainly a cross-platform, cross-browser, lightweight method it may not be entirely legal. Font-developers spend a lot of time creating their products, and therefore need to be reimbursed accordingly, by offering the font freely on your server you MAY be breaking some copyright laws. Since I am not a lawyer, I will not get into that, I am just saying you should know the facts.

Method 4 – Google Font API

So to the rescue comes Google (yet again), like they did for JavaScript libraries Google is offering to host the fonts on their server. The benefits are obvious, you save on bandwidth, technical expertise and possible legal problems… sounds good to me. Implementation could not be easier either. It can be done in three simple steps:

1. Surf over to Google’s font directory and see if you could make use of any of the available fonts
2. Grab the code to embed the head section of your website, here is an example<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
3. Style the desired text by using CSS, here is an example h1 { font-family: 'Cantarell', arial, serif; }

And that’s it super lightweight and a no-brainer to implement. Jeff at Nettuts has a great screencast on how to do this as well.

Summary

I am actually really excited about this, while I have to admit that Google’s existing font directory is a bit lean, I also have no doubt that this will grow quickly. The other nice thing is that these fonts will also be cached in a client’s browser, meaning that if the font is used on a site you have already visited, you won’t have to download the font a second time it will instead be loaded from the browsers cache. This will save on both speed and bandwidth.
So what do you say? Are you going to use this?

Different design call for different solutions so I will outline a few of the techniques I have used in the past to create a nice rounded corner. One downside to this techniques is none of them, except the CSS3 technique, use what I would consider to be semantic markup.

Technique 1 -Three Images

If you are working with a fixed width design, this one can work out quite nicely. First you start with a Rounded corner element like this box.

Next you will want to slice the image into three different images, like so:

You will need save your images using proper naming conventions so that you can easily target them later with your css. I am using rounded-top.png for the top image, rounded.png for the middle image and rounded-btm.png for the bottom.

Now to the markup..
<div class="rounded">
<div class="rounded-top">
<div class="rounded-btm">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
As I said in the beginning not the most semantic markup you will ever see, but it gets the job done. The only thing to remember is all content for this container needs to be housed within the .rounded-btm div, that way when we expand it, the other divs will expand as well. Now we need to use CSS to make this work..

.rounded {
background: url(rounded.png) repeat-y 0 0;
width:580px;
}
.rounded-top {
background: url(rounded-top.png) no-repeat 0 0;
}
.rounded-btm {
background: url(rounded-btm.png) no-repeat 0 100%;
padding: 20px;

Again nothing too fancy here, I have only added the width dimension to the outermost container, that way all the children containers are forced to fit. Then we added a little bit of padding on the innermost container to give the text a bit of breathing room. Another thing that I would like to point out is that for this simple example I could have actually used just two images the top and the bottom. I would then have to declare the background color on the outermost container, and in this case I would also have to set the left and right border. Also since I was not too careful when slicing I have a fair amount of white background in my images, this would have to be trimmed away so that the images fit the full width of the outermost container. All in all, I usually find it easier to have three images and the few extra kb is not going to slow down a website.

Technique 2 – More images

Of the image techniques this is the most flexible as we can set the width or height to whatever we like, however it involves a lot more markup. The idea is to take our original image and instead of slicing it in three, we instead slice it into 4 images, each one being a corner.

Once I have sliced these images I like to save them in a sprite, like this:

Now we create some markup.
<div class="second-tech">
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Lets go over it, I have created one container called second-tech, inside this container we have four more divs that are all given the class of corner, but they are also given their own unique class. All content needs to be inside of the .second-tech div but outside of the corner divs.

Now we need some CSS to make it look the way we want:
.second-tech {
background: #b0c4de;
padding:20px;
position: relative;
}
.corner {
height:13px;
position:absolute;
width:13px;
}
.tl {
background: url(sprite.png) no-repeat 0 0;
left:0;
top:0;
}
.tr {
background: url(sprite.png) no-repeat -38px 0;
right:0;
top:0;
}
.bl {
background: url(sprite.png) no-repeat 0 -38px;
bottom:0;
left:0;
}
.br {
background: url(sprite.png) no-repeat -38px -38px;
bottom: 0;
right:0;
}

In this technique, we need to make sure that the parent container has a positioning on relative on it, we then position all the children absolutely. As you can see we move them around the box by declaring two values either left or right, bottom or top. To keep the http requests down I chose to create one sprite image and change the background position, rather than create 4 different images, I can do this because the corners will always be a specific height and width.

Use CSS3

If I was building all my websites for myself, this is the only technique I would use. Visitors that were using modern browsers would see the rounded corners, everyone else would be left with good old rectangles. This technique is the most flexible and has 100% semantic markup.
<div class="css3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

That’s it for markup, one lousy div. Everything else is done with the CSS:
.css3 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

Look how neat and tidy the future is going to be! You can even target individual corners if you like:
.css3 {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
}

Summary

This is by no means a complete list, I mean I have only outlined three possibilities. If you would like to suggest a link or another technique please feel free to do so in the comments. If you want to further explore the different techniques out there, take a look at:

• DevWebPro’s article
• CSS trick
• Nettuts

I recently found myself in need of a multi-column list that was still using semantic markup. It is very important that you learn to do EVERYTHING in semantic markup, while this may not seem like a big deal if you are writing the code by hand, it becomes much more clear when you are using content that is generated by a CMS. In these cases, creating a multi-column list is not as easy as just creating multiple lists and positioning them accordingly, instead you have to rely on repositioning the existing markup.

I have used a few different techniques, to show you how I managed to accomplish this:

Technique 1 : Floated list items

This is probably the best solution of the bunch but, as you will see later on ,it is only good for unordered lists where the actual list order does not matter.

To get started first you need some semantic code:
<ul>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
</ul>
Now we need to use CSS to make it look the way we want :
ul{
list-style-type:none;
width:500px;
}
li {
float:left;
margin: 10px 0 0 0;
padding: 0 10px 0 0;
width:199px;
}

Example

• List Item
• List Item
• List Item
• List Item
• List Item

Alright so the trick is to have a set width on the containing ul tag. Then to also set a width on the li’s within the ul. The last important step is to make sure that the list items are floated left, this causes them to line up in neat rows.

Like I said earlier this is really good for, unordered lists but what happens if you try to use it on an ordered list.

Example

1. List Item
2. List Item
3. List Item
4. List Item
5. List Item

As you can see it is definitely not ideal.

Technique 2 : Using classes and margins

If you can manipulate the markup, meaning that it is not being generated, then it is possible to add classes to each of the columns and place them accordingly using margins.

Once again we will start with some markup:
<ul>
<li class="alpha">List Item </li>
<li class="alpha">List Item </li>
<li class="alpha">List Item </li>
<li class="beta first">List Item </li>
<li class="beta">List Item </li>
<li class="beta">List Item </li>
<li class="charlie first">List Item </li>
<li class="charlie">List Item </li>
<li class="charlie">List Item </li>
</ul>


As you can see the markup is starting to look a little messy (note the classes and the multiple classes on the first item in each column).The css to make this into columns would look like this:
li {
width:120px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
position:relative; /* IE needs this in order to recognize links in all columns */
}
.alpha {
margin-left:0;
}
.beta {
margin-left:150px;
}
.charlie {
margin-left:300px;
}
.first {
margin-top:-105px;
}

Example

• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item

Ok lets go over it. The css that targets all the list items (li) sets all the widths, margins and paddings for the entire list. While this is important for the other techniques with this one it is critical because we need to know exactly where to set our margin-left at.

What makes this example particularly interesting is the ‘first’ class. This is what moves the columns up so they align nice and neat and are not staggered down the page. Since we have the same amount of negative margin on each list I can re-use the same style on column 2 and 3. To calculate the amount needed for the negative margin is easily calculated with some simple math. We know we have 4 items in each column, we will also need 3 spaces in between our items. To keep everything uniform we will make each of these 15px, (line-height and margin-top settings) 15 x 7 = 105px.

This technique also works nicely for ordered list as you can see in the example below. Although I did find that I had to add an extra 2px of margin to each ordered list item so the negative margin is 113px on the ordered list. Unfortunately I could not find any documentation on why this is to share.

Example

1. List Item
2. List Item
3. List Item
4. List Item
5. List Item
6. List Item
7. List Item
8. List Item
9. List Item
10. List Item
11. List Item
12. List Item

Technique 3 : Added classes

The previous 2 techniques are still not ideal because most CMS’s do not allow you to edit the markup directly, most of them do however add unique id’s or classes to each generated list items. We can use this generated code and display our list the way we want. Here is some example code that could be generated by WordPress.
<ul>
<li class="page_item page-item-2">List Item</li>
<li class="page_item page-item-4">List Item</li>
<li class="page_item page-item-6">List Item</li>
<li class="page_item page-item-8">List Item</li>
<li class="page_item page-item-10">List Item</li>
<li class="page_item page-item-12">List Item</li>
<li class="page_item page-item-14">List Item</li>
<li class="page_item page-item-16">List Item</li>
</ul>

And here is the css we could use to make this line up into 2 columns:
.page_item {
margin:15px 0 0 0;
line-height:15px;
}
li.page-item-2,li.page-item-4,li.page-item-6,li.page-item-8 {
margin-left:0;
}
li.page-item-10,li.page-item-12,li.page-item-14,li.page-item-16 {
margin-left:200px;
}
li.page-item-10 {
margin-top:-105px;
}

Example

• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item
• List Item

So by grouping several list items together we target entire columns and set the appropriate margins to line up the columns. We also have to target the first item of each column, if we had several columns we could also group them in the css file. Like technique 2 we calculate the negative margin on the second column by adding the list items and spaces together. 4 list items, 3 spaces each are 15px high so the total is 7 x 15 or 105px. This technique also works nicely with ordered lists.

Example

1. List Item
2. List Item
3. List Item
4. List Item
5. List Item
6. List Item
7. List Item
8. List Item

Summary

These are just a few samples of possible solutions, they seem to work pretty well for me. If you have any solutions that I may have overlooked please add them to the comments and share them with other

Further resources

• A List Apart

One of the most sought after feature of any business website, is the ability to be able to conduct e-commerce. This is another area where WordPress really shines as there are numerous choices based on your needs. Which one you decide to go with will depend on your needs.

Summary

One thing I really hate about these lists, is when you get to the end and nobody steps up to say who they think is best. Well I am not going to do that, right now this is a two horse race with WP e-commerce and Shopp being the best solutions by far. WP e-commerce has time on their side and therefore has had the option to fix a lot of bugs or hitches, unfortunately they have also become a bit lazy, they have a very good product that could be excellent. Shopp on the other hand is the up and comer that is working hard to take away market share from WPE, in my opinion they have the better ‘paid’ solution, but if I need a quick and cheap solution I will probably go with WP-ecommerce. What is your opinion?

This presents a unique set of problems for a web designer, especially if you focus (like I do) on an established CMS (WordPress) with loads of free plugins. My clients invariably want the latest and greatest whether they need it or not. I find a great amount of my time is spent dealing with this problem, I have to first educate my clients on why they do not need all the bells and whistles before I can provide them with an effective web site.

Here are a couple of steps that I use to help me with my clients.

Spend the appropriate amount of time on discovery

Project discovery is the best asset that you will ever have. If you are not using this as part of your work flow you need to start immediately. If you are not familiar with Discovery, it is the art of interviewing your client before you ever take on the project. During this process you will want to ‘discover’ a few of these things.

• Goal/Vision
• Product
• Audience

When your client becomes enthralled with the latest gadget for their site, be sure to focus them on the entire goal of the site. What are they trying to accomplish? Does this ‘gadget’ fit into these goals? Is the target audience going to use it?

Technical Know How

You are going to want to know a bit about your client. Like are they technically savvy? Or do they still use VCR’s that flash 12 o’clock at home? Remember as Web Developer we have a bit more know how when it comes to technical things. I have had many clients that need an inordinate amount of time spent with them, just to learn a few basic things like logging into a CMS or creating a post in WordPress. These clients are definitely going to struggle when it comes to some of the more advanced uses that WordPress can do. It is our job to make sure they are only using the tools they need and are not overwhelmed with settings they don’t need or want.

Summary

Your clients are going to be bombarded with technical jargon daily, it is only natural that they will believe some of the hype and want to stay on top of the technology game. While I tend to try and discourage my clients from taking on too much, I also try to remind myself that I am in the customer relationship business and in the end the client will be happier if you give them what they want. One of the ways I try to meld the two trains of thought, is to sell my clients on a maintenance package where I can take care of the technical stuff and they can concentrate on running their businesses. That way we are both satisfied with the results. What do you do for you clients?

If you have no idea what a GEO cache here is the short description:

Geocaching is a high-tech treasure hunting game played throughout the world by adventure seekers equipped with GPS devices. The basic idea is to locate hidden containers, called geocaches, outdoors and then share your experiences online. Geocaching is enjoyed by people from all age groups, with a strong sense of community and support for the environment.

Geochaching.com

Anyways it occurred to me that the same thing happens approximately 2 billion times a day. For those that have guessed from the title, that is the latest estimate for the number of searches performed daily on Google. So how is geocahing similar? Let’s break it down..

Getting Started

In both geocaching and search you have to decide on specific goals. Before you start a Geocache you have to decide on a specific one to complete there are literally millions,GeoCaching.com is a good place to start but like search engines there are a lot of different options .

In search you have to first be looking for something, no matter how specific. You also need to start at search engine, like geocaching there are a lot of options.

Refine your Search

In geocaching you start out with one set of coordinates, when you get there you need to find some more clues to move you one your way. Anyone that has used a search engine can immediately relate, try searching for a generic search term like ‘puppy’. You will be bombarded with millions of results that may or may not answer your question. To get your answers you will probably have to do some research and enter a more specific term in like ‘puppy training’.

As you further refine your search terms you get closer and closer to the answer that you are looking for. With geocaching you will need to find all the clues to be able to find the final ‘treasure cache’. In both cases specificity is very important.

Conclusion

There is an actual web lesson to be learned here, that is that people looking for answers need be looking with very specific search terms or ‘keywords’. When you begin your search engine optimization the keywords will often determine whether your efforts are going to be a success or fall flat. The good news is with search engine optimization you can get your keywords mostly right and still turn them into a success, with geocaching you cannot possibly finish without having the coordinates EXACTLY right, but that is another story…

As a web professional I am constantly bombarded with social media techniques, everybody has the answer. I however do not.

I can see how Twitter presents huge possibilities but I do not like the way 90% of the people are now using it. Too many people are using it to just spam their own content or systems to other users.

I absolutely hate spam! In fact, if I find one of the people I am following sends anything remotely spammy, I immediately un-follow them, and I am pretty sure I am not the only one.

So the question still remains what is the best way to use Twitter for a business?

I really think that there is only one answer here, but many ways to accomplish it. Build your Reputation. That is it. I would like to know your ideas on how to build the best reputation on twitter. I will start it off with this:

Give more than you get

Whether it is re-tweeting other peoples web sites, or simply answering their questions, this is a good way to build goodwill.

Now it’s your turn, what is the best way to use Twitter?