Latest blog post: Free iTunes book! – The Twitter Effect: How to increase your follower count and gain exposure on Twitter →

The REAL way to Increase your follower count and gain exposure on Twitter

Give it a search on google and you will find a million and one articles that share their own step by step guide to success on Twitter. You will also find a ton of adverts for auto adders and spam programs >:/ If you are looking for this kind of “get followers quick” scheme then you’ve come to the wrong place. If you’re looking to actually increase your exposure and influence and actually use Twitter the way it’s mean to be used, then you’re in luck because I’m going to give you the REAL secret to increasing your follower count and gaining exposure!

Twitter is meant to build relationships

The minute we start looking at Twitter as a “marketing tool” we lose sight of what the service really is. If you use Twitter purely for marketing your product, then, I can tell you with confidence you will do nothing but piss people off and drive them away.

One very important thing to understand is that you should never close too early. What do I mean by that? Well, whether you are looking to gain more exposure for your product, brand, or even your own name, you are trying to close someone. You are trying to sell them on something. Even if “closing” simply means converting them in to a unique visit to your blog. Here’s an example of closing too early:

“@whoever hah that’s true, say if your in to cars then you should check out my auto blog over at www.whatever.com! I bet you’d love it!”

Most twitter users will go running for the hills at the site of this tweet. Can you guess what the first thing that runs through the user’s mind is? “SPAM!”. That’s right. The same feeling they get when they think they’ve gotten a comment on their blog but it’s actually just some joker faking interest, hoping to farm links to his own site. So, please don’t do this.. you will only hurt yourself.

Want to know more about this? Talk to Gary Vaynerchuk (@garyvee) on Twitter or grab his book the Thank You Economy. Gary started out with 0 followers on Twitter, just like everyone else. The way he amassed his faithful following was by building a relationship with his potential customers instead of just trying to stuff wine specials down their throats.

So, instead of responding immediately with a link to your product or website, try to help the user. Or, at the very least, engage in conversation and learn something about them! If they like what you say then chances are they will checkout your profile and find your website all by themselves!

Engage!

Engaging with others is key. No one wants to follow an empty stream that gets updated once a week. So join the conversation! There are a ton of Twitter clients that can help you stay connected to the conversation. Here a few good programs to check out: HootSuite (my favorite!), TweetDeck, Seesmic.

Find some keywords that interest you and monitor them. If someone says something that you are interested in then engage with them! Get in the discussion and make friends! For those of you who care about the numbers, this alone will increase your follow count drastically.

HootSuite is my weapon of choice and is a great way to keep tabs on my different Twitter feeds:

Follow the people who interest you the most and engage!

Head over to wefollow and find the greatest influencers who align with your interests and follow them. Many of them will openly interact with other Twitter users so get in the conversation and talk to them! Every time they mention your name in an @ reply you are gaining exposure and, not to mention, making friends!

Lists are a great way to keep all of your follows organized. Most of the Twitter clients can turn these lists in to a separate stream so you can easily monitor them.

Follow Friday

Follow Friday is a fun way to recommend people for other Twitter users to follow! It’s a great way to establish connections and to make your followers very happy!

The problem, though, is that most users don’t understand the proper way to use Follow Friday. Here is an example of what not to do: “#FF @ericbieller @mattboyd @davidcc @driklyn @garyvee Thanks guys!”. This doesn’t give anyone a reason to follow these users. It really has become equivocal to spam and is currently running wild on Twitter.

So what’s the proper way to execute a Follow Friday? Simple. The point is to give your followers a reason to follow a specific person. So just do that!: “#FF @davidcc because he is a great artist and has some really strong opinions!”.

Conclusion

For those of you looking for the secret technique to gaining thousands of followers over night, keep searching. Besides, followers gained through those techniques are low quality followers who are only looking for followers themselves! Not to mention most of them are spam bots!

The key here is simple: engage. If you create value to for other people then they will follow you. The simplest way is to just put out meaningful content. If you remember to do that and you stay engaged and become part of the conversation then you will see you numbers and exposure rise very quickly!

I’ll leave you with some proof. I employed the techniques mentioned above for the last few months and here is my follower graph:

Follower Graph

The bottom line is, it works. So what are you waiting for? Get in to the conversation! And if you have anything at all to add please let me know in the comments below. Is there anything I’m missing? Do you have a secret of your own? Let me know!

Photoshop Brush Pack – Rough hand drawn sketched lines

I’ve always had a hard time finding a good brush pack for that hand drawn sketched line effect. These are great for highlights, strikethroughs and underlines. Feel free to use these for whatever you’d like!

Lines Sample

Download now!

10 Great Photoshop paper effects tutorials – peel, bends, creases, folds, polaroid, shadows and more!


1. Peeling Sticker Effect

Sticker

This is a great tutorial that shows you how to use the warp tool to create a pretty believable sticker effect. This effect is great for web icons.

2. Create a Realistic Page Curl in Photoshop

Page Curl

This one also uses the warp tool. A great technique for creating 3d page curls.

3. Creating Old Polaroids in Photoshop

Polaroid

It’s hard to find a really good polaroid tutorial but this one works pretty well. It actually supplies you with an old polaroid and shows you how to crop and impose your picture on it.

4. DIY Advanced Paper Shadow in Photoshop

Shadow

This one is one of my favorites. This technique is very popular on the web right now and I find myself using it very often. I would even recommend lessening the shadow just a tad and creating just a hint of that raised, 3d effect.

5. A Scrap Of Notebook Paper

Notebook Paper

I really like this tutorial because it shows you how to build the piece of scrap notebook paper completely from scratch and it looks pretty realistic.

6. Creating Paper Folds and Creases

Paper Crease

This one is pretty simple but ends up looking fairly realistic.

7. How to make an awesome grungy paper texture from scratch

Grungy paper

This tutorial teaches you how to create a cool grungy paper effect. I recommend going through the tutorial with the paper texture he provides and then trying it with your own once you get the hang of it.

8. Create a realistic grunge peeling sticker

Grunge Sticker

This tutorial is a bit different from the sticker tutorial at the beginning of this post. This one is grungy and uses more of a crease instead of a bend. Great effect for both web and print.

9. Folding Corners

Page curl

Another really good page curl tutorial that uses more of a crease.

10. Glossy Photos

Glossy photos

Create a stack of glossy photos.

Free PSD: UI submit buttons for your interface

Here are some fancy buttons for you to use for you own interface or as inspiration. These are FREE to use for both commercial and personal use. Please let me know if you do end up using them so I can see what you did with them! Thanks for checking it out!

Button UI

Common UI/UX mistakes that can hurt your website’s conversion

Most would agree that user experience (UX) is important to the overall prosperity of a website or web application. In some cases, though, the user’s experience can make or break a site completely. UX mistakes can affect conversion, piss off users and give your site a bad reputation for being hard to use. Here are some common mistakes that I see all over the web that directly affect customer conversion:

Unclear Mission

You would likely be surprised how many web designers don’t realize how important their mission statement is. Actually, this might arguably be the most important UX factor in regards to conversion. I mean, if a user doesn’t immediately understand what the heck your product does, why would you expect them to click around on your site and not just close the window altogether? Want to see an example of a mission statement done right? Checkout some of these examples of rocking mission statements:

campfirenow

cuphon

forrst

Hidden Login / Signup

There really is a science behind login and signup placement. Some websites even put both right on the front page:

New Twitter

Facebook Homepage

While this technique might not be right for every occasion, it really is an example of why it’s so important to grab the user without making them think too hard or click too much.

This technique may work wonders for sites like Facebook and Twitter but it might actually be a bad idea for smaller sites with less traffic. Most people have already heard of Facebook or Twitter and come to these sites with the intention of signing up. Less popular sites don’t have that luxury. Instead, it’s a good idea to use your header real-estate to grab the user’s attention with you mission statement and funnel them to the signup button.

Dribbble

Dribbble focuses on highlighting the work of it’s members to entice spectator’s and potential players to sign up.

The Funnel

I mentioned the funnel briefly but it deserves a bit more attention. Basically the goal of a web page is to take the user through a series of steps, the last if which is them signing up and becoming a conversion. A good funnel starts with a large mission statement (see the examples above). This gives the user a clear understanding, in as few words as possible, what your website is all about.

If your site is a social service, step two might be including a window into the social activity on your site. This might be a list of recent signups, comments, etc.. Having a social section on your front page lets the user know that they aren’t the only one using your website.

While most sites don’t seem to follow this trend, I believe that having an FAQ or a Learn More section on your home page is an excellent conversion tool. After all, why make the user click a link to get to these details when they are usually the best way to learn about your software or app?

Another popular conversion tool is video. It’s a hot trend right now to include a fun video right on your home page that shows how useful your service is. This only works if your video is good so please, if you don’t know video I would highly consider hiring a professional to help you out.

Here’s an example of how I might be converted to a user given a site with a proper funnel in place:

1) I take in the overall design aesthetic of the page
2) I read the mission statement, assuming it’s no longer than a sentence
3) If I am intrigued then I immediately search for a video or a learn more section near the top of the page
4) After the video ends I take a look at the activity feed on the front page and get the feeling that the site is alive with users and traffic
5) At this point I am interested in signing up so I look to the top of the site for a signup button
6) If the signup form is more than 4 fields or includes a captcha I close the page and move on
7) If the signup form has an option to use Facebook or Twitter to connect then I use that

While this certainly isn’t a blue-print for converting an average viewer into a user, it is the general path I take when making the decision to become a member of a service. A good practice might be to take a second and make a list like the one above and see what it would take YOU to sign up for your service. After all, we are all potential users.

Small but important UI mistakes

Using default input text as the label

A huge pet peeve of mine is when an input field has default text which doubles as it’s label. If you’re not sure what I’m talking about, here’s an example:

Comment Form

The problem with this is that I usually tab through form fields. However, the label automatically goes away when a cursor enters the field. Then I’m stuck with an empty field having no idea what I’m supposed to enter. This may seem trivial but most users don’t like to think when doing mundane tasks like entering in a comment. A series of potential stumbling blocks like this could cause them to abandon their comment altogether.

5 Star rating systems

It’s slowly becoming common knowledge that these rating systems are highly flawed. The problem is, when a user likes an item they will generally give it a 5 star rating. If they dislike the item they will generally give it a 1 star rating. This leaves your site with only 2 types of content. Content with a 4-5 star and content with a 1-2 star rating. Instead it’s more practical to use a simple like/dislike or thumbs up/thumbs down type of system. The results can be output as a percentage or as a star rating. In either case this yields much better results.

YouTube actually recently abandoned their 5 star rating system for a more practical one: YouTube

What are some common UI/UX mistakes that you’ve noticed?

Are there any common issues you would add to this list? Let me know in the comments section below. Thanks for reading!

Awesome UI inspiration from great UI/UX and web designers

Here are some awesome designs and UI that I have stumbled upon recently that I have found very inspiring. I’ll go into brief detail about each item and why I like it. Enjoy!

Youzee has an awesome “coming soon” page that is functionally innovative and very pleasing to look at. I can’t wait to see what cool UI their service has once they launch!

Not sure where this one is from but it is an awesome example of elegant UI controls.

Most of you have probably heard of Sofa. They are responsible for apps like Versions and Kaleidoscope. They have a firm grasp on the balance between good UX and good design. Head over to their website and check it out. You will no doubt be inspired.

Catch A Pixel has an awesome, yet simple web presence with a very eye-catching header followed my a modest content layout. Definitely check them out!

What Letout Outlet is a focus on the product itself rather than content. The design is very clean overall and offers very large photos of the product which pretty much tell you all about it without having to read or think too much. Relogik uses this same layout for all of their products so feel free to browse around and check them out!

At first glance Checkout may seem like a ripoff of Apple.com but it is actually design genius. By recreating the feel of an Apple website, the brand immediately has a trust factor among current Apple users. The design is also different enough that I wouldn’t at all call it a blatant copy. Overall a really good move in my opinion.

Free PSD – Sleek and small calendar UI for jQuery, CSS date picker

Here’s a great little calendar that I have been using in my own User Interface that is great for date pickers or flat CSS calendars. If you use it please let me know as I’d like to see what you do with it. As always this item is free for both commercial and personal use. Enjoy!

Calendar

Free UI sliders and progress bars for your interface

Here are some pretty looking UI sliders and progress bars for you guys to use in your own projects or as inspiration. These are FREE to use for both commercial and personal use. Please let me know if you do end up using them so I can see what you did with them! Thanks for checking it out!

Slider Bars

What makes iOS user experience so much better than Android?

Since starting my position as UI/UX Designer at Tapjoy I have had the opportunity to become more familiar with some of the latest Android Devices. Though I have been an iPhone user since the first iteration of the device, I consider myself open to new devices and experiences. I had heard a lot of hype about the Android phones (mainly the HTC) being a comparable alternative to the iPhone so I was excited about the opportunity to check them out. However, the point of this article is to tell you that, despite 4g, kickstands, larger screens, higher-res cameras, Android phones still can’t compete with the iPhone.

For the sake of clarity, I want to disclose that I will be looking at the phone from a user experience perspective. Typical reviews are quick to compare specs and features but don’t usually focus on the overall experience and aesthetic of the device. This aesthetic appeal is what makes the iPhone the top consumer handheld, despite any lacking features. So if you care more about features and specs than user experience, you might completely disagree with what I have to say. That being said, here are my thoughts on the two different experiences:

The Device

While both the HTC and the iPhone have a sexy factor (which I understand is completely subjective) I think the iPhone wins out on look and feel. The device is more solid and has less seams around the body. The HTC has a larger screen but it is nearly the same resolution as the iPhone. This makes the iPhone screen more crisp overall. Other than that the devices are pretty much aesthetically comparable.

The HTC has 4 physical buttons below the screen while the iPhone only has one. This, in my opinion, highlights the ease of use of the iPhone UI. They built it without the need for more than a single physical button. Also, depending on how and when you click this button, it executes multiple functions such as pulling up your music player, showing the multi-task pane, closing the current open program, waking up the device, accessing voice control. You have to hand it to Apple for this. They creatively and intuitively made a single physical button which accesses a wealth of functionality on the iPhone.

Home Screen

The HTC home screen is by no means ugly and it offers a wealth of information like date, weather, time, etc. The problem I have with the HTC home screen is the complexity. A 5 year old kid would have more trouble finding and launching a game on the HTC than they would on the iPhone. The reason the iPhone wins out is because everything is represented by an icon. Likewise on the HTC you have some icons, an arrow button to the bottom left and an art palette icon to the right, not to mention the physical buttons like home, menu, back and search which are on the device itself.

Some may see this as a trivial difference but I happen to think that this is a huge difference. It represents both brands as a whole. Apple has a reputation for creating increasingly simple interfaces, especially on iOS and that is what gives the device mass appeal despite the closed nature of the system.

Scrolling & Transitions

iPhone is the first device (and the only one that I have seen) to have fluid scrolling that doesn’t suffer from constant lag, over-sensitive touch sensors or unrealistic physics. When comparing the devices side by side it is clear that scrolling in general on the iPhone is much more realistic and lag-free than on the HTC. The iPhone is obviously trying to mimic reality by providing realistic flicking and easing.

I’ll give the HTC points for having respectable and usable scroll functionality, better than most of it’s fellow Android devices but it is still beat out by even a first-generation iPhone.

Windows Mobile / Blackberry Syndrome

I find the HTC interface to be a cross between Windows Mobile and iPhone. While it is a huge improvement over Windows Mobile, it is not as polished or refined as the iPhone. This is highlighted when interacting with many of the more mundane features and settings. Give both an iPhone and an HTC to a first-timer and give them a few tasks like changing brightness, connecting to wifi, managing contacts and adding a mail account and see what they say. More often than not the tasks will be accomplished more quickly on the iPhone and the user will prefer that device over the HTC. This is because you first have to click the bottom left arrow icon to access the real phone features and you are immediately presented with a huge Blackberry-style list of programs. Combine that with laggy scrolling and you have an overall bad experience.

Conclusion

My goal with this article was to explain why, regardless of bells and whistles, the overall experience of the iPhone beats out all Android phones I have used. This is due to crisp and lag-free scrolling, a basic child-like interface and usability standard, and intuitive controls, buttons, and layouts.

Though I have yet to use Windows Phone 7, I will likely be doing a comparison in the near future. I am excited about the platform and think it is great that Microsoft is finally taking a risk with their mobile platform and trying out some unique UI.

As always, thanks for reading!

Organizing, managing and deploying PHP projects in subversion (SVN)

Managing projects in SVN can be difficult, especially if you are just starting out. Hopefully I can clear out some common misconceptions about source control and help you understand it a little better.

Many prefer to use command line but I find a GUI tool like Cornerstone, Versions or Tortoise to be easier for beginners to work with. For this tutorial I will be referencing Cornerstone 2. Also, this guide is meant for those who are already slightly familiar with the basic concepts of SVN. It does not go into detail about setting up SVN, though I will recommend beginners to checkout Beanstalk – a web based tool for setting up and managing SVN/Git.

How does SVN work?

All you really need to know is that SVN provides a way to store all of the revisions made on your code-base to a remote (or local!) repository. Each time you commit your code to this server it will create a revision number associated with that set of code. This allows you to compare different revisions of your code and to branch off into new lines of development without getting different versions mixed up.

SVN also makes it easy to work in a collaborative environment. Multiple coders can work on the same code-base and their changes will be merged together by SVN and given a revision number. Here are some important terms to understand about SVN:

Repository – The repository is the main folder that stores your SVN files. It is typically organized into 3 folders. Trunk, Branches and Tags.

Trunk – Think of your svn repository as a tree. The trunk is where the main code-base is found. While not all SVN setups are the same, the trunk will generally contain the freshest development copy of your code.

Branches – SVN, like a tree, can be branched. A branch is generally a line of development that contains a copy of the main code-base from the trunk but is worked on separately. Branches are great for fixing bugs, testing new functionality and adding new features without disturbing the main code-base found in your trunk.

Tags – A tag is basically a snapshot of the code at a particular revision. Let’s say you just released version 1.0 of your code and you want to make sure you have a separate copy of the code that will never change, you would make a tag of it. This way you always have a copy of the code that you deployed or checked out in case you need to revert back to it or examine it for whatever reason. A tag is typically made of either the trunk or a branch.

Checkout – Checking out code from a repository gives you a fresh copy of the latest revision of the code-base. At that point the directory on your system that you checked out the code to basically becomes a mirror of the repository. You can then start editing the code and committing changes!

Commit – Once you have checked out your code, worked on whatever it was you wanted to get done and have completed it, you would then commit the new code to the repository. Each commit adds a new revision number to the repository so you can always see what the code was like before that commit.

Update – Let’s say the last time you checked out the code was yesterday. If you are working with a team of developers then one of them may have committed a change since the last time you updated or checked out the code. Updating will bring your code to the latest version of the code. You would also typically update before a commit. This way if there is a conflict that must be resolved, you can fix it locally instead of remotely.

Conflict – A conflict occurs when SVN can’t figure out how to merge two different changes. This means you will have to manually decide what to do about that particular conflicted code. Cornerstone (and other GUIs) will show you the conflict in the code and ask what you want to do with it, typically using a function called diff.

Merge – Let’s say you made a branch off of the trunk in order to add a new feature. Once that feature is complete you would merge it back into the trunk so that it could be part of the main code base. You might also follow this same method for bug fixes.

How do I manage releases, bugs and changes in SVN?

I mentioned this briefly in my explanation of the terms above but it is important enough to go into more detail about. Before even writing your code, it can be a good idea to develop a basic build and deployment strategy to keep your code versions organized.

Here is a graphic of a recent build strategy that I used. I’ll go into detail about what all these lines mean:

Dev & Release Cycle

In this diagram the trunk is represented by a straight line of development. This is the main code-base which is checked out and worked on for implementation of new versions and features. Since I am the sole developer on this project it is alright to use the trunk as my main line of development. However, in a multi-dev situation you would likely branch off and each dev would merge changes and fixes from their branch into the trunk. There really isn’t a set methodology for this and it’s best to simply find out what works best for your project.

In the diagram above you will see a branch off of the trunk called RELEASE-v_v. This means that when version 1.0 of the software is released, we branch out and call it RELEASE-1_0. Once we create this branch, all changes/updates/fixes that need to be done to the live site occur in this new branch and not the trunk. The trunk is instead used for the new version and features of the site. However, you will notice that if a bug fix is made on the RELEASE-1_0 branch it is merged back into the trunk. This will keep the core code in the trunk up to date with the live site throughout development.

There was also a TAG created when we made the branch for RELEASE-1_0. This is good practice because it gives you a snapshot of what the software was like at key moments in the development process. In this case it’s a snapshot of the initial release just before it was deployed.

You will also notice the I am branching off for major bug fixes to the main code base. This is good practice because, when you run into a major bug, you may need the option to revert back to the code PRE bux fix or POST bug fix. Branching off and creating snapshots of both PRE and POST are a great way to revert back if necessary or to just view the code at a later date. Once the bug is fixed, that branch is merged back into the trunk and the bug branch is deleted (remember we still have our PRE and POST tags though).

Deployment

Many beginner’s have a hard time understanding the concept of deployment to a web server. This is because they have typically used FTP to update their production copy of a particular code-base. This can be confusing and cause a lot of problems. The solution is deployment. There are many choices when it comes to deployment software (Hudson, Capistrano, Phing) but I typically use Beanstalk. They offer a simple interface and setup for web deployments. All you have to do is input your ftp credentials and manage some settings and they do the hard work for you!

I usually have a branch in my repository that I deploy from to specific environments (top right of the deployment graphic). Basically, when the code is ready I just merge the new changes into the branch I would like to deploy from (qa, stage and prod usually) and that is where my deployment is set to run.

Here’s the typical deployment process that I use:

  1. Initiate deployment (usually by clicking a Build or Deploy button within the deployment tool)
  2. Mkdir www/new.example.com on your web server
  3. Upload latest codebase to www/new.example.com (This is handled automatically via FTP by Beanstalk)
  4. Rename config files (in my case I run mv config/core.prod.php to config/core.php and config/database.prod.php to config/database.php).
  5. Copy www/example.com to backups/example.com.bk (Creates a backup of the current version of the website. This is great if there is a problem because all we have to do is make this backup live and we are back where we started!)
  6. Mv www/new.example.com to www/example.com. This will make the latest uploaded copy of the site go live immediately.

Notes on deployment

Deployment software will typically allow you to run a script before the deployment and after the deployment. In Beanstalk’s case they are called hooks. These files are where you run the above commands to get your deployment all set up. Once you have your hooks ready to go and tested then all you have to do is click “Deploy” and viola! Your latest code is live!

Also, you typically want to keep your config files (like core.php and database.php in my case since I typically use CakePHP) out of your repository. Instead you should keep a copy of each called core.dev.php and database.dev.php. When the code is checked out, the dev can rename the appropriate files so that they can customize these files for their setup. We use a similar process for deployment to qa, staging or production, respectively.

Conclusion

Well I hope this clears up some of the confusion surrounding SVN. If you have any questions or criticisms feel free to leave me a comment or ask me on twitter. Thanks for reading!

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

The best way to contact me is through one of the networks on the left or by emailing me at
ericbieller [at] gmail [dot] com.