Aside from being rather funny, the video shows the emotion of those on the outside are left feeling: I want an invite too! If Wave is anything like GMail, it’ll stay beta for a decade. Hold your horses…

There is certainly power in knowing. When dealing with a website, a statement couldn’t be more true. Knowing who is visiting your website, what pages they’re clicking, the paths they’re taking to get there, and generally what they’re doing on your site can be absolutely invaluable when fine tuning to turn your virtual reality into real money.

Today, we’re going to look at the most popular website analytics package out there in Google Analytics. We’ll do a step-by-step approach to help you understand the terminology, what it means, and finally what you should do about it.

We’re going to do a case study on the most visited site we have in our profile: StateFansNation.com

Visits

Graph: Visits

This graph shows us the number of unique visitors that hit statefansnation.com in the past month. A unique visitor counts only once per day and is a good count of the number of people who visited the site. Of course, this number does not a perfect 1:1 ratio of people to visits. A visit is technically defined as a “computer” and not a “person” therefore a person could be counted more than once on the visit scale. For example, a single person could be counted twice if he or she visited the site at work and then at home. Nonetheless, it’s a great indication of how voluminous your audience is. Over the course of this time period, statefansnation.com saw 111,892 visitors.

Pageviews

Graph: Pageviews

Pageviews are the number of times a single page was visited. Back in the hey days of the Internet, this was called “hits” and was used to gauge a popularity of a website. It’s a bit of a misleading stat because, technically, a single person could produce all of the pageviews in the graph. Therefore using pageviews as a popularity metric isn’t the right approach. Nonetheless, pageviews is a valuable metric. If, for instance, your visits graph looked exactly like your pageviews graph, that tells you that the quality of your website is not up to par with what the visitor is wanting. If that were the case, each visitor would have hit only one page and then left (more on this later) which seguays nicely into our next metric.

Pages/Visit

Graph: Pages/Visit

Using visits and pageviews together gives us a nice ratio. The graph shows us how many pages each visitor saw before exiting. This is another gauge into the relative success of your content. If you had a 7 or 8 pages/visit metric on your site, that tells us that visitors liked your site enough to click on 7 or 8 unique pages before exiting. Since statefansnation is a blog and many of the visitors are everyday users of the site, a 2.02 ratio isn’t all bad since the user will not be likely to click on previous entries that he or she may have already read.

Average Time on Site

In addition to knowing how many pages a visitor saw, it is also important to know how long they spent to get a clear picture. If a person browses to your site, clicks a few links and exits within 30 seconds, your pages/visit metric may look misleadingly good. Putting that together with average time on site will normalize your visitors behavior. As we can see here, the average visitor spent 2 minutes, 31 seconds on the site before exiting. A “good” range will vary from industry to industry and site to site. However, anything below 30 seconds is certainly in the “bad” range.

Bounce Rate

Graph: Bounce Rate

A bounce is defined as a visitor who did not offer a single click to your website. They came, they saw, they left. Again, translating this number into a tangible meaning will vary from site to site. Of course, the lower the bounce rate, the better. Here, statefansnation.com is seeing a bounce rate of 53.07%. Is this good? Probably so. Since it is a news site with newcomers only interested in the latest piece, it is quite typical for a visitor to land, read, and leave.

% New Visits

Graph: % New Visits

Knowing what percentage of your audience is “new” is important. Here,

Absolute Unique Visitors

Graph: Absolute Unique Visitors

This report asks the question “has the visitor visited the site before outside of this date range?” If yes, they are categorized as a returning visitor and if not, a new visitor. Both are counted as an absolute unique visitor.

All Traffic Sources

Graph: All Traffic Sources

Now that we know generally “who” your active audience is, it’s important now to know how they got to your site. This overview graph lets us know that 65% of the time, visitors are the result of direct traffic, or someone manually types the address in (or selects it from a bookmark) to get to the site. 16% of the time, they are referred, or sent to the site from a link somewhere else on the Internet. And 18% of the time, they are the result of appearing on a search listing.

These three measures are important independent of eachother, but one may be more important depending on your method of advertising.

There’s far more to what you can do with these metrics, especially determining what keywords yeilds the most quality visits, which sites are heavy referrals, and which search engines your site is performing best on. All of these metrics are available inside of Google Analytics.

Hi, I’m Brian, and I’m an Outlookaholic.

Today, I have good news. If you follow this easy 5 step program, you too can be rid of Outlook and all fo the headaches that come along with it.

Step 1: Sign up for Google Apps

100% free Google Apps. Google is generous enough to let you use their platform for your own purposes and with your own domain. You can use Google’s GMail, Calendar, Docs, and Chat, branded with your company and with all the features that you would get with a standard Google account.

The free moniker may be a bit misleading. Google does get a valuable advertising profile with your usage.

Step 2: Use the GMail platform for your e-mail

No e-mail is better than GMail. The incredible search aside, GMail gives you everything you could possibly need: filters, labels, contact management (more on this), and a gigantic slew of toys known as Google Labs.

Step 3: Google Calendar, awesome

Create, send, and receive invites, schedule your life and make it remind you when your late. Google Calendar is just as formidable as Outlook’s calendar or iCal or literally any other client-based calendar. And you can access it from anywhere.

Step 4: Manage your contacts with GMail Contacts

One of the drawbacks for so long about GMail was its clunky contact management system. However, all that has changed. The contact management portion of GMail is now fantastic.

Step 5: Sync it with you iPhone

And the best part: Sync it all with the native calendar and contact apps on your iPhone, Blackberry, or Android based mobile devices. Essentially, you’re getting an enterprise level mail, calendar, and contacts service… for free.

What else?

You’re cured. You have an online, accessible, syncable e-mail platform available from everywhere without the frequent Outlook crashes. You’re cured.

Go forth and prosper.

Bookmark synchronization

XMarks (formerly FoxMarks) is a handly Firefox Plugin that manages and syncs your bookmarks across computers. I have a Dell laptop for when I’m on-the-go, an iMac at my home office, and a Dell XPS at the office. It’s imperative that my bookmarks are synced between all of these sources. A creature of habit, I tend to know exactly where to click to find something, but really couldn’t tell you the name of the site or app. I simply know “where” it is in my bookmarks.

XMarks also supplies a handy web interface for when you need to reference a bookmark and don’t necessarily want to sync to that particular computer.

Price: Free
www.xmarks.com

Cross-browser testing

Everyone in this industry loves the bastard child that is Internet Explorer 6. Essentially obsolete the day it was released, IE6 is the dinosaur that simply won’t go away. Unfortunately, IE6 still has quite a large user base thanks in large part to corporate networks who lag years behind on updating software mainly due to proprietary software that depends on older software releases. Since its user base is large enough, it can’t be ignored.

IE6 is the cowboy. It translates CSS and HTML however it pleases and often times to its own tune. Cross browser testing is an absolute must. The big ones to check for are Internet Explorer 6 and below, Internet Explorer 7 and above, Firefox, Safari, and the newcomer Chrome.

Browsershots.org is a great utility that lets you choose to display your site in a wide array of browsers on different operating systems. Once rendered, Browsershots.org allows you to download all of your previews as .jpgs and bundled as a .zip. The one major downfall is the time it takes from submission to render, often greater than 30 minutes if you choose a particularly popular browser. However, you can purchase expedited service for a small fee.

Price: Free, optional $29.95 for 1 month of priority processing
www.browsershots.org

For Internet Explorer only service, look no further than IE Net Renderer. This service allows you to choose versions 5.5 to 8.0 and gives you a jpg preview, often within seconds.

Price: Free
ipinfo.info/netrenderer/

Adobe BrowserLab looks like a promising product which has yet to hit the market (in beta testing now). With Dreamweaver CS4 integration, this may be the most complete tool to date. However, with anything Adobe touches, expect extreme quality and a steep price.

browserlab.adobe.com

Greeking

If you’ve ever seen a web site concept before, more than likely you’re familiar with the concept of “greeking.” Substituting “greek” text as a placeholder for actual copy is standard practice as all-too-often, copy comes after design (somewhat of a strategic no-no: hopefully discussions of what content and type of content was a part of the discussion before designing). The end result often looks like this:

Lorem ipsum dolor sit amet, valetudo, abico commodo luptatum esse ut. Abico lucidus tum tation antehabeo, transverbero vulputate sit in capio causa fatua appellatio odio. Ratis proprius dolore letalis gemino, macto os enim duis. Minim jus voco, euismod gemino duis nisl ea refoveo, multo, abdo. Metuo capto veniam virtus pagus pneum dolore plaga, humo aliquip iriure magna quibus. Nutus antehabeo delenit neque ut hendrerit vulputate. Humo feugiat vulputate oppeto, scisco cogo ingenium ratis.

And the fruits of being #1 in Google when searching “greeking” is this nice little app by Duck Island.

Price: Free
www.duckisland.com/GreekMachine.asp

Javascript Frameworks

Client-side development can sometimes be monotonous and frustrating. Using javascript to develop for the client-side yields a few obstacles given the number of platforms and operating systems that must be taken into account. Here is where two very important frameworks enter the conversation: Prototype and jQuery. Both of them essentially accomplish the same thing but in different ways. They both make javascript code shorter, simpler, and easier to use and repeat. They give some great base classes that make javascript development a lot more pleasureable to accomplish. Many plugins have been written for the frameworks that are easy to implement such as modal windows, animation effects, form processing, etc. They also both have solid AJAX implementations that make AJAX as easy as a one-line call.

Price: Free (although I feel like I’m stealing every time I use them)
www.prototypejs.org
www.jquery.com

Content Management

I’ve written before on content management and our goto solution in WordPress. Thanks to the huge developer community of WordPress, plugins are plentiful and readily available. One plugin I can’t live without is the More Fields plugin.

More Fields turns WordPress into a full content management solution instead of a blogging platform. The tool allows the administrator to add fields to the Wodpress “posts” pages giving you an added ability to segment data across a single page in the particular site. For example, if you had a site that needed a user defined image header to be chosen from a set of 5, you could easily add a field to the WordPress post screen giving the user a dropdown menu asking which header they wanted. A click of a mouse would give the user the ability to change the header on each page he or she wishes. That’s a very low level example as the power packed inside of that plugin is great.

Here’s the best part.

Price: Free
labs.dagensskiva.com/plugins/more-fields/

Debugging

Again hitting on the client-side scripting angle, it is imperative to have a decent debugging tool. That’s where Firebug, a Firefox plugin becomes make or break. It’s also great at debugging AJAX, watching post variables from page to page, managing page load times, and tweaking CSS on the fly.

Price:  Free
www.getfirebug.com

But the Web as an application platform has plenty of flaws. Chief among them are the bevy of clients available for the reading of web applications each of whom follow their own set of rules. By far, the most frustrating thing about developing simple websites to advanced applications is making sure each entity is cross-browser compliant. Although the browsers are becoming more standardized with each new release, there is still a very relevant dinosaur that rears its ugly head every time. That dinosaur is Internet Explorer 6. Conceived as a part of Windows XP and Windows Server 2003, Internet Explorer 6 achieved a usage of nearly 90% in 2002 and 2003. The Internet Explorer series has slowly been on a decline since the release of Mozilla’s widely popular Firefox browser and Apple’s Safari browser. However, many legacy web applications are only supported on the Internet Explorer 6 platform thus many corporate networks restrict the installation of other browsers or even more updated versions of Internet Explorer which are much more standards compliant than the IE6 dinosaur.

Non-standardization across browser platforms is perhaps the greatest challenge when building sites and applications. Unlike the packaging process used for desktop applications which uses operating system componenents to render display, Internet applications require developers to code specifically for not just different browsers but different versions of browsers as Internet Explorer 6 behaves much differently from 7 or 8.

Typeface restrictions are second on my list of pet peeves in developing for the Web. Web developers tend to stick with standard fonts (of which there are around 7 or 8 ) because browsers require the end-user to have the specific font installed on their computer for it to render correctly. It is possible to embed fonts inside of websites to have the user’s browser download a specific font and then rendering it correctly, but this method solves few problems as most fonts are commercially licensed. Without the permission to distribute a selected font, which most if not all companies will grant, then you cannot legally use this method.

A few patch methods exist, but the implementation is difficult and often requires the user to have flash installed and javascript enabled, which a majority do, but nonetheless will prohibit some mobile browsers from rendering correctly.

Although the Internet as a platform has a few flaws that must be dealt with on a case-to-case basis, the ease of installation and upgrading on the client end more than makes up for it. The Internet’s shortcomings are more than made up for since the Internet can essentially deliver enterprise-level applications without a single install (ok, maybe you’ll need a few ActiveX controls, Flash, or some other add-on) and without forcing the user to manually upgrade their product with a new release. Further, the good news is that with each new browser release or upgrade, standardization becomes more and more mainstream. The typeface issue will likely be resolved by the end of the year as a commercial solution is on the horizon of release. I’ll of course keep you updated.

The collaboration feature of Protoshare make this application worth the money. Protoshare easily outclasses their competition with notation tools and the ability to export to HTML so you can actually “click” through the rough draft of a website. With packages starting at $29/mo, the value Protoshare brings far outweights its cost.

www.protoshare.com