The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need — expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out — to improve JavaScript’s somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.

All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.

1. .parent() vs. .parents() vs. .closest()

All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.

parent(selector)

This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:

$('span#mySpan').parent().css('background', '#f90');
$('p').parent('div.large').css('background', '#f90');

The first line gives the parent of #mySpan. The second does the same for parents of all <p> tags, provided that the parent is a div and has the class large.

Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so it’s not unique to parent().

parents(selector)

This acts in much the same way as parent(), except that it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors. So, for example:

$('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs

This says that for each <li> that has the class nav, return all its parents/ancestors that are also <li>s. This could be useful in a multi-level navigation tree, like the following:

<ul id='nav'>
        <li>Link 1
                <ul>
                        <li>Sub link 1.1</li>
                        <li>Sub link 1.2</li>
                        <li>Sub link 1.3</li>
                </ul>
        <li>Link 2
                <ul>
                        <li>Sub link 2.1

                        <li>Sub link 2.2

                </ul>
        </li>
</ul>

Imagine we wanted to color every third-generation <li> in that tree orange. Simple:

$('#nav li').each(function() {
        if ($(this).parents('#nav li').length == 2)
                $(this).css('color', '#f90');
});

This translates like so: for every <li> found in #nav (hence our each() loop), whether it’s a direct child or not, see how many <li> parents/ancestors are above it within #nav. If the number is two, then this <li> must be on level three, in which case color.

closest(selector)

This is a bit of a well-kept secret, but very useful. It works like parents(), except that it returns only one parent/ancestor. In my experience, you’ll normally want to check for the existence of one particular element in an element’s ancestry, not a whole bunch of them, so I tend to use this more than parent(). Say we wanted to know whether an element was a descendent of another, however deep in the family tree:

if ($('#element1').closest('#element2').length == 1)
        alert("yes - #element1 is a descendent of #element2!");
else
        alert("No - #element1 is not a descendent of #element2");

Tip: you can simulate closest() by using parents() and limiting it to one returned element.

$($('#element1').parents('#element2').get(0)).css('background', '#f90');

One quirk about closest() is that traversal starts from the element(s) matched by the selector, not from its parent. This means that if the selector that passed inside closest() matches the element(s) it is running on, it will return itself. For example:

$('div#div2').closest('div').css('background', '#f90');

This will turn #div2 itself orange, because closest() is looking for a <div>, and the nearest <div> to #div2 is itself.

2. .position() vs. .offset()

These two are both concerned with reading the position of an element — namely the first element returned by the selector. They both return an object containing two properties, left and top, but they differ in what the returned position is relative to.

position() calculates positioning relative to the offset parent — or, in more understandable terms, the nearest parent or ancestor of this element that has position: relative. If no such parent or ancestor is found, the position is calculated relative to the document (i.e. the top-left corner of the viewport).

offset(), in contrast, always calculates positioning relative to the document, regardless of the position attribute of the element’s parents and ancestors.

Consider the following two <div>s:

Hello – I’m outerDiv. I have position: relative and left: 100px

Hi – I’m #innerDiv. I have position absolute, left: 50px and top: 80px.

Querying (no pun intended) the offset() and position() of #innerDiv will return different results.

var position = $('#innerDiv').position();
var offset = $('#innerDiv').offset();
alert("Position: left = "+position.left+", top = "+position.top+"\n"+
      "Offset: left = "+offset.left+" and top = "+offset.top
)

Try it yourself to see the results: click here.

3. .css(‘width’) and .css(‘height’) vs. .width() and .height()

These three, you won’t be shocked to learn, are concerned with calculating the dimensions of an element in pixels. They both return the offset dimensions, which are the genuine dimensions of the element no matter how stretched it is by its inner content.

They differ in the data types they return: css('width') and css('height') return dimensions as strings, with px appended to the end, while width() and height() return dimensions as integers.

There’s actually another little-known difference that concerns IE (quelle surprise!), and it’s why you should avoid the css('width') and css('height') route. It has to do with the fact that IE, when asked to read “computed” (i.e. not implicitly set) dimensions, unhelpfully returns auto. In jQuery core, width() and height() are based on the .offsetWidth and .offsetHeight properties resident in every element, which IE does read correctly.

But if you’re working on elements with dimensions implicitly set, you don’t need to worry about that. So, if you wanted to read the width of one element and set it on another element, you’d opt for css('width'), because setting dimensions, just like in CSS, requires specifying a unit of measurement.

But if you wanted to read an element’s width() with a view to performing a calculation on it, you’d be interested only in the figure; hence width() is better.

Note that each of these can simulate the other with the help of an extra line of JavaScript, like so:

var width = $('#someElement').width(); //returns integer
width = width+'px'; //now it's a string like css('width') returns
var width = $('#someElement').css('width'); //returns string
width = parseInt(width); //now it's an integer like width() returns

Lastly, width() and height() actually have another trick up their sleeves: they can return the dimensions of the window and document. If you try this using the css() method, you’ll get an error.

4. .click() (etc) vs. .bind() vs. .live() vs. .delegate

These are all concerned with binding events to elements. The differences lie in what elements they bind to and how much we can influence the event handler (or “callback”). If this sounds confusing, don’t worry. I’ll explain.

click() (etc)

It’s important to understand that bind() is the daddy of jQuery’s event-handling API. Most tutorials deal with events with simple-looking methods, such as click() and mouseover(), but behind the scenes these are just the lieutenants who report back to bind().

These lieutenants, or aliases, give you quick access to bind certain event types to the elements returned by the selector. They all take one argument: a callback function to be executed when the event fires. For example:

$('#table td ').click(function() {
        alert("The TD you clicked contains '"+$(this).text()+"'");
});

This simply says that whenever a <div> inside #table is clicked, alert its text content.

bind()

We can do the same thing with bind, like so:

$('#table td ').bind('click', function() {
        alert("The TD you clicked contains '"+$(this).text()+"'");
});

Note that this time, the event type is passed as the first argument to bind(), with the callback as the second argument. Why would you use bind() over the simpler alias functions?

Very often you wouldn’t. But bind() gives you more control over what happens in the event handler. It also allows you to bind more than one event at a time, by space-separating them as the first argument, like so:

$('#table td').bind('click contextmenu', function() {
        alert("The TD you clicked contains '"+$(this).text()+"'");
});

Now, our event fires whether we’ve clicked the <td> with the left or right button. I also mentioned that bind() gives you more control over the event handler. How does that work? It does it by passing three arguments rather than two, with argument two being a data object containing properties readable to the callback, like so:

$('#table td').bind('click contextmenu', {message: 'hello!'}, function(e) {
        alert(e.data.message);
});

As you can see, we’re passing into our callback a set of variables for it to have access to, in our case the variable message.

You might wonder why we would do this. Why not just specify any variables we want outside the callback and have our callback read those? The answer has to do with scope and closures. When asked to read a variable, JavaScript starts in the immediate scope and works outwards (this is a fundamentally different behavior to languages such as PHP). Consider the following:

var message = 'you left clicked a TD';
$('#table td').bind('click', function(e) {
        alert(message);
});
var message = 'you right clicked a TD';
$('#table td').bind('contextmenu', function(e) {
        alert(message);
});

No matter whether we click the <td> with the left or right mouse button, we will be told it was the right one. This is because the variable message is read by the alert() at the time of the event firing, not at the time the event was bound.

If we give each event its own “version” of message at the time of binding the events, we solve this problem.

$('#table td').bind('click', {message: 'You left clicked a TD'}, function(e) {
        alert(e.data.message);
});
$('#table td').bind('contextmenu', {message: 'You right clicked a TD'}, function(e) {
        alert(e.data.message);
});

Events bound with bind() and with the alias methods (.mouseover(), etc) are unbound with the unbind() method.

live()

This works almost exactly the same as bind() but with one crucial difference: events are bound both to current and future elements — that is, any elements that do not currently exist but which may be DOM-scripted after the document is loaded.

Side note: DOM-scripting entails creating and manipulating elements in JavaScript. Ever notice in your Facebook profile that when you “add another employer” a field magically appears? That’s DOM-scripting, and while I won’t get into it here, it looks broadly like this:

var newDiv = document.createElement('div');
newDiv.appendChild(document.createTextNode('hello, world!'));
$(newDiv).css({width: 100, height: 100, background: '#f90'});
document.body.appendChild(newDiv);

delegate()

Another shortfall of live() is that, unlike the vast majority of jQuery methods, it cannot be used in chaining. That is, it must be used directly on a selector, like so:

$('#myDiv a').live('mouseover', function() {
        alert('hello');
});

But not…

$('#myDiv').children('a').live('mouseover', function() {
        alert('hello');
});

… which will fail, as it will if you pass direct DOM elements, such as $(document.body).

delegate(), which was developed as part of jQuery 1.4.2, goes some way to solving this problem by accepting as its first argument a context within the selector. For example:

$('#myDiv').delegate('a', 'mouseover', function() {
        alert('hello');
});

Like live(), delegate() binds events both to current and future elements. Handlers are unbound via the undelegate() method.

Real-Life Example

For a real-life example, I want to stick with DOM-scripting, because this is an important part of any RIA (rich Internet application) built in JavaScript.

Let’s imagine a flight-booking application. The user is asked to supply the names of all passengers travelling. Entered passengers appear as new rows in a table, #passengersTable, with two columns: “Name” (containing a text field for the passenger) and “Delete” (containing a button to remove the passenger’s row).

To add a new passenger (i.e. row), the user clicks a button, #addPassenger:

$('#addPassenger').click(function() {
        var tr = document.createElement('tr');
        var td1 = document.createElement('td');
        var input = document.createElement('input');
        input.type = 'text';
        $(td1).append(input);
        var td2 = document.createElement('td');
        var button = document.createElement('button');
        button.type = 'button';
        $(button).text('delete');
        $(td2).append(button);
        $(tr).append(td1);
        $(tr).append(td2);
        $('#passengersTable tbody').append(tr);
});

Notice that the event is applied to #addPassenger with click(), not live('click'), because we know this button will exist from the beginning.

What about the event code for the “Delete” buttons to delete a passenger?

$('#passengersTable td button').live('click', function() {
        if (confirm("Are you sure you want to delete this passenger?"))
        $(this).closest('tr').remove();
});

Here, we apply the event with live() because the element to which it is being bound (i.e. the button) did not exist at runtime; it was DOM-scripted later in the code to add a passenger.

Handlers bound with live() are unbound with the die() method.

The convenience of live() comes at a price: one of its drawbacks is that you cannot pass an object of multiple event handlers to it. Only one handler.

5. .children() vs. .find()

Remember how the differences between parent(), parents() and closest() really boiled down to a question of reach? So it is here.

children()

This returns the immediate children of an element or elements returned by a selector. As with most jQuery DOM-traversal methods, it is optionally filtered with a selector. So, if we wanted to turn all <td>s in a table that contained the word “dog” orange, we could use this:

$('#table tr').children('td:contains(dog)').css('background', '#f90');

find()

This works very similar to children(), only it looks at both children and more distant descendants. It is also often a safer bet than children().

Say it’s your last day on a project. You need to write some code to hide all <tr>s that have the class hideMe. But some developers omit <tbody> from their table mark-up, so we need to cover all bases for the future. It would be risky to target the <tr>s like this…

$('#table tbody tr.hideMe').hide();

… because that would fail if there’s no <tbody>. Instead, we use find():

$('#table').find('tr.hideMe').hide();

This says that wherever you find a <tr> in #table with .hideMe, of whatever descendancy, hide it.

6. .not() vs. !.is() vs. :not()

As you’d expect from functions named “not” and “is,” these are opposites. But there’s more to it than that, and these two are not really equivalents.

.not()

not() returns elements that do not match its selector. For example:

$('p').not('.someclass').css('color', '#f90');

That turns all paragraphs that do not have the class someclass orange.

.is()

If, on the other hand, you want to target paragraphs that do have the class someclass, you could be forgiven for thinking that this would do it:

$('p').is('.someclass').css('color', '#f90');

In fact, this would cause an error, because is() does not return elements: it returns a boolean. It’s a testing function to see whether any of the chain elements match the selector.

So when is is useful? Well, it’s useful for querying elements about their properties. See the real-life example below.

:not()

:not() is the pseudo-selector equivalent of the method .not() It performs the same job; the only difference, as with all pseudo-selectors, is that you can use it in the middle of a selector string, and jQuery’s string parser will pick it up and act on it. The following example is equivalent to our .not() example above:

$('p:not(.someclass)').css('color', '#f90');

Real-Life Example

As we’ve seen, .is() is used to test, not filter, elements. Imagine we had the following sign-up form. Required fields have the class required.

<form id='myform' method='post' action='somewhere.htm'>
        <label>Forename *
        <input type='text' class='required' />
        <br />
        <label>Surname *
        <input type='text' class='required' />
        <br />
        <label>Phone number
        <input type='text' />
        <br />
        <label>Desired username *
        <input type='text' class='required' />
        <br />
        <input type='submit' value='GO' />
</form>

When submitted, our script should check that no required fields were left blank. If they were, the user should be notified and the submission halted.

$('#myform').submit(function() {
        if ($(this).find('input').is('.required[value=]')) {
                alert('Required fields were left blank! Please correct.');
                return false; //cancel submit event
        }
});

Here we’re not interested in returning elements to manipulate them, but rather just in querying their existence. Our is() part of the chain merely checks for the existence of fields within #myform that match its selector. It returns true if it finds any, which means required fields were left blank.

7. .filter() vs. .each()

These two are concerned with iteratively visiting each element returned by a selector and doing something to it.

.each()

each() loops over the elements, but it can be used in two ways. The first and most common involves passing a callback function as its only argument, which is also used to act on each element in succession. For example:

$('p').each(function() {
        alert($(this).text());
});

This visits every <p> in our document and alerts out its contents.

But each() is more than just a method for running on selectors: it can also be used to handle arrays and array-like objects. If you know PHP, think foreach(). It can do this either as a method or as a core function of jQuery. For example…

var myarray = ['one', 'two'];
$.each(myarray, function(key, val) {
        alert('The value at key '+key+' is '+val);
});

… is the same as:

var myarray = ['one', 'two'];
$(myarray).each(function(key, val) {
        alert('The value at key '+key+' is '+val);
});

That is, for each element in myarray, in our callback function its key and value will be available to read via the key and val variables, respectively.

One of the great things about this is that you can also iterate over objects — but only in the first way (i.e. $.each).

jQuery is known as a DOM-manipulation and effects framework, quite different in focus from other frameworks such as MooTools, but each() is an example of its occasional foray into extending JavaScript’s native API.

.filter()

filter(), like each(), visits each element in the chain, but this time to remove it from the chain if it doesn’t pass a certain test.

The most common application of filter() is to pass it a selector string, just like you would specify at the start of a chain. So, the following are equivalents:

$('p.someClass').css('color', '#f90');
$('p').filter('.someclass').css('color', '#f90');

In which case, why would you use the second example? The answer is, sometimes you want to affect element sets that you cannot (or don’t want to) change. For example:

var elements = $('#someElement div ul li a');
//hundreds of lines later...
elements.filter('.someclass').css('color', '#f90');

elements was set long ago, so we cannot — indeed may not wish to — change the elements that return, but we might later want to filter them.

filter() really comes into its own, though, when you pass it a filter function to which each element in the chain in turn is passed. Whether the function returns true or false determines whether the element stays in the chain. For example:

$('p').filter(function() {
        return $(this).text().indexOf('hello') != -1;
}).css('color', '#f90')

Here, for each <p> found in the document, if it contains the string hello, turn it orange. Otherwise, don’t affect it.

We saw above how is(), despite its name, was not the equivalent of not(), as you might expect. Rather, use filter() as the positive equivalent of not().

Note also that unlike each(), filter() cannot be used on arrays and objects.

Real-Life Example

You might be looking at the example above, where we turned <p>s starting with hello orange, and thinking, “But we could do that more simply.” You’d be right:

$('p:contains(hello)').css('color', '#f90')

For such a simple condition (i.e. contains hello), that’s fine. But filter() is all about letting us perform more complex or long-winded evaluations before deciding whether an element can stay in our chain.

Imagine we had a table of CD products with four columns: artist, title, genre and price. Using some controls at the top of the page, the user stipulates that they do not want to see products for which the genre is “Country” or the price is above $10. These are two filter conditions, so we need a filter function:

$('#productsTable tbody tr').filter(function() {
        var genre = $(this).children('td:nth-child(3)').text();
        var price = $(this).children('td:last').text().replace(/[^\d\.]+/g, '');
        return genre.toLowerCase() == 'country' || parseInt(price) >= 10;
}).hide();

So, for each <tr> inside the table, we evaluate columns 3 and 4 (genre and price), respectively. We know the table has four columns, so we can target column 4 with the :last pseudo-selector. For each product looked at, we assign the genre and price to their own variables, just to keep things tidy.

For the price, we replace any characters that might prevent us from using the value for mathematical calculation. If the column contained the value $14.99 and we tried to compute that by seeing whether it matched our condition of being below $10, we would be told that it’s not a number, because it contains the $ sign. Hence we strip away everything that is not number or dot.

Lastly, we return true (meaning the row will be hidden) if either of our conditions are met (i.e. the genre is country or the price is $10 or more).

filter()

8. .merge() vs. .extend()

Let’s finish with a foray into more advanced JavaScript and jQuery. We’ve looked at positioning, DOM manipulation and other common issues, but jQuery also provides some utilities for dealing with the native parts of JavaScript. This is not its main focus, mind you; libraries such as MooTools exist for this purpose.

.merge()

merge() allows you to merge the contents of two arrays into the first array. This entails permanent change for the first array. It does not make a new array; values from the second array are appended to the first:

var arr1 = ['one', 'two'];
var arr2 = ['three', 'four'];
$.merge(arr1, arr2);

After this code runs, the arr1 will contain four elements, namely one, two, three, four. arr2 is unchanged. (If you’re familiar with PHP, this function is equivalent to array_merge().)

.extend()

extend() does a similar thing, but for objects:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(obj1, obj2);

extend() has a little more power to it. For one thing, you can merge more than two objects — you can pass as many as you like. For another, it can merge recursively. That is, if properties of objects are themselves objects, you can ensure that they are merged, too. To do this, pass true as the first argument:

var obj1 = {one: 'un', two: 'deux'}
var obj2 = {three: 'trois', four: 'quatre'}
$.extend(true, obj1, obj2);

Covering everything about the behaviour of JavaScript objects (and how merge interacts with them) is beyond the scope of this article, but you can read more here.

The difference between merge() and extend() in jQuery is not the same as it is in MooTools. One is used to amend an existing object, the other creates a new copy.

There You Have It

We’ve seen some similarities, but more often than not intricate (and occasionally major) differences. jQuery is not a language, but it deserves to be learned as one, and by learning it you will make better decisions about what methods to use in what situation.

While there are strict rules these days for writing semantic and SEO-compliant mark-up, JavaScript is still very much the playground of the developer. No one will demand that you use click() instead of bind(), but that’s not to say one isn’t a better choice than the other. It’s all about the situation.

Browser Comparison – Google Chrome v6 depends on all

other browser producers had no sleep This is to the following browsers compared with various benchmark tests show. Winner of this little comparison, all still in development browser, is the developer version of Google Chrome version 6. This marked, in all the tests that were run through 5 times and each of them then the average value was calculated, the partial distance with the best results.

 

Browser Comparison 06/2010
Browser / Test	SunSpider benchmark	Peacekeeper Benchmark	Google’s V8 Benchmark v5
Chrome 6.0.477.0 dev	460.0ms	6508 Points	4016 Points
Opera 10.60 RC1	471.2ms	6116 Points	3472 Points
Safari 5.0 Nightly Build	492.4ms	4108 Points	2712 Points
IE 9 v.3	612.5ms	2218 Points	1937 Points
Firefox 4.0b1	863.6ms	3050 Points	829 Points

To illustrate the positive development of each browser based on the values obtained here, in the following, the same comparison of early March this year.

Browser Comparison 03/2010
Browser / Test	SunSpider benchmark	Peacekeeper Benchmark	Google’s V8 Benchmark v5
Chrome 4.0.249.78	622.0ms	3466 Points	3279 Points
Opera 10:50 RC3	543.8ms	3125 Points	2748 Points
Safari 4.0	1193.2ms	2891 Points	1419 Points
Firefox 3.6	1163.2ms	2277 Points	394 Points
IE8	46528.2ms	680 Points	80.9 Points

Test the latest browser versions – Download!

Who should have one of you according to these results of interest to also take a look at this part, want to take only two to three days old versions, this is by using the following download links.

· Chrome 6.0.477.0 (Developer Version)

· Opera 10.60 (RC1)

· 5 Safari (Webkit Nightly Build)

· Firefox 4.0 b1 (FTP download)

· Internet Explorer 9 (Platform Preview Version 3)

Conclusion: Although the third preview version of Internet Explorer 9 still in a development phase is always mediated, that regardless of their functional limitations a more positive impression of what might await us in the future. Also positive in the browser versions tested here is the speed of Opera 10.60 RC1. However, the values of the 6 version of the Google Chrome made with, it is likely the Google browser is increasingly easier in the browser market, its claim to rank three or even expand it can be. Unfortunately, it would not be surprised if it also costs of Firefox would do on this, its values really are not outstanding. But each of these statistics is worthless if a new version of the Light of the world beckon.

Browser News – The last few weeks in terms of browser updates, some new, still in development, well-known browser brought to light music. Whether the third of the Internet Explorer Platform Preview 9, the first Release Candidate of the Opera 10.60 or a development version of the Google Chrome browser in version 6 All browser manufacturers praise of course in addition to the implementation of new standards like HTML5 and CSS3, or at least the improved support of this, especially the fast-charging behaviour, due to new or improved rendering engines. One thing is for sure without an optimization in this area is a further merging of Web and PC applications, hard to implement.

There is a lot of discussion on the web about how to get into the highest ranks in the search engines. Link building, using the right keywords, all of that. But there is more to SEO than you might realize. At the end of the day, if you’re content isn’t up to scratch, then all the links in the world won’t help you. Or at least, even if you do get into the Highest ranks, you are not going to stay there long. So with that in mind, here’s my very simple guide to get in the results, climbing up them, and staying at the top.

A few things you probably didn’t know about how search engine rankings work. Search engines are pretty clever now a days, but they still aren’t humans, they don’t really “know” how good or well written your content is. Only humans can decide that.

What the search engines are very good at though, is tracking user behaviour and deducing how good your site is. Nobody can be totally sure how the search engines work (out side of the select few who work there), but it is a given that anything a visitor does that a search engine can track, will be taken as a factor.

I like to think of search engine ranking in three stages.

• Step 1: The search engine needs to figure out what your site is about.
• Step 2: The search engine needs some indication that your site is half decent.
• Step3: Once listed, the search engine will see how its visitors react to your site and refine its listings…

This is a very simplistic view of course, but I find it is a helpful way to think about each of the steps I take in my SEO efforts.

Here are how the main elements of your site might fit into this analogy:

• Content: Believe it or not, search engines do still actually look at the content of your site. They use this content primarily to figure out what your site is about. They can’t tell how good the site is by reading it of course, they’re not that clever (yet), but it helps them get a feel for the subject of your site.
• Links: Everyone knows that links matter. Google fist figured out that if a lot of sites link to your site then it must be reasonably good. Now they are more sophisticated though, quality matters. Links from some sites mean virtually nothing, links from other sites mean an awful lot. Some times a site with 10 links coming in might out rank a site with 1000 links coming in. As a rule though, the best links are the ones you can’t buy, you can’t ask for, and you might not even know you have. When individuals decide your site is good enough that they want to link to you without even being asked, that is a really strong signal to the search engines that your content is quality.
• Click through rate: By using programs such as Analytics you can track visitors on your website can’t you? So it seems reasonable to assume that a search engine will track users on its results pages. If you do a search on Google, it will record that query, show you some results and record which result(s) you click on. If a site is coming up second place and people click on that page much more often than they click on the page in first place… Do you think the search engine might want to alter the rankings a little? I do.
• Bounce rate: Another factor that not many people think of. What if you do a search, click on a result and find its not what you expected? You then go back to your search results and click another link don’t you? The search engines will notice that too, that’s a pretty strong indication that the first site was not that helpful after all… So yeh, your bounce rate matters a lot more than you might have thought.
• Summary: There are allegedly hundreds of different criteria that the search engines use, all of them are considered to a varying degree, and this list certainly doesn’t cover everything. But you can certainly see how the factors above are very strong indicators, so it seems likely that they play a big role in deciding your search engine success.

Here are a few other factors that play a small role in deciding your rankings.Just remember not to get bogged down in the minutae. How your visitors react to your site is always top priority.

• Meta tags: These don’t take much effort, you may as well include them.
• Link text: This is the text used in links to and from your site.
• Sites you link to: Don’t endorse (link to) poor quality sites.
• Updates: Update your site regularly, keep it active.
• Speed: Doesn’t need to be very fast, just don’t let it be too slow.

Offline Promotions

1. Always put your URL on letterhead, business cards and in e-mail signatures–wherever potential visitors are likely to see it.

2. If your employees wear uniforms, put your URL on them so every one of your customers sees a walking advertisement of your website.

3. Include your URL on all promotional items you give away–coffee mugs, T-shirts, key chains and so on. A daily reminder is a good way to get people to visit your site.

4. Be sure to include your web address in all press releases you send out to members of the media. By having it at their fingertips, they may be more likely to include it in articles they write about your company.

5. Don’t forget to put your web address in your Yellow Pages ad. That’s one place people see it every day.

6. Do you own any company vehicles? Be sure to put your URL on the side of any car or truck that’s out there delivering your products.

7. In addition to listing your toll-free number, put your web address on the bottom of every page of your catalogue so customers have easy access to your online store.

Online Promotions

8. Process so you can get the best exposure possible.

9. If you’re still itching for more exposure, you can explore search engine marketing, wherein you pay to have a text ad appear when visitors search for certain keywords.

10. Launch a sweepstakes that offers anyone who registers on your site or subscribes to e-newsletters within a certain time frame the chance to win a free gift.

11. Send out a weekly newsletter to registered site members that offer tips and news related to your company or industry with links back to your site.

12. Offer content to other sites. It’s a win-win situation: The other site gets free articles to beef up their offerings and you get a link back to your site and the cachet of being an expert.

13. Send a well-planned, customer-focused promotion to a targeted list of potential visitors and offer a credit toward the purchase of anything from your site. Spend time on your e-mail’s look and content: You want to offer value to customers and not have it appear to be spam.

14. Create your own exchange by asking sites complementary to yours (but that don’t compete) to put your link on their pages and you’ll do likewise.

15. Hook up with web affiliates–hundreds of sites that all link their traffic to yours–and get visitors from sites with related content.

16. Get active in online discussion groups and chats and always include your URL in your signature. (Don’t do any hard selling, though. Most groups frown on such behaviour and will think you’re spamming the group.)

17. Any time someone orders a product from your site, include a catalogue with their order to get them coming back for more.

18. Inspire your visitors to spread the word for you with viral marketing techniques, from the aforementioned newsgroup participation to including an "e-mail this link" on every page of your site.

19. Not sure what your customers want? Try creating an survey to get their crucial opinions on how well your site is selling to them.

20. When creating your own ads, make sure you understand who you’re targeting, the goal of your campaign, and how to creatively use the ad confines to get viewers to click on your ad, not away from it.

21. Use other selling venues like online classified advertising or online auction sites to increase exposure to your site and products.