10 Chat Tools for Better Communication in Team Projects

When building ideas together in a team environment you need a reliable means of communication. The people you work with should all provide their own ideas while keeping everybody on the same page. This is easier when working together in the same physical office space. But what about communicating remotely or working with freelancers around the world?

I want to present 10 of the best tools for managing a chat system, either one-on-one or a team chat. There are plenty of free products and even a few paid ones that can offer more than just instant messaging. But each communication tool is different and you need to find the one that will best fit your needs.

Recommended Reading: 10 Freelance Tools For Project Management And Planning

Check out these examples and see if you can try out anything new for your next team project.

1. HipChat

A fast-growing solution for team collaboration is HipChat. I really like this product because it offers more than just a chat interface. You can share files through any of the HipChat applications for web, mobile, or desktop computers. The group chat is also helpful because users can embed photos or other types of media which need to be shared.

Thankfully you can sign up for a free 30-day trial just to catch a glimpse of what is possible. Overall the plans charge $2.00/user which can add up if you have a big team. However for a small business or design studio this can be perfect for all your collaboration.

2. Campfire

Among many other projects online, Basecamp and Campfire have been an excellent choice for Internet-based companies. Their Basecamp service allow managers to assign tasks, group notes, and file downloads. It is such a powerful way to organize any project online with any number of people.

This is why Campfire can be such a great solution if you are already familiar using Basecamp. The interface is quite similar and it is also easy to learn with some practice. However you will notice that Campfire’s pricing is a lot higher than other choices. Whether you need the service or not will help define if 37signals products are the right choice for your company.

3. Google Chat/Hangouts

With Google+ now online it is common to find people you know within their network. Facebook was created for more of a personal connection to friends and family, while Google+ does seem to have a more professional overtone. Their Google Chat/Google Hangouts feature is an easy way to have conversations with a single person or groups of people.

And the best part is that it’s all free! Google Hangouts now come built-into the Google+ interface. You can invite anybody into the hangout chat room and the entire conversation can be archived for later use. There are privacy concerns if you would rather use an internal system. Or if you don’t like using a social network through Google, then other solutions are available. But GChat + Hangouts is a free and easy method when you don’t have a lot of money.

4. Grove IRC

A newer startup called Grove is a private IRC host for managing chat rooms. IRC stands for Internet Relay Chat which connects into many popular Instant Messaging clients. There are even free web-based IRC scripts for accessing different chat rooms (known as channels).

The plans for Grove are also fairly expensive when you consider the service is merely an external server for IRC. The costs are over $250/year for a company of 10 users. It is a nice system because you have access to a backend panel with the IRC chat rooms available right away. But if you need advanced features like file sharing or member profiles, then Grove is much too simple for filling the void.

5. Redbooth

If I had to recommend the best choice for a new startup it would be Redbooth, previously Teambox. The webapp allows any company under 5 users to run their account for free indefinitely. This comes with 5GB of personal storage, plus integration with Google Drive and Dropbox. Each account has so many features like tasks, notes, and most definitely chats.

They are labeled as conversations which can include 1 or more people. The conversations may also be archived and stored for free in the account. Also their whole backend interface is very sleek. Being able to use this for free when just getting started is a great marketing choice to keep people using their application. If you have never seen the Redbooth website I highly recommend looking over their features to see what is possible.

6. Flowdock

Flowdock does have some great features to make it work as a constant means of communication. But it is also very slim with features in comparison to full project management tools. It is branded as a "team inbox with chat" that offers mobile and desktop applications.

Under 5 users, everyone on the team gets to use this for free, but once the user-limit is breached, everyone is charged $3 per head per month. This can still work great for medium-sized teams. It will not be great for everyone but I think Flowdock is a useful webapp that is definitely worth some consideration.

7. Hall

Now aside from chat systems I think Hall does a really good job of solving project management. Their application is free to use for a personal account when just getting started. It is worthwhile to sign up and see what is possible, spend a bit of time familiarizing yourself with the interface.

Hall offers both group chat and private chat, along with video conferencing. All of the products for team chat also save logs of everything. In the advanced paid plans you can even search through chat logs for specific keywords. The first five users get accounts for free, 1 GB free storage and 1-on-1 video.

8. Podio

Another really cool solution named Podio is not only for chat. It is a full backend management suite for projects that need to handle multiple users. Their signup is free under 5 team members and you can try out a large number of their applications using this free account. These apps include to-do tasks, calendars, and of course chatrooms.

It is very easy to signup with direct connect OAuth using Google, Facebook, even Windows Live. The free account works because you can demo all of their applications just to see if it could work for your company. Teams have different needs and I do think Podio can fill the gap for some people. It is free to signup and try out so you don’t have much to lose!

9. Jaconda

If you are looking for a classic team chat solution then Jaconda must be a fantastic choice. It is free for 30 days and it does have some costs associated with a paid account. However their services include a number of chatrooms with support for very large teams, think medium-to-large companies in size.

Also your account will come with 10+ GB of storage space for sharing files in the cloud. It is also possible to integrate with other services like Google Drive, Dropbox, Box.net and others. Even better is that you can access chat rooms via any common program like Google Chat or Skype. Jaconda is very flexible and it provides one powerful definitive system for team communication.

10. Azendoo

Azendoo is another one of these free personal services where you can try an account without ever paying any money. It is a project management system which allows for a full company-wide group managing individual projects. The chat system is very similar to Facebook where you can get notifications and private messages. You can also leave comments on certain tasks based on projects in the group.

You are given 10GB storage for free along with Dropbox/Google Drive integration. It is also supported on iOS and Android. Its premium plans give you higher storage (50GB and above) and better support. Azendoo is just one choice along with many others for project collaboration. It may not be as helpful as other tools but if you have some time give it a shot and see what you think.

Read Also: Azendoo â€" Simple Multi-Function Project Management Web App

Final Thoughts

I love to research business tools for digital agencies and Internet-based companies. There are so many tools available to help with communication and task management. But with a flooded market also comes a tough decision of picking exactly the right tool for your company. It is my hope this article can get you thinking about chat tools and moving in the right direction for successful team collaboration.

You may also be interested in:

Install PHP, Apache, and MySQL in Mac without MAMP – Part III

This is the last part of our series: Install PHP, Apache, and MySQL in Mac without MAMP. And if you have been following the series (see Part 1 and Part 2 here) and have created projects in ~/Sites, then access localhost:8888 in the Browser, you will find that they are displayed as shown in the following screenshot.

I’m a bit picky when it comes to user interface of Applications, and the way how Apache server presents the folders intrigues me to customize it, make it look nicer. And this is what we are going to do in this tutorial.

If you are ready, let’s just get started.

Getting Started

First let’s create a new PHP file named index.php right under the ~/Sites folder. Then, create a folder named assets to store files like the images and CSS that we will be using along with the PHP file, index.php.

Open the index.php in code editor, and add a basic HTML5 structure as well as a few additional HTML5 tags, like so.

  <!DOCTYPE html>
  <html>
  <head>
  	<title>Sites</title>
  </head>
  <body>
  <div class="wrapper">
  	<header class="site-header">
  		<h1>Sites</h1>
  	</header>
  	<div class="site-body">
  		
  	</div>
  </div>
  </body>
  </html>
  

We will put our codes under the div with the .site-body class.

Write PHP Functions

First, we need to retrieve several required information from the server, which are the HTTP Host, Current Directory where we put index.php folder, and the list of items that are stored in the current directory.

Here are all the codes, make sure that you wrap these with <?php ?>.

  $server  = "http://" . $_SERVER['HTTP_HOST'];
  $cur_dir = getcwd();
  $folders = scandir($cur_dir);
  

You can view the values in those PHP variables with var_dump or print_f. For example:

  var_dump($folders);
  

This will output the list of folders and files in that we have retrieved with PHP scandir() function in a form of array. In my case, it looks like this:

  array(12) { 
  	[0]=> string(1) "." 
  	[1]=> string(2) ".." 
  	[2]=> string(9) ".DS_Store" 
  	[3]=> string(6) "assets" 
  	[4]=> string(4) "demo" 
  	[5]=> string(3) "dev" 
  	[6]=> string(10) "frameworks" 
  	[7]=> string(4) "hkdc" 
  	[8]=> string(4) "html" 
  	[9]=> string(9) "index.php" 
  	[10]=> string(11) "phpinfo.php" 
  	[11]=> string(12) "repositories" 
  }
  

Then, we put these items in HTML list structure using PHP loop, foreach.

  echo '<ol>';
  foreach ($folders as $folder) {
  	if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;
  	if (is_dir($cur_dir . '/' . $folder)) {
  		echo '<li class="site-folder">'; // open list
  		echo '<a class="folder-icon" href=' . $server . '/' . $folder . '> ' . $folder . ' </a>'; // folder icon
  		echo '<span class="folder-name"><a href=' . $server . '/' . $folder . '>' . $folder . '</a></span>'; // folder name and link
  		echo '</li>'; // close list
  	}
  }
  echo '</ol>';
  

Here are a few things that you might want to take note from the above PHP scripts:

1. if ($folder === '.' or $folder === '..' or $folder === 'assets') continue;. We use this line to exclude the parents directory, which are presented with dots in Apache server. It also excludes the assets that we use to store CSS and images for customizing localhost appearance.

For reference, you can head over to the PHP docs about the continue function.

2. The HTML list structure is encapsulated with if (is_dir($cur_dir . '/' . $folder)) conditional function, that way it will only output Folders.

Open localhost:8888 in the Browser, and we will get the following result.

Writing the CSS

Before we start writing CSS, let’s download Mac tiny folder icon and Mac OS X folder. Open the files in Photoshop, save the icons in PNG format, and put them inside the /assets/img directory.

Then, create a new stylesheet file in the /assets/css directory.

Also, include the link in the index.php file.

  <link rel="stylesheet" href="assets/css/style.css">
  

Basic Styles

First let’s put the basic styles for the HTML elements. These include setting the box sizing to border-box, so we can easily decide and measure the size of the element. We also set the font-family, and display the HTML list inline.

  *, *:before, *:after {
    box-sizing: border-box;
  }
  html {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    text-align: center;
  }
  body {
    margin: 0;
    padding: 0;
  }
  ol, ul {
    padding: 0;
    margin: 0;
  }
  ol li, ul li {
    display: inline-block;
    margin: 0 20px;
  }
  ol a, ul a {
    text-decoration: none;
    color: #000;
  }
  

Please note that we omit the browser vendor prefix to make the codes shorter. But we have included it in the source code that you can download at the end of this tutorial.

Page Header

We will mimic the OS X color scheme to make the appearance fit well. So, for the page header, we will give it a gradient with a gray color scheme and put the tiny icon aside.

  .site-header {
    height: 30px;
    width: 100%;
    background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
    line-height: 2.5;
    margin-bottom: 50px;
  }
  .site-header h1 {
    color: #000;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    font-weight: 400;
    margin: 0;
  }
  .site-header h1:before {
    content: url('../img/folder-sm.png');
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    position: relative;
    top: 2px;
  }
  

The Folders

Next, we display the OS X folder on the list items that we have generated with PHP, previously. The following CSS codes also include the styles when we hover the folder.

  .site-folder {
    position: relative;
    width: 145px;
    height: 132px;
  }
  .site-folder .folder-icon {
    display: block;
    height: 100%;
    width: 100%;
    background-image: url('../img/folder-128.png');
    background-repeat: no-repeat;
    background-position: center top;
    border-radius: 5px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .site-folder .folder-icon:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .site-folder .folder-icon:hover + .folder-name {
    background-color: #2b5dcd;
  }
  .site-folder .folder-icon:hover + .folder-name a {
    color: #fff;
  }
  .folder-name {
    border-radius: 24px;
    font-weight: 400;
    font-size: 0.8em;
    text-transform: lowercase;
    display: inline-block;
    margin-top: 10px;
    padding: 5px 12px;
  }
  

We are done. The screenshot below shows the final result when we view localhost:8888 in the browser.

Conclusion

We have completed the series that came in 3 installments. To sum up:

1. In the first part, we have set and configured PHP and Apache.
2. Then, we installed MySQL and manage it with Sequel Pro, in the second part.
3. In this tutorial, which is the last part, we customized the folder presentation in localhost.

We hope that you find these tutorials useful. If you have any question regarding to the topic discussed, feel free to put your question in the comment box below.