Boosting Your Site Traffic

If your shopping cart is scaring off sales, you might never know – unless you track what works and what doesn’t. Gary Marshall discovers how metrics can shed light on your site

She’s spotted a must-have product on your pages, and the credit card is poised. She clicks on the checkout button… and discovers that you want her entire life story before you’ll sell anything to her. “Sod that,” she says. “I’m off to take a look on Amazon”. Another customer lost.

When you run a web site, knowledge isn’t power: it’s money. Spotting problems at an early stage can stop visitors being scared off, while knowing who your visitors are, where they come from and what they’re doing can help boost your search engine rankings, improve the performance of adverts and alert you to possible problems such as bandwidth leeching and other unpleasant online activities. Best of all, you don’t need to spend a fortune to get that information – and in many cases, everything you need is free.

Going metric

Analysing site traffic is known as ‘metrics’, and there’s a huge range of metrics packages to choose from. The simplest form of metrics is a basic hit counter, which tells you how many times a page has been viewed. However, if you want information you can actually use then you’ll need something a bit more powerful.

Many hosting firms include metrics as part of their package, so for example if you host your site with 1&1 (www.oneandone.co.uk) you can see a range of statistics including the most popular pages, the browsers your visitors use and where in the world they come from. Even if your host doesn’t provide such packages it’s easy to get the same features online: Site Meter (www.sitemeter.com) and eXTReMe Tracking (www.extremetracking.com) both provide free stats packages that can provide an insight into what your visitors have been up to. In both cases you simply sign up for a free account and paste a bit of code into the HTML of the pages you want to track.

Both services are useful, but there are some limits to what the free accounts actually do. In the case of Site Meter you need to put a logo or counter on your page, which means anyone can click on it and see the stats; you’re also limited to viewing details of the last 100 visitors, which means the free account isn’t suitable for busier sites. It doesn’t track the search terms people use, either, so it won’t help you optimise your pages for better search engine performance, and you can’t see what sites referred people to your pages.

eXTReMe Tracking is more generous. It shows the search engines and search terms people are using to find your site, and it also provides information about your visitors’ locations. With both services you can pay a little extra for more detailed statistics, so for example if you spend $6.25 (about £4) per month with eXTReMe you get additional information such as detailed visitor analysis, which enables you to see how individual visitors arrived at your site, how long they spent there and what pages they looked at.

Before spending money on such services, though, it’s a good idea to look at some of the free options. In many cases you can get everything you need without paying a penny.

Help from your host

We’ve already mentioned that 1&1 provides a metrics package as part of its hosting plans, and you’ll find that rival firms such as Fasthosts do, too. While the specific packages differ from host to host, the products they use tend to cover the same basic information: where your visitors come from, which pages they’ve been looking at, what sites sent them to you and which bits of your site are the most popular. You can also see where they come from, although this data is rather simple: typically you’ll be able to see your visitors’ ISPs, but not the particular location they’re connecting from. For detailed geographical information you’ll need a more powerful analytics program such as a package from WebTrends, NedStat or Google. However, there’s another way to get data from your host: download the server logs and analyse them yourself.

Your web server keeps a log of traffic to and from your site, and you can download the log file to your computer to analyse it yourself. Two of the most popular log file analysers are Analog (www.analog.cx) and Webalizer (www.mrunix.net/webalizer), both of which are free (Webalizer is open source) and run on all the major operating systems. Once you’ve installed the software it’s just a matter of pointing it at the log you want to analyse and waiting a few seconds for the program to generate an HTML report that you can view in your browser. In both cases you can then see which URLs are referring people to your pages and what terms your visitors are using in search engines; if you use Webalizer, you can also see which pages are proving most popular, which pages your visitors tend to arrive at and which pages result in the most exits from your site. Exit data is particularly useful for ecommerce sites: if one of the top exit pages is a key component of your checkout system, it suggests that something is scaring people off between placing an item in the shopping basket and actually paying for it.

Advanced analysis

Being able to see where your visitors come from and what they do is useful for any site, but when your site is your business then you need to know even more. Typically, large sites need to monitor the performance of advertising, special offers or promotions, and to identify problems such as registration forms that scare off potential customers.

For large sites, firms such as WebTrends (www.webtrends.com) and NedStat (www.nedstat.co.uk) can track almost anything. WebTrends describes a few scenarios: “The business analyst… knows that customers who visit the site three to five times are twice as likely to buy as those who have visited once, and the customers who have visited more than ten times in the last week aren’t likely to buy at all – they’re almost always just looking.” Meanwhile the email marketer knows that 95 per cent of list recipients have yet to buy, the online marketer can see that the most popular paid keyword campaigns include phrases such as ‘cruises from Miami’ and the site designer can see that ‘a large number of people are leaving the conversion process on the page where they select airfare’.

Dedicated metrics suites are overkill for modest sites and could prove expensive. Prices start at a few hundred pounds, but metrics packages are typically priced according to traffic volumes – so the busier your site, the more expensive the metrics become. However, medium-sized sites can get similar functionality for free – if you can get an invite.

If your site serves up fewer than five million page views per month (or if you have an AdWords account) then you can get Google Analytics (analytics.google.com) for free. However, as with many Google services the Analytics service is only available to a select few, with invitations to join handed out on a first-come, first-served basis. As you’ll see from our tutorial below, Getting Started With Google Analytics, it’s worth the wait: with a bit of tweaking you can use it not just to track your traffic, but to monitor any clickable content. You can even set filters to exclude clicks from particular IP addresses (such as your office network) or to turn dynamic URLs into something more readable. There’s only one potential problem: the service relies on a short piece of JavaScript code, so you won’t be able to track users who browse with JavaScript disabled.

One of Google Analytics’ most powerful features is its Goal Analysis. A goal is a page you want visitors to end up at, such as your ‘thanks for downloading’ page or your ‘thanks for subscribing’ page. You can define up to four pages as goals in Google Analytics, and you can also define ‘funnel’ pages, which are the pages leading up to a goal. For example, to get to the ‘thanks for downloading page’ visitors might first visit the list of downloads, then the download instructions page. By defining the goal and the funnel process you can see whether any visitors are leaving midway through the process, which can highlight potential problems with particular pages. You can also see conversion rates for each goal, so for example, you’ll be able to see what percentage of visitors end up downloading your file or subscribing to your newsletter.

Whether you’re monitoring a few hundred visitors or hundreds of thousands, site metrics enable you to see what works on your site, what doesn’t, and where you should be concentrating your energies – whether that’s improving your search engine rankings, spotting problem pages, making your site stickier or just ensuring that you don’t exceed your hosting firm’s monthly data transfer limit. Every single visitor to your site is trying to tell you something, and metrics can make sure you receive their message loud and clear.

Add A Search Engine to your Site - Google

Rob Buckley shows you how to make your sitey the sharpest search engine of them all using Google’s Co-op technology. The secret behind it? Refinement and customisation

When you think of searching, more often than not, you think of Google. It has even become a verb, despite the best attempts of its legal department to prevent it – have you ‘Googled’ someone today? But it has become much more than just a web search engine. Because you can now embed it into your website, it’s also an easy way to add a search facility to your pages.

The ability to use Google as a site search engine has been around for a while now, and is reasonably common. As long as Google can access all the pages on your site and it updates its indexes as often as you update your pages, it’s a great, hassle-free and cheap tool to make your site’s content available to visitors, whether you’re using static pages or a Content Management System.

But recently, Google created a new version of its “embeddable” search engine. As well as being customisable so that it matches your site’s look and feel, Google’s Co-op custom search engine can be set to search a list of sites as well as your own, or it can search the whole web. You can also preload it with search terms so that it favours particular kinds of searches. If your site is about karate, for example, and someone searches for “belt”, the results of the search can favour karate belts, rather than those available from Marks & Spencer.

About the author:

Name: Rob Buckley
Site: www.the-word-is-not-enough.com
Areas of expertise: XHTML, PHP and MySQL
If I were a kitchen implement… I’d definitely be a whisk

Click here to download tutorial PDF

From Mess to CSS - by .net Magazine

The ubiquity of the web makes it easy to forget how young the art of web design is. It’s just a little over ten years since a ground breaking aspect of browser markup (the language of web design) was introduced by a privately funded version of Mosaic, which enabled web page authors to align site content using the CENTER tag.

From this humble beginning, it is almost incredible how sophisticated web design and page layout has become in such a relatively short time span. In 1996 typographer David Siegel, in a bid to emulate print design, instructed designers of the time to use tables to lay out pages, filling cells with content and stretching single pixel GIFs to achieve the desired white space of the ultimate killer site.

Yet within two years Siegel had published The web is dead and I killed it. He was alluding to the fact that although his designs relied on table layouts and HTML hacks like the single pixel GIF spacer, sites should never have been built this way. This issue, Steve Pashley shows you how to bring your site bang up to date by converting your old tables-based layout to CSS...

As increasing numbers of site builders are aware, using Cascading Style Sheets (CSS) is the preferred way to lay out pages and tables should only be kept for tabular information like calendars. Yet, while the web building community has largely been happy to adopt CSS to style elements and select fonts, some are still unwilling to let go of the tables layout of old.

The most common explanation for this is that CSS layout lacks an intuitiveness that using tables seems to offer - once you’ve sketched your page framework by deciding how many tables will go where, it’s simply a case of dropping content into the gaps. By contrast, linking to an external file, learning another language’s syntax and round-tripping between an HTML editor, CSS file and browser can seem, at best, convoluted and at worst technologically intimidating.

So why bother? Well, first of all, the main benefit of turning to CSS for page layout is that you can keep your content separate from your design. Accessing the web today entails more than simply using Internet Explorer or Firefox on a PC; phones and other handheld hardware jostle with printers and other peripherals for access to your content while screen readers make a nonsense of many table-based designs. Using a stylesheet for your design means you can select an appropriate design for whichever software or hardware combination is downloading your page.

Imagine how much time you can save when you want to change the colour scheme of your site if you only need to edit one file, rather than wading through the HTML on every one of your pages. Similarly when you’re building pages you can reuse a design by calling a CSS rule instead of recoding the layout or style again. And who hasn’t had to carefully deconstruct a page to determine where that closing td tag should be after seeing a design collapse in Mozilla? This coding leanness is reflected in download times and server hits. Not only will your pages contain less code but the eradication of tables and spacer images will mean that pages render more quickly with less files to be delivered.

Let’s go to work
What should become evident is that laying out your page with CSS is a lot simpler than many site builders currently believe. To demonstrate this we’ll take a familiar table layout and convert it to CSS in three steps:

• Firstly we’ll identify the key design areas of the page


• Then we’ll strip out all the unnecessary HTML


• Finally we’ll use CSS to control the design of the page

The goal with any design using CSS is to finish with mark-up that has a strong structure delivered in a sequential order (important for those using screen readers), which looks as close as possible to the original table layout.

Deconstructing the design
You’ll probably already be familiar with the building blocks of your own page design. If you aren’t then there will be some good indicators in your existing layout. If you’re using a master table to lay out your page then turn the borders on by setting the width value to five or more. Similarly if you’re using SSI (Server Side Includes) then you’ve probably already thought about how best to carve up your design.

If we look at the example shown in the image on the right then we can see that the main areas are the masthead, the navigation strip, the right-hand content area and a footer area. We’ll add some HTML comments to these areas so that we can easily distinguish between them later. Be sure to add further comments where these sections end as well.

Next we need to strip out all formatting HTML. Strip out all the tables, font tags and spacing hacks (i.e. line breaks and spacing GIFs) until only contextual tagging remains. This means titles in header tags and text in paragraphs, lists and hyperlinks. You should now be left with just content and comments.

Building it back up
To understand how to build CSS layouts we first need to understand the box model. For display purposes, this means that every element on the page is a rectangular content area surrounded by margins, borders and padding. We can then position these elements using the 'float’ property. Floating an element will move it to the right or left of a line according to which value you give to the property, and allow surrounding content to flow around it. We’ll use it to position our column chunks, namely navigation and content.

If you don’t want an element to wrap around floating objects then we can use the 'clear’ property, with values right, left or both. We can see how this works with our footer section.

We use div (division) containers for our table-replacement containers. These are called block level elements in CSS mark-up, meant for largish blocks of mark-up and effectively force a line break before and after content. We use the span tag for smaller bits of content as it is an inline element, which means it won’t disrupt layout.

The last thing to note before we begin building our layout is that without the correct document type declaration your page is unlikely to render correctly in most modern browsers. As we’re using XHTML we’ll use the following with a correct language declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang=“en” xml:lang=“en”>
To begin with replace opening and closing HTML comments with opening and closing div tags. Be sure to include identifying ID values as well. In our example we’ve now got the following code:
<div id=“header”></div>
<div id=“navigation”></div>
<div id=“content”></div>
<div id=“footer”></div>

A quick check of our page in a browser reveals that it’s looking a bit bare. Fear not, we’ve already made some progress in terms of accessibility. Notice that we have a good sequential order for our information, which is handy as this is the order in which a screen reader will relate information back to a user.

Let’s begin to add some style to our stylesheet. To make it more simple we’ll put the stylesheet in the head section of the HTML page, in this example. However, if you’re familiar with stylesheets then it’s much better to link to your stylesheet externally. By doing this, your site has its CSS in one location that is referenced by all your web pages. This reduces document weights and makes them quicker to download. We add the following to the head section:

<head>
<title>Layout Example</title>
<style type=“text/css”>
</style>
</head>

The area between the style tags is where we’ll add our CSS. We’ll give the page some basic style by adding font-size, font-family and colour properties to the body selector’s declaration block. Notice that the fontsize value, 'small’ is a relative one rather than something specific, such as 12pt, an important accessibility consideration. This allows users to adjust the size of the text in their browser if they wish. We’ll add the background image here - a tiny GIF image that browsers will tile vertically and horizontally to cover the screen. For the purpose of clarity, though, we’ll comment this rule out until we’ve finished the rest of the stylesheet.

body {
font-family: Verdana, Geneva, Arial,
Helvetica, sans-serif;
font-size: small;
color: #2f4f4f;
background-image: url(images/backer.gif);
margin: 0px;
padding: 0px;
}

Let’s look at the header section. The original uses an image to create a background and display the name of the web site but we’re going to make it more accessible. We’ll give the div header a background image, and in order for it to display fully we’ll need to give it the same height and width dimensions as the image. We’re going to add the white gutter around the heading graphic by creating a four-pixel-wide white border. Importantly this must be deducted from the overall width of the header div. As the width of our layout is 700 pixels we must subtract the eight pixels of the border to get a value of 692 pixels.

#header {
background-image: url(images/
header_blank.jpg);
width: 692px;
height: 60px;
border: 4px solid white;
}

Now, rather than have the site name displayed as part of the overall image, we’ll render it as text. We’ll place the site name in an h1 tag and declare a font size, font family and colour for the text. If you take a look at the stylesheet you’ll be able to see that the selector has been appended by the div id. This style will now only be applied to h1 tags used within a div that has an id of 'header’.

To position it in the same place as before we’ll move it from the top and left by adding padding-top and padding-left properties to the declaration block and specifying the appropriate values. The site name will now be visible to screen readers and anyone else that might view the page with the images turned off.

#header h1 {
color: white;
font-size: large;
font-family: Arial, Helvetica,
sans-serif;
margin-left: 34px;
margin-top: 14px;
}

Next we come to the navigation section. If we reference the HTML table design we are able to see that the navigation was included in a table cell, which was 216 pixels wide with cell padding of four pixels. We can replicate these measurements by giving the navigation div the same pixel width and a white border measuring four pixels to the left. Give the div a background colour.

#navigation {
width: 216px;
margin-left: 4px;
background-color: #c8d8e8;
float: left;
}

To style the links and position them within this blue box we’ll create a paragraph style specific for the navigation div, the same way we did with the h1 tag for the header. To position our links we’ll move the paragraph in from the left and the top by declaring those properties in our CSS rule and adding the appropriate values. The style of the text is achieved by adding font-size, font-weight and font-family properties.

#navigation p {
margin-top: 45px;
margin-left: 30px;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica,
Sans-serif;
width: 125px;
border: 1px solid #2f4f4f;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 20px;
}

The content area can be created in much the same way. We’ll create a rule that builds a blue background for the copy, 472 pixels wide with white four-pixel borders to the left and right. Let’s look at the page so far. Here we can see the default behaviour of consecutive divs; a vertical stack to the default left alignment.

Obviously this needs to change. To position the div we need to add the float property with the value left to the navigation div. This wraps the content to the left of the navigation. It also enables the content div to wrap below the navigation as well, which we don’t want. To remedy this and to create two columns we need to float the content div to the left.

#content {
width: 472px;
margin-left: 4px;
margin-right: 4px;
padding-bottom: 70px;
float: left;
}

If we look at the original table-based design for the page you can see that a nested table is used to create margins around the content, 20 pixels to the left and 30 to the right. Using CSS we can apply this to the text selectors directly. The content title is placed in an h2 tag while the content is wrapped in paragraph tags. We’ll create id specific tags for this content:

#content p {
padding-left: 20px;
padding-right: 30px;
}
#content h2 {
padding-top: 45px;
padding-left: 20px;
font-size: xlarge;
font-family: Arial, Helvetica,
sans-serif;
font-weight: normal;
}

The contact details were placed in their own table so that they could be wrapped by the content and to creating a border around the content. We’ll create it by nesting its div within the content and then floating it right. We apply spacing using margins and font properties as before.

blockquote {
width: 160px;
margin-left: 10px;
margin-right: 20px;
font-size: small;
font-family: Verdana, Arial,
Helvetica, Sans-serif;
font-weight: bold;
padding-bottom: 20px;
float: left;
}

The coloured border, which required the use of a table and all those GIFs can be achieved using one line of the declaration, then we can move the text away from it by creating padding.

Finally the footer section is created in much the same way as the header, with a four-pixel white border, and a width running across the two columns above. However, if we check in the browser we see something unexpected happening. The content div is continuing to wrap around subsequent elements. To stop this happening we use the clear property. Adding clear:both stops content wrapping on either side of the footer and returns content to its correct position of running across the entire layout.

We can now add text styles and colour as before. We can change some of the text to white by wrapping them in span tags.

#footer {
width: 692px;
border: 4px solid white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: x-small;
background-color: #a7c4d8;
clear: both;
}
#footer span {
font-weight: bold;
color: white;
}

Finally we add the background on to the body rule and that should be the design finished. But it’s clearly not; look how the navigation column is no longer extending as far down the page as the content div. This highlights one of the biggest drawbacks to CSS design in contrast to table-based design. Tables can move and stretch in response to each other, whereas CSS layout is largely static.
The way round this particular problem is to wrap the entire layout from header to footer in another div that will tile an image to give the appearance of our coloured columns.

#wrapper {
width: 700px;
background-image: url(images/
contentbg.gif);
background-repeat : repeat-y;
}

If we now make the navigation and content divs transparent by removing the background colours then we’ve got our columns of equal length. Of course it’s not an ideal solution, the correct way to progress is to stop designing as if for print and work to the strengths of CSS instead.

And so we’re done! Not only have we emulated our original design, give or take a few pixels, we’ve also slimmed down our file and improved accessibility. Our page mark-up is also clearer and easier to maintain. Experiment with the techniques in this article - practice will make CSS layout second nature, and be sure to check out the resources highlighted on these pages for further guidance and inspiration.