If you want to make your website livelier, then adding a website chat widget is perhaps one of the more effective solutions for increasing user engagement and growing your community.

By putting a proper website chat widget on your site, you will get real-time feedback from site visitors regarding your product, services, or content. For sites that sell services or products, a chat widget will definitely help you communicate with your visitors in real-time and potentially make more sales.

This is a collection of 10 free website chat widgets that you can install on your websites.

1. Chatango

Chatango is a customizable chat room add-on that anybody can install in their website. The main advantage of using this website chat widget is that users can have their own avatar. It also offers different user roles that give participants privileges for becoming moderators and administrators.

2. Meboo.me

Meboo.me is a product of Meebo.com — a popular web-based IM platform service. Whether you are using Typepad, Blogger or WordPress, Meebo.me is just ideal for any of these platforms. The most advantageous part of adding a Meebo.me chat box in your webpages is that it is compatible with Gtalk, Yahoo! Messenger, AIM, as well as with Facebook. Hence, the visitors of your website do not need to register to interact through it. They can use their existing Gtalk or Facebook username to stay in touch with your website.

3. JWChat

JWChat is an Ajax-powered chat script. It only uses JavaScript and HTML, making it an ideal solution for those who want to quickly get a chat widget up and running. It functions like a traditional IM client, with system sounds notifying you of events like if someone sent an IM, support for emoticons, and more.

4. CBox

CBox attempts to merge the features of traditional desktop IM clients with the benefits of the social web. The user interface is straightforward, the installation is a snap, and is plug-and-play because it only relies on client-side JavaScript and HTML. CBox is free, but there is a premium version available for $2.00 a month with additional features like bigger bandwidth, no ads displayed, and custom word filters.

5. Mibew Web Messenger

Mibew Web Messenger, which also calls itself Open Web Messenger, is a free and open source chat messenger that was built with PHP and MySQL. This chat application was developed with live customer support in mind, but works well in other contexts.

6. AjaxChat for WordPress

This free website chat script is a plug-in for adding live chat functionality to a WordPress installation. It enables WordPress users to chat with other visitors on your blog without refreshing the browser.

7. AJAX Chat

As you can probably conclude by its name, AJAX chat uses client-side JavaScript to enable you to run a robust chat client on your website. It can also be used as a shoutbox, a site feature that allows your visitors to quickly leave a message and "shout out" to other visitors and the site admins.

8. phpFreeChat

This free PHP-based chat system is highly customizable and is packed with features you’d only expect in desktop clients. It supports the ability to create multiple chat rooms, private messages, custom themes using CSS, and Ajax for a smooth and seamless user experience.

9. iJab

This web-based IM client, developed using the Google Web Toolkit is free and uses Ajax to simulate a client desktop IM client. iJab can be a great solution for implementing a similar Facebook chat feature that people can use within their web browser while perusing your website.

10. Ajax IM

Ajax IM is a slick and open source web-based IM client for your website. It’s lightweight, weighing only 78KB on a good day (i.e. when minified). By default, it affixes itself at the footer of your web pages, similar to Facebook’s web-based chat client.

Related Content

• 12 Social Media Monitoring Tools Reviewed
• 12 Portable Apps for Web Designers
• Search Analysis with Google Analytics
• Related categories: Tools and Website Management

About the Author

Phong Thai is the Web Developer with over 5 years of experience in PHP, JavaScript, and CSS. He is the creator and administrator of JavaScriptBank.com: a new generation of JavaScript resources that provides thousands of free JavaScript, DHTML, tutorials, videos, examples, reference and help. Follow him on Twitter or connect with him on Facebook.

After several months of researching, testing, and using various tools for social media monitoring and response, I thought it might be helpful to share some of my findings. It was fun to dive into these tools, but I hope the information in this article will save you time and help you quickly find the tool that’s right for your needs.

Why Bother Monitoring Social Media?

Even if you or your clients have "decided" not to actively participate in social media, it’s really not a choice. Nature abhors a vacuum, and so does social media. Either you can fill the vacuum with your perspective, or your customers and competitors will fill it for you. The choice is clear.

Monitoring helps with branding and marketing and can help identify quality control or customer care problems that may have gone unnoticed.

Monitoring is only one piece of the puzzle, however. It’s important to find out who is saying what, and where the conversation is happening so you can respond appropriately.

Terminology

There are few terms you’ll need to be familiar with before we talk about the tools, so let’s take a moment to cover them before we jump into the details.

Influence

If you find there are customers who have a strong opinion of your brand, it’s important to understand the influence of those customers.

• How many followers do they have?
• Do they get retweets?
• How many external links point to their blog?
• How many comments do their blog posts attract?

Several of the free tools listed below include this measurement to assist in your monitoring and response efforts. All of the paid options include it.

Sentiment

Are the comments positive or negative? Most current tools attempt to assign sentiment to a post automatically. While this is helpful for brands with tons of mentions, it’s only about 70% accurate in most cases^[1], so manual verification and spot-checking is encouraged across the board before making any decisions based on influence data.

Volume

This is simply the amount of "buzz" that exists. Many monitoring tools give the ability to chart volume for specific keywords over time. This gives you a great way to measure the impact of your marketing efforts and social media campaigns, especially when combined with sentiment. A lot can be learned about your brand and your customers by investigating spikes in social media volumes.

Workflow

Workflow is the process of assigning, tracking and responding to social media, typically in a team environment. An effective workflow can prevent double responses and missed opportunities.

Now that we have an understanding of the purpose and the terminology surrounding social media monitoring, let’s take a look at some tools that can help you monitor your presence.

1. Google Alerts

An oldie but a goodie! Google Alerts allows you to set up keyword searches for the name of your company or competitors, for example, and receive updates in your email inbox or through an RSS feed.

When combined with iGoogle, you can create a pretty nice consolidated page that contains the latest findings for your selected keywords. When it comes to monitoring social media, this is the least you should be doing; it’s free and an absolute snap to set up.

2. Twitter Advanced Search

By using the advanced features in Twitter’s search tool, you can use simple Boolean logic (true or false conditions) to perform some pretty powerful searches.

Once you set up your search, you can save the query as an RSS feed so you can keep up to date on the latest news.

3. Icerocket

Used by many, Icerocket helps you keep watch over Twitter, blogs, web, news, images and more. Features include a topic cloud and basic listing of mentions. This social media monitoring tool also offers the ability to bookmark your search results for later reference.

Although helpful, some users might find the interface and the style of the search results pages a little archaic compared to the other options.

4. Addict-o-matic

This tool is a consolidated page with search matches across blogs, Twitter, Digg, Flickr and more. Featuring an appealing interface and one-page dashboard, Addict-o-matic is one of the best free tools available for summarizing all your "buzz" in one place.

5. Boardtracker

Boardtracker focuses on grabbing "buzz" from message boards and forums. Features include a topic cloud and influencer list. There are ads mixed in with your search results which may turn off some users. A premium version is offered. If your target customers are more active on message boards than other channels, this could be the right tool for you.

6. Twazzup

Of the Twitter-focused monitoring tools I’ve come across, Twazzup does a great job of getting everything on one page. Sentiment, top links, and influencers are available.

The ranking of influencers, however, seems a little mysterious. A quick check of Klout scores on profiles for a few key topics didn’t reflect a high level of influence, so Twazzup must be using a different calculation.

7. Social Mention

This social media monitoring tool features an interesting combination of easy-to-read metrics including reach, sentiment, passion, and strength (volume/day). Social Mention tracks blogs, blog comments, Twitter, mainstream news, images, video, and audio. Searches can be saved as an RSS feed so you can easily stay up-to-date.

8. HootSuite

HootSuite is a popular tool that can be used to manage multiple accounts across Twitter, Facebook, MySpace, WordPress, Foursquare and LinkedIn. Although HootSuite could be categorized as an account management tool rather than a monitoring tool, I believe it deserves mention here because of its large user base and powerful functionality.

You can push updates to one or more profiles, track click-through, deploy timed updates, monitor your social media buzz across multiple web services, and assign tasks among team members based on roles. If you use HootSuite, you’ll want to use an additional tool to supplement monitoring of forums and blogs. HootSuite apps for both iPhone and Android are available.

9. Seesmic

If you try HootSuite, you’ll find the interface of Seesmic fairly familiar. The similarity doesn’t end there. They also share the capability to manage multiple accounts across all the popular social media outlets. Seesmic gives up some ground to HootSuite, however, on the team collaboration and workflow front.

10. TweetDeck

Another account management tool, TweetDeck is available as an application for Mac, Windows, Linux, iPhone and iPad. You can use TweetDeck to manage profiles across Twitter, Facebook, LinkedIn, MySpace, Foursquare and Google Buzz. If you’ve used the other tools on this list, the multi-column format will feel familiar.

TweetDeck is lacking a good workflow, so it is not for those who will be collaborating with a team. In addition, because it needs to be installed on your system instead of being able to run in a Web browser, many people won’t be able to use it in a secure corporate environment.

11. Scoutlabs ($249/mo)

Scoutlabs has a great clean interface and overall excellent features for volume trending, sentiment-tracking, learning about key quotes (based on sentiment), and managing workflow for response management. Unlimited results helps protect you from increased monthly cost due to unexpected spikes in volume.

It’s a great option for agencies and freelancers because you can give clients access to a dashboard with your logo on it, branding the service as your own. Note that it can be a challenge to output some graphs and reports which may be an issue if you want to produce reports for your clients.

12. Radian6 ($500/mo)

Radian6 is a powerhouse that gives you the ability to slice-and-dice your data until your head spins. Integrated workflow, alerts, sentiment, monitoring across blogs, forums, news, Twitter, and more is what this social media monitoring tool has to offer.

The amount of monthly volume can influence pricing which is a little scary for companies that may experience wild swings in monthly volume. This is not the type of solution you should set up and hand over to your clients; it provides you with a wealth of information so you can become the go-to expert for them. If you invest the time to learn this tool, you can discover insights that will make you a hero to your clients.

References

1. Is Automated Sentiment Analysis Reliable?

Related Content

• How Social Media Works and the Role of the Intelligent User
• Make the Most Out of Social Media
• 12 Excellent Social News Sites for Web Designers
• Related categories: Tools and Website Management

About the Author

Jason Schubring has built more than 100 Websites and delivered e-mail campaigns for companies of all sizes. His strategic, design, and Web development background creates a unique perspective on effectively combining digital and traditional marketing. To connect with him, follow him on Twitter @jasonschubring or find him on LinkedIn.

With the dominance of Apple’s iPhone in the recent years, Google’s Android OS seems to have been left in its shadows. However, this is only because the iPhone was released long before any Android device. Nevertheless, as the popularity of Android grows (and its growth is staggering) so does its range of apps.

In this article are the top 10 Android apps for people who make websites, enabling them to be productive whilst on the go.

1. AndFTP (free)

Do you need access to your web servers on your Android mobile device? AndFTP is just the app for the job. Capable of uploading, viewing, and updating files from anywhere, it can be a lifesaver if you need to edit your (or your client’s) site without a desktop/laptop handy. It also supports multiple domains from FTP, SFTP and FTPS connections and has an excellent user interface for a first-generation Android app.

2. SilverEdit (free)

A simple source code editor app, SilverEdit lets you code up full HTML, CSS, PHP files that you can save to your phone or send to your email account. Combined with AndFTP (above), you can build and push websites with your Android handheld device! At the moment, it still suffers from functionality problems on certain Android devices, but is getting more stable with each version release (version 3 is currently in development).

3. Photoshop (free)

Adobe brings the ever-popular Photoshop to the Android platform. Unfortunately–but as to be expected–it has limited functionality compared to its desktop counterpart, but does include the essential basic image processing functions such as crop, rotate, filters, and image saturation adjustments. It also allows you to share your work on Photoshop.com.

4. View Web Source (free)

If you come upon a mobile site that you want to study whilst you’re browsing the Mobile Web, View Web Source allows you to inspect and download the entire source code of the page to its text editor. It gives you the ability to edit and manipulate the code, make comments, and save the file on your phone (or send to your email account).

5. Mobile GA (free)

The trusty old analytics favourite–Google Analytics–is now available on the Android platform. Google Analytics is the best free web service (hands down) for studying your website traffic statistics. Mobile GA (Google Analytics) uses the Google Analytics API for securely transmitting your site data without the need for third-party intermediate servers, maintaining the privacy and safety of your data.

6. Dropbox (free)

A popular app for web designers and other creatives, Dropbox–the ubiquitous cloud-based file backup tool–allows you to access a remote folder with documents you have stored on the server. Simply save files on one computer and you’ll be able to access the saved files from any computer or mobile device. The free Android app gives you mobile access to your Dropbox account. It’s a must-have tool for those who work with files and documents that need to be shared across multiple computers and devices.

7. WordPress Mobile (free)

If you maintain a WordPress site, WordPress for Android is an open source app that allows you to write new posts, edit content and manage comments, all through the lovely WordPress UI. It’s great for blogging on the go.

8. Thinking Space (free)

As a web designer, you can’t turn off your magnificent creative brainpower and you’re always brewing up creative ideas for site designs wherever you are. Thinking Space is an Android app designed for recording brainstorms and for mapping out your garbled thoughts so that when an idea hits, you’ll have a structured medium to convey them in. An excellent feature of this app is the ability to sync with Google App Engine; this means you can upload your data to the cloud and access them from anywhere via your Android mobile device or through FreeMind (the open source desktop version of the app).

9. Typography Junkies (free)

Every designer should have a good typography source of inspiration; web typography is an important part of design. With Typography Junkies for Android, you can keep up-to-date with the very latest in font news by way of videos, images, social media and much more.

10. HTML Test (free)

Need to review your HTML prowess? HTML Test is a great Android app to have if you’re just starting out in this whole web design game. The app will test your knowledge about HTML, giving you multiple-choice questions that you have to answer within a predefined time.

If you’re an iPhone owner, be sure to check out a similar list called 10 iPhone Apps Every Web Designer Should Know About.

Related Content

• Getting Started with the iPhone SDK
• How to Make an HTML5 iPhone App
• Mobile Web Design: Is it Worth It?
• Related categories: Tools and Web Design

About the Author

Rob Thomas is head of photography for Designbysoap.co.uk, specialising in architectural and music photography. He’s also a search engine optimization engineer, often helps out with their digital marketing and loves graphic design. Follow him on Twitter: @designbysoap.

A web designer must always have his or her tools handy. Of course, that is most often the case when you’re working from home or from an office where you have your own work computer.

But if you are constantly on the move or are doing a lot of demonstrations to your customers at their place of business, you’ll need to carry your programs with you.

Scenarios That Benefit the Use of Portable Apps

Most designers just carry their laptop with them. But that is not always possible, and many times, the client wants you to show them how the site or application will look on their own computer, projector and other equipment.

In addition, there are those unfortunate times when your computer crashes and breaks with all the data on it and no ways to retrieve it.

In those cases, a good backup (or even primary) solution is to carry your own toolset on a portable flash/USB drive.

The Feasibility of Using Portable Apps

There are a lot of great applications for web designers that will work without needing any installation, and they make an excellent choice for a portable USB drive.

With today’s USB stick sizes and prices, you can easily have all your work with you in your pocket at all times, and be able to work from any computer without needing anything else.

Here are some of the best portable apps for web designers that are a must-have.

1. KompoZer Portable

KompoZer Portable (previously known as Nvu Portable) is an amazing HTML editor that rivals the functionality of Dreamweaver. Sure, it doesn’t look as good, but it’s much better than Notepad if you want any advanced features and easy code editing functionalities.

2. Firefox Portable Edition

Firefox, a popular web browser amongst web designers with its impressive collection of add-ons, has a portable version that you can carry around your USB drive. It’s just like the regular version, but doesn’t need to be installed on your operating system.

3. XAMPP Portable

XAMPP is a great local server (learn all about it in this tutorial), and the portable version does its job amazingly well. It works fine no matter what computer you insert your flash drive in, and you can easily see exactly how your site will look when loaded from a server in a browser. You can be anywhere without an internet connection and still have a working site. Got a web app you need to demo somewhere in the middle of the Mojave Desert? Have XAMPP Portable and any computer handy and you’re good to go.

4. GIMP Portable

GIMP is a free alternative to Photoshop, and as you could’ve guessed from the title of this article, it also has a portable version. If you’re used to Photoshop, you might find it difficult to adjust to GIMP’s interface at first, but if you need a portable app that is as powerful as Photoshop, there is no other better alternative.

5. AMP Font Viewer

This is a simple yet powerful portable font manager that lets you view all the fonts that are installed on a computer. It also allows you to quickly install and uninstall the fonts you need.

6. 7-Zip Portable

7-Zip is a popular open source file archiver that handles many types of formats, including ZIP, RAR, TAR, GZ, and more. As web workers, we always have to deal with various types of archives and — just like a Forrest Gump’s box of chocolates — you never know what you’re gonna get. 7-Zip Portable allows you to be flexible and prepared for opening and creating archives.

7. PhotoFiltre

PhotoFiltre is a simple image-retouching tool and it allows you to do basic image editing on any digital image format. This portable app is a good companion to GIMP as it’s easier to perform quick edits. Use it over GIMP if you just need to perform quick and easy retouching, such as cropping and resizing.

8. Inkscape Portable

Inkscape is an open source vector graphics editor that rivals Adobe Illustrator and looks and acts like Corel Draw (if you ever used Corel Draw, you’ll know what I mean when you fire up Inkscape). It is standards-compliant and its portable version is the most powerful around.

9. AbiWord

Most people, including your web design clients, probably use Microsoft Word docs for rich text files: It’s the accepted standard. But it’s quite hard to find a good portable .doc file editor. If you need a lightweight and easy alternative to OpenOffice Portable, AbiWord is the way to go.

10. PicPick Tools

This is an all-in-one tools package for web developers, designers and programmers. There are a lot of tools included in PicPick Tools, from screenshot capturing to picture editing.

11. MobaPhoto

MobaPhoto is a free and open source image manager that doesn’t require an installation (otherwise, Google’s web-based Picasa would be a great choice). It doesn’t look very nice, but it gets the job done. It’s very useful when you have tons of photos to manage and keep track of.

12. ToDoList

If you like/need to keep track of your time, you should definitely have this application in your pocket. ToDoList is a simple task and project management app that will allow you to get your work done faster and more effectively.

Best Portable Apps Around for Web Designers?

Of course, the above apps are by far not the only ones, but they’re certainly the best. They have been used by web designers and have proven to be very useful in their line of work. You should definitely try getting and setting up a USB/flash drive with all these apps installed and carry them around your keychain, pocket, backpack, suitcase, etc.

If you have other portable apps that you use that isn’t on the list above, please share it with us in the comments.

Related Content

• 12 Useful Web Tools for Designers
• 7 Tools You Should Be Using For Better Web Designs
• 10 Excellent Feedback Tools for Web Designers
• Related categories: Tools and Web Design

About the Author

Raja Hostwisely maintains the community-powered web hosting reviews site, HostWisely.com. He regularly publishes interesting articles on web hosting, web development and the latest hosting coupons. You can follow his updates via Twitter: his handle is @HostWisely.

One of Google Chrome’s best features is its minimalist interface. The browser also already has many built-in features that satisfy even the most advanced web users. In order to keep Chrome’s uncluttered user interface, it’s best to avoid installing too many extensions. Here are the five essential Chrome extensions you should use for a better browsing experience.

1. AdBlock

AdBlock removes advertisements on web pages. The extension is configurable and can even selectively block just certain advertisements on a website that you visit with its blacklisting wizard interface. The extension is open source (released under the GNU General Public License), very optimized, and well supported—the developer, who goes by Michael, dropped to a part-time job just to develop and support the extension. If you’re looking for even more ad blockage action, also check out FlashBlock.

2. WOT

Chrome already has plenty of built-in browsing security features, and is regarded as one of the most secure web browsers to use. If you’re the paranoid type and you want to up the security of your web browsing experience, check out the WOT (which stands for Web of Trust) extension for Chrome. Other users of the extension (there are millions of them) rate websites they’ve visited, making it a socially collaborative approach to browsing security. Ratings show up on search engine results and popular website links and just for the fun it, they also protect your web-based email accounts.

3. FastestChrome

FastestChrome is an extension that improves page-rendering speed and provides the user with features that increases their browsing efficiency. Some features include preloading of pages that you’ll visit next, looking up the definition of a word just by highlighting it, improved Google search results with real-time search, and more. FastestChrome is a Chrome port of the popular Firefox add-on, FastestFox (which has 10 million users).

4. TooManyTabs

Tab management for heavy Internet users is essential for efficiency. TooManyTabs improves and extends Chrome’s tab management user interface with features such as instant tab search, a bird’s eye view of all your open tabs (which is helpful when you have 20 or more tabs open in Chrome), tab sorting based on date, domain and page title, and more. Another worthwhile extension for tab management to check out is Tab Menu, which gives you a vertical menu for searching and navigating to your open browser tabs.

5. Xmarks Bookmarks Sync

Nowadays, it’s rarer that a computer user only has one computer. It’s always frustrating to forget the URL of a web page you need, and then realizing that you bookmarked it with your computer at home. Xmarks, a free web service that syncs your bookmarks, has a Chrome extension that will change the way you manage your favorite links. Xmarks for Chrome synchronizes your bookmarks, gives you an intuitive feature for searching your bookmarks, backs up your bookmarks on the Web in case of a computer failure, and even shows you the popularity of a link or search engine result based on the number of bookmarks in their service. For Delicious users, you can use the Delicious Tools Chrome extension instead.

What other Chrome extensions do you find to be essential to your web browsing experience? Share your favorite Chrome extensions in the comments.

Related Content

• 15 Google Chrome Extensions for People Who Build Websites
• The Top 15 Google Products for People Who Build Websites
• Performance Comparison of Major Web Browsers
• Related categories: Tools and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Google Chrome is a wonderful web browser of choice for web designers and web developers. With Google Chrome extensions, you can add more features to the browser to help you with designing, debugging, and working on websites. We share with you the top ten Chrome extensions for designers and developers.

1. Firebug Lite (for Google Chrome)

Firebug Lite (for Google Chrome) is an extension that sets up Firebug Lite in the browser. Although the built-in Developer Tools in Chrome gives you relatively the same features of Firebug (and more), long-time Firebug fans will appreciate this extension for debugging and testing their work in Chrome.

2. Web Developer

Chris Pederick’s Web Developer toolbar is a long-time favorite among web designers and front-end developers. Originally created for Firefox, it has been ported to Chrome with a slicker interface.

It has loads of options for examining and understanding web page layouts, including showing block element stacking orders, displaying CSS style information about certain elements, browser cache controlling, and much more. To learn some Web Developer toolbar tips and tricks, see the following posts:

• Awesome Things That Web Developer Extension Can Do
• Ways to Enhance your Web Development Using the Web Developer Extension

3. Resolution Test

Resolution Test is an extension for testing web pages in different screen resolutions, with an option to define your own custom resolutions. This is very handy in making sure that your web design looks great under different monitor sizes.

4. Pendule

Pendule extends the built-in Developer tools in Google Chrome. The extension gives its users plenty of features such as one-touch markup validation using W3C’s automated web services, hiding images on a web page, viewing scripts included in a web page, and more.

5. PlainClothes

One of the best ways to evaluate the accessibility of a web page is to remove its CSS styles and see if content being presented is still readable without them. This simulates the experience of a user who cannot see their monitor screen and have to rely on the web page’s markup to access the content. PlainClothes does one thing well; it removes all CSS styles on a web page.

Though created primarily for web development testing, you can use this extension to view your favorite styles unstyled (so that the boss doesn’t catch you browsing Digg when you should really be finishing up that JavaScript function).

6. Image Cropper

If you want to take certain portions of a web page, Image Cropper is the simple, no-frills Chrome extension for you. Just drag around the area you want cropped, and it’ll take just that part of the web page. Need pixel-perfect accuracy? It displays the dimension and location of your crops to help you get just the size you need.

7. Lorem Ipsum Generator

This extension prides itself in being minimalist and simple—and that’s good because there’s no reason generating Lorem Ipsum text should be a convoluted affair. Lorem Ipsum generator helps you fill up your design mockups with dummy text for presentation purposes.

8. IE Tab (for Windows)

Troubleshooting in Internet Explorer’s proprietary Trident layout engine is not a fun ordeal. With IE Tab, you can at least save some time from having to use Internet Explorer (and its limited list of extensions) for debugging rendering issues in your work.

9. jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery commands in the context of the current web page. It’s a great extension for learning and experimenting with jQuery.

10. Color Picker

This one-trick Chrome extension does one thing really well: quickly getting the Hex and RGB values of any color on any web page. It can be very helpful in determining what colors your favorite website uses without having to take a screen grab of it into Photoshop and using the Eyedropper tool.

11. WebEdit

With the WebEdit Chrome extension, you can make any web page editable (the changes you make, of course, will not be saved). Why would this extension be helpful? If you are creating a website and want to play around with elements without making any significant changes to the code, this extension can come in very handy.

12. Chrome Sniffer

Have you ever wondered what technologies, frameworks, and open source apps a website is using? Experienced web developers can find this out by studying the site’s source code, but if you want a more convenient and quick way of doing this, then check out Chrome Sniffer. Chrome Sniffer lists all known JavaScript framework/libraries (jQuery, MooTools, etc.) and CMS (Drupal, WordPress, etc.) that a website uses.

13. Webpage Screenshot

A common task for web designers is taking screen grabs of web pages. With Webpage Screenshot, you can capture an entire web page, even if it spills outside of the browser’s viewport. It gives users the opportunity to resize the window before capturing and saves the screen grab as a PNG file.

14. Eye Dropper

Eye Dropper is a Google Chrome extension that gives you the ability to determine a color on any web page. What’s more is that it presents a color wheel and color swatches (found in most graphics software) so that you can experiment, tweak and pick colors.

15. SEO Site Tools

A well-formed web page with great markup ultimately leads to awesome search engine results. However, if you would like to evaluate your website in terms of known search engine optimization factures, try out the SEO Site Tools, a Chrome extension that gives you a plethora of useful tools and features for evaluating SEO. It can pull tons of on-page and off-page metrics, social media information, and more.

Do you use Chrome for building websites? Why or why not?

Related Content

• 10 Web Browsers You Probably Haven’t Heard Of
• Performance Comparison of Major Web Browsers
• Top 6 Internet Explorer Extensions for Web Developers
• Related categories: Tools and Web Design

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

Google’s strategy of empowering site developers and owners with free and valuable tools has proven to be effective in garnering a fair bit of geek love for the company. But this affinity to Google by technology enthusiasts is not without warrant—they really do make excellent products that can be instrumental in building, maintaining, and improving websites. What’s more, they’re all usually free.

Check out some of the best Google products for developing, analyzing, maintaining and tinkering with websites.

1. Google Chrome Developer Tools

Most developers know the advantages and convenience of testing and debugging in a web browser. It’s this fact that has led to the popularity of browser add-ons such as Firebug and Web Developer Toolbar.

Google Chrome, the latest major entry in the web browser market, has a robust, capable, intuitive, and downright helpful suite of tools geared for developers comparable to—and some might even argue, better than— web development tools such as Firebug. It includes a web page inspector for studying the DOM, a JavaScript console and tab for stack-tracing, debugging, setting breakpoints, and testing scripts, timeline-profiling (akin to YSlow!) of assets being downloaded in a web page for performance tuning, and more.

For Google Chrome users: access the Developer Tools by clicking on the Page icon and then going to Developer > Developer Tools (or pressing Ctrl/Cmd+Shift +I).

2. Webmaster Tools

Though you might balk at the choice of name for this Google product ("Webmaster" is so mid-90’s), you won’t contest the usefulness of Google’s Webmaster Tools. The web-based application, once set up, provides you with plenty of information that can help you maintain and improve your website. It has a Diagnostics set of tools for identifying malware on your site and finding spider-crawl errors. Under the Diagnostics set, Webmaster Tools has an HTML Suggestions page that highlights how you can improve your site’s mark-up.

It additionally lets you discover your most popular web page by way of showing you the number of external links that point to it. It can even point out broken links on your website (see a tutorial on how to do this with Webmaster Tools). All that—and much more— makes the five minutes that this free Google service might take the average site owner to set up, more than worth the time.

3. Google Web Toolkit

Google Web Toolkit is a development framework for web application developers. The framework streamlines the process of making high-performance and well-tuned web apps by giving developers a solid foundation to build their app on, sidestepping issues such as browser quirks and having to write common web functionalities (such as an authentication system).

Couple all that with the fact that GWT tightly integrates with the company’s other products such as Google AdWords, FeedBurner, and Google Ajax Libraries, and you’ve got yourself a great framework (especially if you are already a Java developer).

Get up and running quickly with GWT by reading Google’s tutorial doc.

4. Google Code Search

Can’t seem to figure out how to get that stubborn login feature to work? Want to see how other developers tackle the feature you’re working on? For designers, it’s easy to find inspiration by viewing one of the many design gallery sites out there. But for developers, its slim pickings, even though our work is also creative and does need some inspiring ideas sometimes.

Google Code Search crawls and indexes publicly available sample code that developers and programmers can search and study. It has a robust search syntax that permits regular expressions in case you already know what you’re looking for. Not comfortable with search syntax? Their advanced code search has a simple user interface that will let you run highly specific search queries.

5. Page Speed

With Google search now factoring in a website’s loading time in an effort to improve user experience, it’s now more essential than ever to analyze your site for places where you can trim the fat and expose issues that you can fix to speed it up.

Page Speed is an open source Firebug browser add-on that helps you evaluate the performance of your web pages. Factors assessed by the add-on are based off Google’s Web Performance Best Practices, spearheaded by highly respected ex-Yahoo! Chief Performance and current Google executive, Steve Souders.

6. Browser Size

Though the applicability of the "above the fold" concept—a principle carried over from print design— in web design is highly debated, it’s still not a bad idea to see how your web page renders when first loading, in various web browser sizes.

Browser Size is a handy web-based tool for visualizing how web pages look on popular browser viewport sizes by overlaying boundaries and contours of visible areas on top of your chosen web page. This Google product is great for times when you want to see if important page elements are visible without scrolling.

7. Google Ajax Libraries API

Most websites take advantage of using JavaScript frameworks such as jQuery and MooTools for creating Ajax-enabled web apps. But serving these libraries can give your web server a beating, especially if your website generates a lot of unprimed cache site traffic.

Google Ajax Libraries API is a way of serving popular JavaScript libraries (there are currently 10 popular libraries being offered up) to your site visitors, giving you the chance to offload the burden to Google’s highly capable infrastructure.

Using the Google Ajax Libraries API is advantageous for many reasons, including the reduction of web server bandwidth and resource consumption and a higher chance that your site visitors will hit your web pages with a primed cache because they might have visited another site that uses Google Ajax Libraries previously, producing faster page response times and enhancing their experience.

8. Google Website Optimizer

Out of the list of concerns of web designers and developers, web page usability is on top. Google Website Optimizer helps you tease out issues with your web page design by allowing you to construct two or more web pages and comparing them side by side, in a process known as split testing (or A/B testing). Test your ideas and experiments with different web layouts easily with Website Optimizer.

9. Sites

Need to get up a website quickly? Sites—as you might have intuited by its name—is a Google product that gives you the ability to easily create your own site. Its tight integration with other Google products enables you to quickly post YouTube videos, slideshows, Gmail calendars, Gear gadgets, Google Docs spreadsheets, and other content types in your Site.

You can keep your Site private if you want, and in that case, it can become your very own personal web-based documentation tool.

10. Speed Tracer

Speed Tracer is a tool with a singular (but important) purpose: to help you, the developer, identify issues with your web application by presenting you with a visual breakdown of how your web app is rendering on web pages. Not sure how this is useful? Read about some use case scenarios.

11. Project Hosting

Project Hosting is part of Google Code that gives open source developers a place to host their projects. For people not maintaining projects, Project Hosting becomes a repository of open source projects, giving you the ability to find open source project files that you can integrate into your site.

12. Google App Engine

Google App Engine lets you run your web apps on the company’s infrastructure. What this ultimately translates to is that you can save your dough without sacrificing uptime and server resources. You can still use your web app on your own domain, but if you’re really that strapped for cash, you can use their free domain as well (yourapp.appspot.com).

To get your feet wet quickly, Google devised a practical tutorial on using Google App Engine to build a guest book. Want to see what the Google App Engine can do? Rummage through the Applications Gallery.

13. Google Chart Tools

Raw data and numbers presented in tabular form are boring, and can also be more difficult to grok and gain information from. Google Chart Tools allows its users to add charts, graphs and other data visualization types for embedding on web pages.

Google Chart Tools can have interactivity features that lets your users interface with the charts you present them, such as hovering over data points to reveal more information about them, as well as animation options to captivate your audience.

14. Closure Tools

JavaScript closure is a good thing when understood and used properly. But the accidental use or misuse of closures can lead to memory leaks and poorly optimized code.

The Closure Tools is a development suite currently in Google Labs that consists of (at the moment) three tools: Closure Compiler, which is a JavaScript optimizer, the Closure Library, which is a JavaScript library for Ajax application development, and Closure Templates for creating dynamically generated HTML.

The Closure Tools speeds up high-performance web application and website development and can test existing JavaScripts for closure issues.

15.  Google Analytics

Google Analytics gives you relevant and useful statistics about how your website is performing in terms of site traffic. GA is a robust and powerful tool, enabling you to create custom reports, study various stats such as where visitors are coming from, what browsers they use, what their Internet connection speeds are, and more—all of which can give you a clear picture of your site’s audience.

This Google product also helps you in cutting down your server resources if you choose it over server-side software (which can be pretty taxing on your server when running and logging persistently). (Learn more about Google Analytics’ more advanced utility through this tutorial.)

Other Google Products

Here are other great Google products to check out.

Gears

This Google product is similar to Greasemonkey in that it extends the user’s ability to use web applications by giving them additional functionality through their web browser.

Chrome Experiments

Chrome Experiments is a gallery of user-submitted experiments showing what the latest open web technology standards (HTML, JavaScript, CSS) can do. It’s a great place to see some innovative work.

Google AJAX Feed

Using only JavaScript, Google AJAX Feed allows you to grab RSS feeds from websites to use for mash-up’s, such as, for example, displaying a sidebar widget of the latest new posts of multiple sites.

Google AJAX Language

With websites having a worldwide audience, Google AJAX Language enables developers and site owners to easily provide their readers a convenient way of translating page content into another spoken language.

The Go Programming Language

Go is a compiled software programming language that focuses on speed and performance.

Google Fusion Tables

Fusion Tables is a way to discover public datasets, as well as store your own on Google’s infrastructures.

FeedBurner

Managing, creating and infusing site RSS feeds with more features is just so much easier with Google FeedBurner.

What Google products do you use to build and run websites, and why?

Related Content

• 10 Google Chrome Extensions for Boosting Your Productivity
• 6 Tips to Help You Get the Most Out of Google Docs
• 15 Fantastic Finds on the Google Code Repository
• Related categories: Web Development and JavaScript

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Chrome is the newest child added to the constantly feuding web browser family. Although Google Chrome is comparatively new, it has been producing some major buzz around web for its performance, minimalist interface, and usability.

Another useful side of Chrome is the extensions that give the user added functionality for common web browsing tasks. Many of these Chrome extensions can help you increase your productivity and enable you to perform your jobs easier and faster.

Note: Since Google Chrome for Mac OS systems is still in beta, some extensions might not work properly. However, we have tested all of the extensions in brief, and we can confirm that they function.

1. Pixlr Grabber

Taking screenshots and then sharing them is a big process. You copy the screen grab into your clipboard, open a graphics editor and save it into a web format. Then you have to upload it to a web service so that you can share it publicly. Behold Pixlr Grabber, an extension that allows you to take screenshots in Google Chrome and automatically upload it to imm.io, an image sharing service. You can take parts of the visible screen, select only parts of it, or grab the entire web page.

2. Copy Without Formatting

What do you normally do when you just want to copy some plain text without any formatting (font, color, images) from your browser to an office or email software? Copy the text, paste it into a text editor like Notepad, and then copy and paste it again into the destination? Don’t worry, you’re not alone—even the productivity bloggers at Lifehacker have this problem. With the Copy Without Formatting Chrome extension, you can easily and directly copy unformatted text from Chrome and paste it anywhere, allowing you to cut out the middleman and streamline this task.

3. Evernote Web Clipper

Do you often find something cool on the web but forget to bookmark it? And when you need the web page, do you end up spending a lot of time trying to find it again? We all do. The Evernote Web Clipper Chrome extension saves the content of your clipboard along with a link back to the original page quickly and painlessly. You can store text, images, and links into your free Evernote account so that you have ready access to them anytime and anywhere (with an Internet connection).

4. Symtica

If you find yourself using many Google web applications (seriously, nowadays, who isn’t?) and you want a quicker way to access and use them, use the Symtica Google Chrome extension. This Chrome extension can watch out for new emails, create new Google Docs documents, access your contacts list, manage your Gmail task lists, read your RSS feeds, and more.

5. Image Search

Finding images on the web can be a drag. If you’re in need of some serious web scouring to find that perfect LOLcat photo to use in your next killer PowerPoint presentation, check out Image Search, the ultimate image search Chrome extension that searches websites such as Flickr, Picasa, Zooomr, and Photobucket. There are loads of options for customizing your search options by size, type and more, saving you a fair bit of time.

6. AdBlock

This Google Chrome extension blocks any kind pop-ups and ads, enabling you to focus on the information that you are trying to obtain. Using AdBlock can improve your productivity because it can lower web page response times as well as avert you from being distracted by advertisements and pop-ups that can get you on a tangent. But do allow the sites you love to display ads because ad-blocking can affect them dearly.

7. goo.gl URL Shortener

If you are constantly sharing web pages, goo.gl URL Shortener is a must-have one-click URL shortener that makes it a snap to share links and useful resources on social media sites such as Twitter and Facebook. The short URL is also automatically copied to your clipboard, drastically shortening this process compared to the conventional method of URL shortening. The extension utilizes Google’s own URL shortening service.

8. Web2PDFConverter

Converting a web page to a sharable PDF file is a long and arduous job. Well, not so if you use Web2PDFConverter, a Google Chrome extension that lets you create PDF files from within your web browser. The extension even allows you to preview how the PDF document looks through Google Docs, saving you even more time in having to open Adobe Acrobat (or the desktop counterpart that you are currently using) to check your work.

9. Shareaholic for Google Chrome

Are you a social media junkie? If you are, you know that this addiction can be a ruthless time drain and can place a huge damper on your otherwise productive day. Making social media sharing easier, faster, and more convenient is always a good thing. Shareaholic for Google Chrome is an extension that will convert the current web page you’re on into a short URL and allow you to share it with your friends across many social media sites.

10. Split Screen

As this Chrome extension’s name implies, Split Screen enables you to split your browser’s viewport. Not only can it reduce the number of tabs that you have open (and thus, make it easier to find the web page you need), it also enables you to effortlessly compare and contrast several web pages at the same time. It is perfect for people that are studying and cross-referencing information.

What Google Chrome extensions do you use? If we have missed any useful extensions, share it with us in the comments.

Related Content

• Performance Comparison of Major Web Browsers
• Top 20 Essential Firefox Add-ons for Web Designers
• Top 6 Internet Explorer Extensions for Web Developers
• Related categories: Tools and Productivity

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

In this first installment, we’ll be covering Goals and Funnels. For a general overview of site analytics revolving around Google Analytics, read Unleashing the Power of Website Analytics.

Defining Your Goals

Setting up goals in Google Analytics is the best way to measure the success rate of your website.

The easiest way to understand what goals are in Google Analytics is by discussing it with an example: ecommerce sites.

The aim of ecommerce sites is to sell goods to their visitors. Therefore, a completed goal would be a successful sale on their website.

This example hints at the first part of using the Goals feature in Google Analytics: defining what your site goals are.

• What do you want to measure?
• What are the factors that determine the success of your website?
• Are you after sales?
• Are you wanting to generate enquiries from prospective clients that want to hire you?
• Or do you simply want visitors to click around and spend more time on your site reading articles?

Once you know your goal (or goals), you need to work out how they will be measured.

For most sites, this will mean either identifying a specific goal completion page (or creating one).

For example, an ecommerce site might set up their "order confirmation" page as their goal, because this page usually comes right after a finished sale. If you’re after client enquiries, then how about the page that is shown to users when they successfully send a message with your web form?

Adding a Goal in Google Analytics

If you haven’t added a goal yet, clicking on Goals in the left hand menu will show you a page that gives a brief overview of what Goals and Funnels are. At the bottom, click on the set up goals and funnels link to get started.

The second box after the Main Website Profile Information section will allow you to set up your conversion goals. You can group your goals together with goal sets, but to start, we’ll just look at setting up one basic goal. Click on the Add goal link on the left, preferably on Goals (set1).

After doing that, you’ll be faced with the Goal Settings page.

Give your goal a name, make it active, and then choose a position; Set 1, Goal 1, for example, refers to your first set of goals, with "Goal 1" indicating that it’s your primary goal.

You will then have three types of goals to choose from.

When you choose a Goal Type, you will be shown a section called Goal Details, which are settings of your goals.

URL Destination

URL Destination is the most common option and is used when visitors get a specific page to visit. For example, a completed checkout page in an ecommerce site.

Time on Site

The Time on Site goal type will track users who spend either more or less than a specified amount of time on the site.

Pages/Visit

Pages/Visit keeps track of people who visit more than, less than or an exact number of pages on the site.

Time on Site and Pages/Visit only give you a single option aside from setting the goal and that is goal value.

Goal Details

For each goal type, there are certain goal details that you can set to customize your goal.

Goal Value

All three goal types have the Goal Value option. It is a monetary return that you estimate a completed goal to be worth; this is normally worked out as part of a website marketing strategy or review.

As an example, if a website enquiry, on average, gives a return of $10, then you should set the goal value to $10.

In most cases, this is just an estimate, so if you’re not sure, you can set the Goal Value to 0.

In the case of ecommerce sites where a completed checkout is worth a variable amount, you can set the goal value to your average basket value.

If you’ve set up Time on Site or Pages/Visit as your goal type, you’re now done and you can click the Save Goal button.

If, however, you’re setting up a URL Destination as a goal type, read on.

Match Type

The Match Type goal detail has three options: Head Match, Exact Match, Regular Expression Match.

Which one to use will depend on how much variety there is in the URL or your goal page.

Head Match: If your goal page requires variables in the URL that can change, such as /checkout/?page=1&basket=50036, then using Head Match will match the starting string of the URL (/checkout/).

Exact Match: If your goal page is a static URL that doesn’t change, such as /contact/thanks.php, for example, then you’ll want to go for Exact Match.

Regular Expression Match: If it’s likely that the start of the URL could change, then you should use Regular Expression Match; this is useful with URL cases such as /department1/checkout.php and /department2/checkout.php.

That’s it for Goals in Google Analytics—let’s move onto Funnels.

Setting up funnel

What are funnels? For certain goal pages, there is a set route of pages that users must go through to get to your goal page.

Let’s take a typical checkout process on an ecommerce site as an example: You add something to the basket, enter your shipping details, add your payment details, and when you submit your order, you get a confirmation page (which is your goal page).

This path is known as a funnel process, and by tracking people’s progress through a funnel, you can see where there are problems and where people are leaving the process.

This is most often used for checkout processes to see where people are dropping their shopping cart baskets. Funnels highlight problems with a long-winded checkout procedure.

Firstly, you need to map out the pages of your process. For example, your checkout process might have these pages:

• basket.php
• shipping_details.php
• payment.php
• confirmation.php

Once you’ve determined your funnel, it’s time to review your goals.

Reviewing Goals

So your goals are all set up, now how do you actually find out information from them?

You can see your goal data straight from the Sites Overview page. Under the headings you’ll see a completed goals column which gives you a basic, straightforward figure that is excellent for a quick glance. But let’s have a deeper look.

Note: A quick thing to highlight is that whilst you can look at visitor numbers for the current day, you’re unlikely to get goal conversions in Google Analytics for the current day, at least not reliably anyway. This is because Google Analytics refreshes its data at regular set intervals, so it is better to look at data from the days before the current day.

The basic goal page, which is obtained by clicking on Goals on the main left-hand menu, provides the immediate information you need at your fingertips.

You’ll see the standard Google trend timeline and the breakdown of how many visitors completed which goals—this is more useful when you have multiple conversions set up. You’ll then get the conversion rate and the goal value if you’ve entered a value for a conversion.

All these are fairly straightforward and the goal conversion figure is the one that most people will tend to concentrate on and quote, especially with ecommerce websites.

So moving down the left hand side, you now have a number of extra menu options that we’ll look at in turn.

Total Conversions:

This shows the total number of conversions and breaks it down by day for the period you’ve selected. This gives an easy visual comparison of better performing days and can help identify trends – do you get more conversions on weekends, maybe?

Conversion rate:

This looks the same as total conversions, right? Well, it is similar, and on sites that don’t have massive differences in traffic from day to day, they’ll look almost identical. However, where the total conversions page was based on the number of conversions per day, 40 conversions being larger than 10, for instance, conversion rate is based on the number of conversions as a proportion of the total visits for that day. So 40 conversions out of 120 is a rate of 25% – 10 out of 20 is 50%, so the weighting now changes.

Goal Verification Path:

This will list all the pages a completed goal was carried out on. If you’ve used an absolute path (e.g. /contact/thanks.php) they should all be the same. But if you’ve used a head match and the end of the URL varies, then this will show which URL each goal conversion comes from.

For example: if you have a shopping cart and the end of the URL is just the cart id, it won’t be much use as they’ll all be different, but if you have something more meaningful in the URL—lets say the source of the site visit or conversions on different sub domains—then it can become useful.

If you have golf.shop.com/finished and football.shop.com/finished, you can quickly compare where your conversions are happening.

Reverse Goal Path:

This data point shows the pages people landed on leading up to a completed goal. This is useful for seeing which pages are funneling more conversions, and for those results showing (entrance), which landing pages are funneling those conversions.

So as an example, we have thanks.php set as our conversion:

• (entrance) > index.php > contact.php > thanks.php

This shows that the visitor landing on the homepage went next to the contact page and then completed a conversion; you can quickly see which pages funnel in more conversions and easily start to work out which pages are more successful to understand how you can improve other pages.

Goal Value:

If you have various goals set up with different values, you can use this page to quickly see which days are more profitable and then use other tools to dig down into why.

Goal Abandoned Funnels:

This page gives you an overview of the number of people who enter the goal conversion funnel, but exit without completing a goal. You can quickly see how many potential conversions your site is losing and again compare over the time period you have selected.

Funnel Visualization:

Once you open up this page, it is self-explanatory: the usual timeline chart at the top of the page and then a flow diagram through the funnel you set up.

At each stage, you can see how many people enter at that stage, how many people are continuing in the funnel from the previous stage, how many people leave at that stage without completing, and perhaps most importantly, where they are going.

This is hugely useful for analyzing things such as checkout processes and seeing where users abandon their shopping carts and where they go.

For instance, if you have the first stage as the shopping basket, it wouldn’t be too alarming to see people exiting from there to continue browsing the site. But if they’re exiting all together, maybe something on the shopping cart page is making them drop from the process?

You can then look and see where people are dropping out and this can easily highlight problematic or broken forms and links or long-winded pages that people simply give up on.

Drilling down even further

The basic pages give you a very useful set of tools to analyse your conversions and abandonment, however, if you want an extra level of detail, the advanced segments tab can provide some very handy information.

Located in the top right of the page just above the trend graph and date picker, it will open up a drop down with a list of visitor types.

Selecting them via the tick box will show the relevant figures on the page and allow you quickly compare visitor types. Are conversions for new visitors higher than returning visitors? Do people who arrive via paid search (Adwords) abandon more carts than those who arrive by organic search? These are some of the questions that you can answer by using Google Analytics.

Related Content

• How to Increase Conversions on any Website in 45 Minutes
• 10 Promising Free Web Analytics Tools
• Unleashing the Power of Website Analytics
• Related categories: Tools and Web Development

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project - Stat Share.

Of course, your visitors can use third party tools like Google Translate or Babelfish to translate your site themselves, but you should never rely on users to do anything.

Laziness is king on the internet, so always make things as easy as possible. Think how social media icons increase traffic even though users have browser bars and bookmarklets that they can use.

Fortunately, you don’t have to hire a professional translator to support multiple languages on your site. Thanks to wonderful APIs such as the Google Language API, there are a number of free and easy-to-install translation solutions available. Although these automatic methods will never be as good professional translations written by translators, they provide an attractive opportunity to offer internationalization at no cost.

Google Translate Tools

First, Google Translate provides a simple widget that you can copy and paste onto your site for a basic dropdown of 52 languages. When a language is clicked, the user is redirected to translate.google.com to see the translation.

While this widget is easy to install, it’s a bit "old web" with its unstyled dropdown and ugly branded button. However, a larger issue is that it boots users to Google for the actual translation, so you lose any linkbacks or tracking data.

The TranslateThis Button

An alternative to Google Translate Tools, The TranslateThis Button is another translation widget that can be copied and pasted onto any webpage. Leveraging the Google Language API, it provides the same 52 languages of translation as Google Translate Tools, but with a better user interface including dropdowns, overlays, and flag icons. Most importantly, users are not redirected to Google.

The translation runs in JavaScript, replacing portions of the page as it receives them from Google. In addition to producing a nice transition effect, JavaScript allows the script to work significantly faster than Google Translate for most pages.

Additionally, the TranslateThis Button provides some customizable options: Google Analytics tracking, customization options for the look and feel, callback functions, and a scope restriction. Read the docs for more info.

Overall, the TranslateThis Button is advantageous because it provides a rich user experience while staying relatively lightweight (the script is under 12kb). Running on the client-side allows it to translate most websites quickly, however sites with a great deal of content might benefit from a server side script with static caching features.

jQuery Translate Plugin

Another client-side translation option is the jQuery Translate Plugin. Similar to the TranslateThis Button, this script parses the page content and sends it to the Google Language API using JavaScript. Instead of building an interface for accessing the languages, this plugin provides a couple of handy translation functions you can use however you like.

The jQuery Translate Plugin has certain advantages and does a great job concatenating short pieces of content to limit requests to the Google Language API. However, it still tends to run slower than the TranslateThis Button since these requests run consecutively.

Additionally, even without the jQuery core, this script is the same file size as TranslateThis.

Global Translator (Wordpress)

Client-side translation can be fast, sleek and easy to implement. However, for high traffic websites, you can’t beat a server-side solution with caching.

Global Translator by Davide Pozza is a WordPress plugin that does just that. Providing 41 languages of translation for any WordPress site, its features include a fast-caching system and SEO-friendly permalinks. No client-side method can boast all that, and what’s more, this plugin allows you to choose from four different translation engines: Google Translate, Babel Fish, Promt or FreeTranslations.

If you have a WordPress site, Global Translator is definitely the way to go. It is significantly better than the Google AJAX Translation plugin, which just leverages the jQuery Translate Plugin.

Where is translation headed?

Automatic online translation has made some amazing progress recently and is just getting better. The number of languages supported by the Google Language API is constantly increasing, allowing you to reach a growing user base. Also, the quality of the translations and speed of the API are steadily improving.

In the future, Google will hopefully increase the length of the language strings that can be passed to the API. The max is currently 1,000 and if it were increased to 2,000, a number of Translation plugins could run significantly faster.

Additionally, Google Translate recently announced Text to Speech support, and Weston Ruter released a script that combines this with HTML5 audio.

As the web moves towards a fuller internet experience, accessibility issues are coming to the forefront. Translation should not be forgotten in this process.

Related Content

• 15 Free Tools for Web-based Collaboration
• 10 Puzzle Websites to Sharpen Your Programming Skills
• 16 Free JavaScript Solutions for Displaying Your Images
• Related categories: Tools and Resources

About the Author

Jon Raasch is a UX nerd and free-lance developer who loves jQuery, JavaScript and CSS. Focusing on user experience, Jon uses his front-end skills and design background to sculpt robust, accessible web apps. On the side, he develops a variety of free jQuery, JavaScript and WordPress tools. Check out Jon’s blog or follow him on Twitter: @jonraasch.