Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of these new stylistic possibilities, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles.

Many of us know how easy it is to use CSS border properties to do cool stuff like image-free, cross-browser rounded corners, but there is so much more that is possible with all of the new CSS3 properties. In this article, we’ll explore the CSS3 and CSS2.1 border properties while keeping a keen eye out for obvious patterns and taking note of key points along the way. When it’s all said and done, hopefully we’ll have a better understanding of the “big picture” concerning the functional and syntactical mechanism behind the magical world of CSS border properties.

Border Color

The border-color property consists of four individual properties:

border-color
	border-top-color
	border-right-color
	border-bottom-color
	border-left-color

• border-color supports any valid color value including transparent
• the element’s background color extends into the border area and appears when border-color set to transparent

Border Style

The border-style property consists of four individual properties:

border-style
	border-top-style
	border-right-style
	border-bottom-style
	border-left-style 

• property values include: none, hidden, dotted, dashed, solid, double, dot-dash, dot-dot-dash, wave, groove, ridge, inset, outset

Border Radius

The border-radius property consists of four individual properties:

border-radius
	border-top-right-radius
	border-bottom-right-radius
	border-bottom-left-radius
	border-top-left-radius

• negative values not allowed
• two property values may be used to define both horizontal and vertical radii
• if either of these two values is set to zero, no rounding will be rendered
• if these values are the same, they may be combined into a single value

Border Image

The border-image property consists of two different groups, border-edge-image and border-corner-image.

border-edge-image

In CSS3, the border-image property consists of the following individual properties:

border-image
	border-image-source
	border-image-slice
	border-image-width
	border-image-outset
	border-image-repeat

Which may be further broken down to accommodate unique individual side images:

border-image
	border-top-image
	border-right-image
	border-bottom-image
	border-left-image

• border-image-source specifies an image to use instead of the border styles given by the border-style properties and as an additional background layer for the element. If the value is none or if the image cannot be displayed, the border styles will be used
• there are four border-image-slice values that represent inward offsets from the top, right, bottom, and left edges of the image respectively, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the fill keyword is present, in which case it is drawn over the background
• someone please explain to me what the difference is between border-image-width and border-image-slice
• the border-image-outset specifies the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively
• the border-image-repeat property specifies how the images for the sides and the middle part of the border image are scaled and tiled; values include: stretch, repeat, round
• specifies the images for the edges, not the corners
• question: in CSS3, can we still specify up to three images for each of the four edges, like so:

.border-image {
	border: solid transparent 10px;

	border-top-image: url("border-top-01.png") 10 round round,
			  url("border-top-02.png") 10 round round,
			  url("border-top-03.png") 10 round round;

	border-right-image: url("border-right-01.png") 10 round round,
			    url("border-right-02.png") 10 round round,
			    url("border-right-03.png") 10 round round;

	border-bottom-image: url("border-bottom-01.png") 10 round round,
			     url("border-bottom-02.png") 10 round round,
			     url("border-bottom-03.png") 10 round round;

	border-left-image: url("border-left-01.png") 10 round round,
			   url("border-left-02.png") 10 round round,
			   url("border-left-03.png") 10 round round;
	}

border-corner-image

The border-corner-image property consists of four individual properties:

border-corner-image
	border-top-left-image
	border-top-right-image
	border-bottom-right-image
	border-bottom-left-image

• question: is this property still possible with CSS3?
• specifies images for the corners, not the edges
• separate images may be specified for each of the four border corners, like so:

.border-image {
	border: solid transparent 10px;

	border-top-left-image:     url("top-left.png") 10 round round,
	border-top-right-image:    url("top-right.png") 10 round round,
	border-bottom-right-image: url("bot-right.png") 10 round round,
	border-bottom-left-image:  url("bot-left.png") 10 round round,
	}

As if that weren’t enough, each of these properties may be applied via vendor-specific prefixes, which are summarized as follows:

.border-image {
	border: solid transparent 10px;

	-webkit-border-image: url("border.png") 10 round round;
	-khtml-border-image:  url("border.png") 10 round round;
	-icab-border-image:   url("border.png") 10 round round;
	-moz-border-image:    url("border.png") 10 round round;
	-o-border-image:      url("border.png") 10 round round;
	border-image:         url("border.png") 10 round round;
	}

Border Fit

The border-fit property consists of two different groups, border-fit-length and border-fit-width.

border-fit
	border-fit-length
	border-fit-width

Border-fit-length

The border-fit-length property consists of four individual properties:

border-fit-length
	border-top-fit-length
	border-right-fit-length
	border-bottom-fit-length
	border-left-fit-length

Border-fit-width

The border-fit-width property consists of four individual properties:

border-fit-width
	border-top-fit-width
	border-right-fit-width
	border-bottom-fit-width
	border-left-fit-width

• property values include: clip, repeat, scale, stretch, overwrite, overflow, space
• border-fit-length determines image handling for the length of all four sides
• border-fit-width determines image handling for the width of all four sides
• there is also a border-corner-fit property, which determines image handling for corners

Border Image Transformation

The border-image-transform and border-corner-image-transform properties are used to specify that an image on the corner is a transform of the border-top-left-image or the images on the edge is a transform of border-top-image and border-left-image.

border-image-transform
border-corner-image-transform

• property values for border-image-transform include: none, rotate, reflect-xy, reflect-right, reflect-left
• property values for border-corner-image-transform include: none, rotate, reflect

Border Break

Nope, this doesn’t mean we get to take a break from all this border insanity. Rather, the border-break property determines how the border handles breaks in content flow.

border-break

• When a box that has a border is broken at a page break, column break, or, for inline elements, at a line break, a border can be inserted at the break, or the border can be left open
• A border-style or a border-image will add padding and a border at the break, as if it was the normal end of the box
• The value “none” will not add padding or border at the break. The property has no effect if the border is absent

Box Shadow

Not sure why this is included in the CSS3 Border Module, so here it is. The box-shadow property adds a drop shadow to any block-level element:

box-shadow

• one or more drop-shadows can be attached to a box
• drop-shadows are drawn just outside the border
• shadows do not influence the layout: they may overlap with other boxes
• shadows may be rounded if border-radius is applied to the box
• shadows are only drawn where borders would also be drawn

Border Shorthand Properties

The border property is a shorthand property for setting the same width, color, style and images for all four borders of a box.

border
	border-top
	border-right
	border-bottom
	border-left

Each of these shorthand properties consists of the following individual properties:

border
	border-width
	border-style
	border-color
	border-url
	border-image-transform

	border-top
		border-top-width
		border-top-style
		border-top-color
		border-top-url
	border-right
		border-right-width
		border-right-style
		border-right-color
		border-right-url
	border-bottom
		border-bottom-width
		border-bottom-style
		border-bottom-color
		border-bottom-url
	border-left
		border-left-width
		border-left-style
		border-left-color
		border-left-url

• omitted values are set to their initial values
• the border-image property overrides the border-style property

There’s …too many of them

Well, perhaps not, but I do think that 90% of current designs are probably not taking advantage of all that these border properties have to offer. I think I understood the CSS2.1 specifications for the border module, but now with CSS3, much has changed, including properties that seem to have disappeared entirely (e.g., border-corner-image). Other properties are less-capable (e.g., multiple images via border-image), and others seem like they may possibly interfere with each other (e.g., border-image-repeat and border-fit). Hopefully all of this will be worked out and become clear so regular joes like myself can understand and apply these rules properly and without confusion or paranoia that they might break something, somewhere, in a browser far far away. In the meantime, it looks like we have more than enough border properties to keep us going with well-styled borders for the next 5 to 10 years.

Source: Perishable Press

Take your WordPress skills to the next level with Digging into WordPress!

Related articles

• A Complete CSS Template File
• A Killer Collection of Global CSS Reset Styles
• More Killer CSS Reset Styles
• The Power of HTML 5 and CSS 3
• CSS3 + Progressive Enhancement = Smart Design
• Digital Units
• Perishable Press Print CSS

Read more: http://perishablepress.com/press/2010/02/22/css3-border-properties/

I have been doing some non-design-related work recently and have not been saturated with anything even computer-related for the past several weeks. Mostly I have been just enjoying life, but also drawing quite a bit and going around taking photos of old, decrepit homesteads and factories. Needless to say, it’s been a much-needed respite from the usual crunch and grind.

Taking a few steps back like this from the Web — even for such a short period of time — is remarkably refreshing, and has given me time to contemplate all this web-stuff that keeps us all so busy. When you’re right down in it, focused like a laser and cranking the days away, time sort of loses meaning, as every moment is purely an opportunity to get something done.

Looking more at the overall shape of things gives you a better perspective of how all the little pieces fit into place. When we’re focused strongly on a particular set of goals, it’s necessary to filter out as much extraneous information as possible. This helps in the short term, but it’s good to step back once in awhile and “let in” as much depth and perspective as possible.

Here are some of my observations regarding the Web and design-related goings on. I don’t think any of this is really anything new, but somehow taking a few steps back helps to illuminate certain things in a clearer light.

I’m tired of catering to the lowest common denominator

It’s frequently necessary, but not always. There’s too darn many websites that just crank out post after post of the most popular-type content possible. Whatever will get the most hits, tweets, and diggs. I am guilty of this myself, not just for writing articles, but also for certain designs. If I know the client is going to drool over some tasty jQuery tricks, I’ll usually go ahead and throw them into the mix. In fact there’s almost a “magic recipe” these days of “hot” design elements that go into a wannabe popular website design. What does it all mean? If it pays the bills, then go for whatever works, but seriously, I remember the Web back before it was the Babylonian money-maker is today. The percentage of original, inspiring material is shrinking to atomic size, while the the amount of flashy popular mainstream garbage is spreading like the black plague.

Popularity is an illusion

Especially on the Web, the idea of someone being popular is all relative. Sure, you may have a half million followers on Twitter, but it represents little more than the cumulative total of a very small percentage of the online population making a quick, self-serving decision to jump on board. What does this mean? People associate themselves with you because of what they can get from you, whether that be something as shallow as another Twitter follower, or something as important as friendship. It’s all too easy to self-deceive into thinking that anything is really that amazing, including yourself. It kills me that social media has devolved into the marketing opportunity and popularity contest that it is is today. I remember back when Twitter was just getting started. It was an amazing thing. Everyone involved seemed genuinely “tuned in” to the Web and tweets were more about fun and friendship than self-promotion and relentless egotism.

Social Media is already dead

Or at least, what it once was is no longer possible, thanks to marketers, salesmen, politicians, and other self-serving entities. When you’re sitting there telling your client that social media is going to help them sell more products or gain more popularity on the Web, you may be correct, but you’re missing the whole point of “social” media. We can’t even call it that these days, it’s more like “commercial” media. I stopped watching television many years ago after tiring of all the manipulative sleaziness. For awhile there, we enjoyed a Virtual Utopia here on the Web, sharing with each other via blogs and then more so with social media. It’s sad, to say the least that the sellouts have taken over, but fortunately there are many “microcosms” of online communities that still try to keep it real. If you are lucky enough to be included in a genuine community of inspired and passionate people, then congratulations. I would definitely focus my efforts in that area and work to keep the scene alive.

None of this is real

In a tangible sense, all of this digital stuff doesn’t exist. Basing your life on the Web is a complete and utter blast, but if the power ever goes out — sort-term or long-term — you’ve got nothing, baby. I shudder to think if something bad should happen, but if it does, it’s good to have something going out there in the “real world.” What could happen? Anything really. From natural disasters to wars to government-run blackouts to prohibitive regulation and even censorship. Hopefully nothing like this will happen, but it’s always good to have a backup plan in place just in case. This perspective may seem pessimistic, but it definitely helps to put everything into perspective. “You can’t take it with you,” as they say.

It’s impossible to know it all

The best we can hope for is a realization that we don’t know it all, and an understanding of how to find out what we need to know. This is why search will always trump categorization, tagging, and other organizational methods. There’s just too much information and it’s increasing much too fast to keep up with it in a useful way. For smaller subsystems, archiving is useful, but the Web itself is best navigated via search, not tags or bookmarks. Know what you’re after and go get it. I think that understanding how to search is the first and most important thing that anyone should know when working on the Web. From there, anything is possible. Without such ability, you’re relying on your own limited knowledge and confined to finding information the old fashioned way.

It is possible to be content with what you have

Why get hung up in the rat race? If you’re working online, you obviously have more than enough, so why the need to fight and sell your way to the top? There is no unwritten law that dictates the rapid pace of technological and software development. This may seem like a completely dumb thing to suggest, but can’t we just use the technology that we have rather than rush it forward just to keep up with itself? Seriously, way back in the day, I was completely happy with Windows 98SE, Photoshop 7, and my trusty copy of Winamp. Now, I have a copy of Adobe CS3 that I can’t even use because my operating system isn’t Windows Vista. That may be somewhat of a tongue-in-cheek example, but the question remains: how much time must the online community spend dealing with unending updates and upgrades? Fixing things and racing to keep up is a good way to take time away from more productive tasks, imho.

There is a lack of originality and personality on the Web

It’s more like some sort of weird hive-mind or something. It’s always possible to stir things up by disagreeing, but even dissenting opinions fail to express true thoughts and feelings. It’s easier to be yourself within small groups or with lower visibility, but as you begin to merge with the larger hive-mind and assume a more visible role, speaking freely requires more work, unless you enjoy getting flamed and hammered on the public stage. Many businesses and politicians bend over backwards to avoid saying what they really think, and then scramble and squirm after revealing something that goes against popular opinion. Yes I know, that’s just the way it is, and it’s always been that way, but understanding who you are and then actually representing that person online in an honest way is too difficult for most people.

Too much time spent farting around with stupid things

This is a double-edge sword: you are either so focused and goal-oriented that you miss out on all the cool things that everyone is doing, or else you’re so distracted with all the twittering, linking, and emailing that you never get anything accomplished. Sure most of us are somewhere in the middle or higher end of this spectrum, but finding that balance is an important part of being a “tuned-in” and relevant contributor in your field. I always marvel at people who spend all of their time twittering, for example. It would be interesting to hear why they do it and what they think they’re getting out of it. Many online activities are pretty much equivalent to flushing your time down the toilet.

So what’s the take home-message?

Not sure. I do know that it feels real good to get away from it all and take a few steps back. I may not have communicated effectively the different things I have been pondering, but overall it’s basically a sense of awe that all of this is possible mixed with a growing disdain for where it’s all possibly headed. There is still plenty of reason to abandon the more cynical concerns and just dive into what you’re doing with everything you’ve got, but there is always a better way of thinking about and doing things. It just takes a few moments to step back and see it all for what it really is.

Man, you’re just crazy

Perhaps, but it feels good to share these thoughts with you. Somehow therapeutic talking about this stuff. Not really any mind-blowing revelations here, but thinking about them in greater depth and while sort of detached from the usual workload chaos has proven refreshing. A more profound contemplation and understanding of what you’re doing helps to liberate from old ways of thinking and enables you to see and embrace new possibilities.

Or perhaps I am just talking rubbish?

Source: Perishable Press

Take your WordPress skills to the next level with Digging into WordPress!

Related articles

• Mind-Blowing Web-2.0 Design Trends
• Fully Valid, SEO-Friendly Social Media Links for WordPress
• New Online Vector Drawing Tool
• Digital Flower Maker
• minimalist Theme
• Riding the Wave
• Smooth Operators: Sharpen your Google Search Skills

Read more: http://perishablepress.com/press/2010/02/15/a-few-steps-back/

I mean, basically anything except for Internet Explorer, which is a debate in and of itself. Here I’m referring to old versions of good browsers, like Firefox 2, Safari 2, Opera 8, and so on. It seems that older versions of these browsers are not as common as older versions of IE, so should we bother supporting them when designing our websites?

Most agree that we shouldn’t support old versions of crappy browsers like IE, but what about older versions of good browsers like Firefox, Opera, and Safari?

Backwards Compatibility

One of the cool things about adhering to Web Standards during web development is that, theoretically at least, your designs should look similar on all standards-compliant browsers. This is one of the reasons why we exclude IE from the conversation — it doesn’t speak the language, and requires a whole realm of special support in and of itself. But even for modern browsers like Firefox and Safari, a standards-based design does not always translate to presentational fidelity in older versions. So how far back should we go? Obviously there’s no reason to go out of our way to support, say, Firefox 1, but what about more recent versions such as 2 or even 3.0?

Rendering Differences

For many modern browsers, the older the version, the more inconsistencies you’ll find. Older versions of Opera are notorious for borking an otherwise perfect design, and the further back you go, the more borked your design is going to get. And for anyone who does support older Opera, you know how frustrating it can be to target and filter specific versions with CSS. The same is generally true for other modern browsers: supporting older versions can get messy, costing endless amounts of time and energy. There’s no reason to have your designs look identical across browsers, but they should at least be usable. Right?

Browser Testing

If anything is keeping me from completely ignoring older browsers, it is the ease with which they can be tested. Again excluding everyone’s favorite, IE, installing multiple versions of modern browsers is a breeze. For example, on my machines, I am running the following browsers:

• Firefox 1, 2, 3, and 3.5
• Opera 6 through 10
• Safari 2, 3, and 4
• Chrome 2 and 3
• IE 5, 6, 7, and 8
• Camino 1 and 2
• Various Flocks

..as well as Lynx and a host of lesser browsers using the Webkit or Mozilla rendering engine. And even if you don’t install a million browsers locally, there are plenty of online services and software that make it possible to do cross-browser testing on virtually any browser with a few mouse clicks. But if it’s so easy to test all of these zillions of old browsers, does that mean we are obliged to do so?

Where do you draw the line between browser support and design expediency? At what point does market share mandate support for old browsers?

Market Share

When deciding how far back to go, market share is certainly an important factor to consider. With that bastard IE, most of us have no choice but to support older versions simply because so many losers are still using it. But for good browsers such as Opera and Safari, most users are quite savvy, understanding the game and always keeping their browsers updated with the latest and greatest. This is another reason to love modern browsers: they make the upgrade process a piece of cake — you don’t even need to think about it — it just happens. Thus, while we are still dealing with IE6 and lots of IE7 — even though IE8 is the current version — the percentage of Firefox 2, Opera 8, and Safari 2 users is very small.

Baseline Support

Given that it is important to maintain usability, presentation, and performance across older versions of modern browsers, where should the baseline be set? Is there some general rule of thumb that will help designers with an optimal support strategy? Perhaps something like this:

• One version back - complete compatibility and presentational fidelity
• Two versions back - design should be usable, but doesn’t need to look similar
• Three or more back - don’t sweat it — cost versus reward not in your favor

Personally, I try to support as many browsers as possible, but much of what I do depends on the particular project I am working on. Not every site needs to be checked on every browser, so I try to take into account the stats and projected client-usage data. It’s all about context, and varies on a case-by-case basis.

But support baselines can be useful. A Perishable Press reader recently described his support baseline as such:

• IE7+
• Opera 9+
• Safari 4+
• Firefox 3.5+

His thinking is that older browsers:

• Have security holes by nature, therefore isn’t it irresponsible to support them?
• Reduce the ability for the site to look good and is bad practice, even within an organization
• Give the website visitor a lower experience than they deserve and what they should expect
• Generally run slower and reduce the appearance of speed for your site

While I can’t agree with everything in this list, he does make some good points. And more importantly, this designer has taken the time to think it out for himself and reach his own conclusions, which I think is very important.

It’s the User, Stupid

Ultimately, it may be argued, that it’s all about the user. Sacrificing the user at the altar of design expediency benefits only in the short term. Eventually, those development shortcuts are going to catch up with you one way or another. So if design is all about the user, I guess we’re obliged to test for each and every possible scenario regardless of market share — test every browser on every platform on every machine in the world. Of course this is ludicrous, but it begs the question: where do you draw the line between browser support and design expediency? At what point does market share mandate support for old browsers?

Food for thought..

Source: Perishable Press

Take your WordPress skills to the next level with Digging into WordPress!

Related articles

• Perishable Press Quintessential Screenshot Gallery
• Really Simple Browser Detection with jQuery
• Perfect Rounded Corners with CSS
• Everything You Ever Wanted to Know about Favicons
• A Sincere Attempt to Switch from Firefox to Opera
• Keep it Dark: Hiding and Filtering CSS
• Standards-Compliance Throwdown: MS-IE5/6 DNS/404 Error-Page Redesign

Read more: http://perishablepress.com/press/2010/02/01/support-old-versions-good-browsers/

Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ways to track your pages with Google Analytics. The latest method uses asynchronous tracking to minimize negative impact on user experience. Let’s take a look at each of these three methods for tracking your web pages with Google Analytics..

Method 1: Old School – Tracking sites with urchin.js

Web-design veterans are well familiar with the original, old-school method of GATC inclusion via the urchin.js code:

<script type="text/javascript">
_uacct = "UA-XXXXX-X";
urchinTracker();
</script>

Ahh yes, those were the days.. This method worked great for years, and continues to work just fine to this very day. Although I personally would recommend using one of the newer methods of including the GATC, you may still use this old-school method by simply copying and pasting the code into the bottom of your web pages, preferably before the closing <body> element. And then don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID.

So that’s pretty boring — let’s check out something a little newer..

Method 2: New School – Tracking sites with ga.js

In late 2007 – after years of using the original urchin.js script – Google updated and improved the GATC and renamed the tracking file to “ga.js”. As of now, this new tracking code is the platform on which all new Google Analytics features are deployed.

Here are some of the benefits of using the new ga.js tracking script:

• Smaller file size
• Improved performance
• Object-oriented programming conventions
• Namespacing and improved readability
• Easy JavaScript integration

As with the old urchin.js-based method, using this new method requires inclusion of a small snippet of tracking code on your web pages. Depending on how you deliver your pages — over HTTP, SSL, or a combination of both — the code used to include the new Google Analytics tracking code will vary:

All web pages delivered via standard HTTP protocol

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._trackPageview();
</script>

All web pages delivered via secure HTTP (SSL)

<script src="https://ssl.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXX-X");
pageTracker._trackPageview();
</script>

Web pages delivered via combination of standard and secure protocols

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>

As you can see, each of these methods consists of two parts: the first references the ga.js tracking code and the second executes it. A couple of notes on proper/recommended usage of either of these methods:

• Do not combine different tracking scripts on the same page
• Inlcude the tracking code after before the closing <body> element at the bottom of your web pages
• Do not combine the ga.js method with the old urchin.js method
• Don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID

I think this is the GA-inclusion method that most bloggers and designers are using in their pages. But even so, there is yet another way of including the tracking code that improves the user-experience for your visitors..

Method 3: Asynchronous Tracking – Better tracking with ga.js

This newer method of GA tracking uses a slice of asynchronous JavaScript to optimize the way in which browsers load the ga.js tracking script. The asynchronous tracking method improves the user experience and allows inclusion of the tracking script closer to the beginning of the web page without delaying subsequent content from rendering. As you might suspect, the asynchronous tracking method requires a slightly more complex inclusion method:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>

This code represents the minimum configuration required to track a page asynchronously using Google Analytics. To take advantage of this method, you can use this tracking script on your pages by following the simple steps below. To go beyond the basics, check the official tracking reference and usage guide for information on the GA API and proper asynchronous syntax.

How to setup asynchronous analytics tracking on your site

1. Important: Remove any existing ga.js tracking code, if present ¹
2. Insert the asynchronous snippet before the closing </head> element after the opening <body> tag ²
3. Edit the “UA-XXXXX-X” string to match your specific web-property ID
4. Add any customizations using the GA API and asynchronous syntax

That’s all there is to getting asynchronous GA tracking setup on your site. Of course, there are a few important notes that you should keep in mind:

• If you experience content-loading issues, move the tracking code to the bottom of the page
• ¹ Asynchronous tracking is not available with the old urchin.js-based method.
• ² The optimal place for the tracking snippet is after the last <script> element in the <head> section Edit: “While it is customary to place JavaScript code in the <head> section, placing the asynchronous snippet there may trigger a parsing bug in Internet Explorer 6 and 7 on some pages. The easiest solution to this problem is to place it at the top of the <body> section.” – Google Analytics Asynchronous Tracking
• Do not use more than one tracking snippet on any given page — you’ll break stuff

Source: Perishable Press

Take your WordPress skills to the next level with Digging into WordPress!

Related articles

• Optimizing Google Analytics Performance
• Save Bandwidth by Serving jQuery, MooTools, Prototype via Google's AJAX Libraries API
• PHP and JavaScript Fallbacks for Your Public Feedburner Count
• JavaScript Notes Plus
• Google Analytics Invitation
• Optimize Convoluted Code via JavaScript
• One Link to Open Them All

Read more: http://perishablepress.com/press/2010/01/24/3-ways-track-google-analytics/