The Top 15 Google Products for People Who Build Websites

Apr 17 2010 by Jacob Gube | 92 Comments

The Top 15 Google Products for People Who Build Websites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

92 Comments

Donna Vitan

April 17th, 2010

This is such a sexy article. Thanks!

Kawsar Ali

April 17th, 2010

Nice list!. I did not even know some of the existed such as browser size. Thanks for share.

cooljaz124

April 17th, 2010

Google simply rox

Rory Dixon

April 17th, 2010

Wow, what an eye opener! And I thought I knew all the Google products…

Thank you for this very useful resource.

Beben

April 17th, 2010

hmmm…so interest

Sakib

April 17th, 2010

great share.

Karl Kratz

April 17th, 2010

Whew, this is a very nice article. I think, Blogspot would fit in this list also :-)

Vidyesh

April 17th, 2010

Great! Nice list of webmaster tools.

But the ‘Google Chrome Developer Tools’ shouldn’t have been there actually, as far as i know, its just a Chrome Extension which was first available on Firefox. So not a ‘Google Product’ basically. But ya Google Chrome is :)

Varun

April 17th, 2010

Great list! Very useful. Thanks for sharing.

Matthew Heidenreich

April 17th, 2010

loving Google Analytic and don’t know what I would do without it. Browser size? How did I not know about this? Thanks!

Cardview

April 17th, 2010

Very helpful post! Thanks!

Nivethan

April 17th, 2010

Vary useful post. Thanks a lot!

Motyar

April 17th, 2010

Great collection ever. The google web optimizer is new for me.

ken shan

April 17th, 2010

nice article! i love webmaster tools and google map.

Nathan Ziarek

April 17th, 2010

The Google Chrome tools are part of the underlying code known as WebKit. Safari (on the Mac and Win) has had them for years. Actually, downloading what are know as the “nightly builds” of WebKit will get you all sorts of great additional tools that just haven’t matured yet into Chrome/Safari. THe most recent is a take on PageSpeed.

I personally prefer the Inspector to FireBug. It’s prettier (which should count for something), and really seems to be robust.

Mario

April 17th, 2010

excellent write up! i never knew about #9 Google sites. I see they have a wiki template available. might be nice to host working files for clients to update as you go along.

Harish Mohanan

April 17th, 2010

great one! absolutely ausome! actually i am a great google fan. but never knew tat google offered so lot of services. I am an enthusiastic web designer too… Certainly this will help me.. thank you … tanx alot!

Margaux Lespagne

April 17th, 2010

Thank you ! it’s very interesting.
The best of the best for me : Analytic, Browser Size, Maps, & Webmaster Tools.

Like Motyar : The google web optimizer is new for me.

John Harvey

April 17th, 2010

A very succinct and revealing article that should be incorporated into any savvy designers handbook! Nice one. Regards John.

Azhar Kamar

April 17th, 2010

Great article! Didn’t know about some of these awesome Google products. This will surely help me in my web development projects. Thanks for sharing!

Wikk

April 17th, 2010

Don’t forget Google custom search. You can even style the results and display it as an iframe on a page hosted on the site itself! Pretty sweet.

Joe Didly

April 17th, 2010

Wow, no way dude thats like totally insane.

Rick

April 17th, 2010

Google… so much more than a search engine. Nice articles, thanks

July

April 17th, 2010

Awesome list, thank you!

Nan

April 17th, 2010

Thanks for sharing, useful to read this post. ;-)

Alex Flueras

April 17th, 2010

Great article. I have learned so many new things about Google that I had no idea even exist. Thanks for sharing.

Mary Lou

April 17th, 2010

Thanks Jason nice job. Very useful information~

majin22

April 18th, 2010

great article, I am currently using the page speed to test the result and compare it to what I got when I use Y Slow

Rudra

April 18th, 2010

Great article, covers many services that people may not be aware of!

Cook

April 18th, 2010

a very well written article…

kelly

April 18th, 2010

useful read…informative post…really helpful

Maverick

April 18th, 2010

google surely has loads and loads of tools and services but for some very strange reason they don’t promote them :(

Deryck Harlick

April 18th, 2010

Really useful article. A useful addition to this would be using google wave for communications between the web designer and the developers – or anyone working on the project for that matter.

Sukma

April 18th, 2010

So great.Very useful for everyone.Thanks for sharing.

Glance World

April 18th, 2010

hmmm. nice article. thanks for sharing these sites.

mavgh1

April 18th, 2010

Nice article although most of them are useless in my opinion.

PHPGangsta

April 18th, 2010

I’m a bit nervous, the list is much longer than I expected.

Whao.

Marroquin

April 18th, 2010

Wonderful information!

Marroquin

April 18th, 2010

Great information!

Jim

April 18th, 2010

I use Google’s webmaster tool and I love it! I’m certainly going to check out the other stuff too! Great Article!

giuliana

April 18th, 2010

Great article :)

Peter

April 19th, 2010

Nice list :)
But where is the Google Bank Robbery Tool ;)

Derrick

April 19th, 2010

Thanks for putting this together! I’ve used almost all of these tools!

Mack

April 19th, 2010

A wonderful collection, if one knows well about all the above tools, this will help him to do a good web development and little bit SEO too.

Jordan Walker

April 19th, 2010

Google has been paramount to development.

blackbeard

April 19th, 2010

1. Google Chrome Developer Tools: This is a tool developed by apple, it is part of WebKit.

You could at least reference the original tool and creator instead of giving Google all the credit for simply taking Apple’s tools as calling them their own.

James

April 19th, 2010

I would avoid google’s ajax library api. Why you say? Because you tie yourself to google to much in that it requires google specific calls. Also, it seems to do some callbacks to google if you watch firebug. Microsoft’s is better in that it is just a cdn not special calls (only jQuery though).

mAzzam1988

April 20th, 2010

No wonder they consider Google as a monster, they might not be the best, but they can’t stop trying!!

ProgrammingGeeks

April 20th, 2010

..and I thought I knew all the Google products ;)

adrian

April 20th, 2010

great list, all useful to me except the google chrome developer tools are not google products at all, they were included in safari before chrome was released (the exact same tools in the exact same interface) so I assume they are webkit.

Dave

April 25th, 2010

Google has been paramount to development.

Calgary

April 27th, 2010

Thanks a lot for a useful list! I especially liked # 11. Project Hosting. We’ll testing over the next few week and I’ll be back to comment with results. Thanks again!

Xander

April 28th, 2010

The reference to Gears in the “Other Google Products” section should probably be removed since it’s been discontinued (in favour of HTML5 APIs), but otherwise a really great list (though I agree with the other comments about Chrome’s Inspector actually being part of WebKit by Apple!).

Deadwin

April 30th, 2010

gud collection….

Eric Roth

May 5th, 2010

Detailed, illuminating, and persuasive.

Thank you. I will share this article with my web developers as we revise the site.

Andy @ FirstFound

May 7th, 2010

Brilliant article. My web developer’s passed on his thanks.

P.K.ARUN

May 8th, 2010

I use google webmaster and analytics.

Tomas

May 8th, 2010

I have not access to this products from Cuba, where i can find this tools outside Google?

Phil Taylor

June 13th, 2010

Google continues to innovate and its free products are amazing. They make the cloud truly available to all. Thanx for the list of tools.

Mita

July 7th, 2010

Hey thanks for sharing this. Google has been leader in tools and is never short of ideas.

Andrey

July 22nd, 2010

Perfect extension to embed jQuery into Chrome Console as simple as you can imagine. This extension also indocates if jQuery has been already embeded into page.

This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by “Ctrl+Shift+j”).

To embed jQuery into selected tab click on extention button.

LINK to extension: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc

Harshad

July 26th, 2010

really love this stuff, thanks google for making life easy :)

iconshock

July 27th, 2010

Hey jacob, thanks for this post, There’s another really useful tool for web professionals: Google insights for search !

see ya

Gagan Sharma

August 13th, 2010

Nice job.Thanks alot.

Hashem E.Zahran

August 24th, 2010

I didn’t even know there was something like browser size till I see it in here, nice work jacob :)

manoj

September 2nd, 2010

how many total google products.And present google product name? mail me PLZ…….

Elmekhlafi

September 7th, 2010

Thankyou very very much for this artical.
we need more articals same like.
thankyou

soni

September 8th, 2010

google is supper cool when u go in deepth abt it….

ramesh

September 24th, 2010

these products very usefull to all web users and
web developers

Joe Griffin

October 26th, 2010

Thank you for the excellent information

Joe Griffin

Vladimir

November 7th, 2010

Love Google and especially their fun, free, and useful tools :)

Brett Widmann

November 9th, 2010

Wow these are really helpful and FREE! Can’t get enough of free help these days. Thanks for sharing.

mastrozi

November 10th, 2010

Nice info, I will try

Adrian Iorgu

November 18th, 2010

Google is just amazing. I heard they are working on a web-based Operating System.

Kaithy Aravind Reddy

December 18th, 2010

Very good collection of google products.

Neo Symmetry

January 6th, 2011

Awsome post! I found a few thing’s on here that I can find useful. I knew there were a lot of choices from Google, but didn’t know about some of these lab features. This was an extremely informative post. Thank you for compiling the information.

Pradeep Kumar

February 1st, 2011

Thanks to describe this on one page.
Please tell me about purchase process of TPT of Google

Abhinaya Joshi

February 28th, 2011

Really good for developer.

pisanie prac

April 11th, 2011

Great information

yerenpk

April 12th, 2011

good,i like.

Gaurav Maheshwari

April 18th, 2011

Awesome list, thank you

reynuls

May 4th, 2011

As a newbie web developer I find this article of yours very very important to me. As I have learned much from here that I have to bookmarked your site. Thank you.

Phil Taylor

May 14th, 2011

Google is the most creative company on the web. Its tools, including the new Chrome OS are going to be widely adopted and used by business. Microsoft better beware!

Calin Daniel

September 8th, 2011

The Google Webmasters Tools are amazing, and so under appreciated. It received a big thumbs up from me as well.

Rahul Banker

September 21st, 2011

very very helpful stuff :) Thank you so much for making a list out if it!

Ali Abdat

October 23rd, 2011

really, useful list, always google in the top.
thanx for the writer..

tahera

November 2nd, 2011

Nice listing…now google has tied up with hosgator in india and is providing .in domains free for 1 year…. another one for india….

Larry Pitts

November 19th, 2011

I had never heard of the browser size feature in Google labs. A handy bit of knowledge there, thanks!

Rahul

September 2nd, 2012

Awesome details..thanks man..
It helps all webmasters and website owners..

Andy Kuiper

March 1st, 2013

Thanks Jacob :-) I’m going to learn more about the Google Charts tool you mentioned.

Leave a Comment

Subscribe to the comments on this article.