In the earliest days of web design, there was no such thing as “dynamic content.” What you saw is what you got. This period, however, did not last long as developers learned to use javascript to insert content into the page whenever a user clicked on a link or performed some other action. Even though it may have been encoded in javascript, however, the content was still somewhere in the source code, and therefore still had to be loaded at the time the page was accessed.
The discovery of AJAX took things a step further. By combining javascript with “server side scripting,” AJAX gives you the ability to insert content into your page based upon changing variables and requests. You can use AJAX, for example, to retrieve information from your database and display it on the screen without reloading the page.
What does all of this mean?
Let us take a step back for a moment and put this into context for those who may not have programming experience, because the lesson here is relevant for anyone who wants the utmost performance from their website. A concrete example should serve to illustrate the point.
Let us suppose you wanted to put the entire contents of the Encyclopedia Britannica on your website, but you do not want to the user to have to go to different pages. Simple enough, right? You just sit down at your computer one evening and transcribe all the volumes A-Z into a single webpage and give it the address www.yourwebsite.com/encyclopedia.htm.
What do you think is going to happen when someone tries to access this page? Well, the best case scenario is that the vistor would see a blank screen for several hours while all of the content was being loaded. Finally, if the connection was not lost, they would see the encyclopedia contents appear. The content would go so far down the page that the visitor could scroll down all day and not see the end of it. Not a very efficient way of doing things.
Now, throw javascript into the equation. You would now have the option of dividing the encyclopedia into many pages that the user could page through by clicking buttons or entering numbers into a form field. However, with this approach the page will still take the same amount of time to load. The scroll issue would be resolved, but not the load time.
Using AJAX in this example, instead of loading the encyclopedia into a web page you would load it into your database instead. Then using javascript and backend “scripting,” you could load the content as it is needed without ever reloading the page. The first time the user accessed encyclopedia.htm, the first page on the encyclopedia would appear almost instantly. Then, as they pressed a button paging forward, the content would change without ever reloading the page. It would appear to be lightning fast. However, if the user ever chose to look at the source code, the first page is still all that would appear.
This is of course an extreme, and rather silly example, but hopefully it helps explain the difference between static content, and content generated by javascript and AJAX.
So what’s the dilemma?
In the above example, it would seem that the most obvious choice is the use of AJAX. Fast load time, lighting fast changing content, what could be better? Here’s the problem:
If you chose to display page 1 of volume A when the visitor accesses the page, that is all that would appear in the source code as well. In other words, that is all the search engines would see. This is a major drawback. If someone were to search for “zoology” in Google, they would never find the zoology entry in your encyclopedia page because as far as any search engine can tell, it is not there.
In some cases, that is a problem. In others, it is exactly what you want.
Another, more real life example may help. Suppose you have a website that sells electronic equipment online. As a comprehensive dealer, you have over 200 categories on your website, which product offerings ranging from car stereos, to TVs and computers. Now it would be nice if the visitor could find any other category on your website from any page. However, it is not practical to load all 200 categories onto every page, both from a user experience and a search engine standpoint.
From the user point of view, the pages would take forever to load. From a search engine standpoint, the “relevancy” of every page would be diluted considerably. With every page pointing to 200 other pages or more, Google would not be able to tell much difference between a page that is about TVs and a page that is about computers. The use of AJAX would be a good approach to this problem.
Sometimes, however, you want the content in your page. If you have a page about TVs, for example, and have 15 other categories about TVs, you would want those links to be in the source code in order to help search engines determine what your page is about. However, due to space requirements, you might have a need to compress the display of that content.
A Working Example
With appropriate use of javascript and AJAX it is possible to strike a perfect balance between content that appears in the source code, and content that is loaded dynamically. Best of all, the appearance of the two approaches will be indistinguishable to your visitors.
The following are two collapsable/expandable trees. The first uses javascript, the second uses AJAX. The source code follows each example to make the distinction clear.
Example 1: Javascript
Code:
<ul>
<li>Category 1
<ul>
<li>Element 1</li>
</ul>
</li>
<li>Category 2
<ul>
<li>Element 2</li>
</ul>
</li>
</ul>
Example 2: AJAX
Code:
<ul>
<li>Category 1</li>
<li>Category 2</li>
</ul>
You can see that although the behavior of these two lists is exactly the same, what appears in the source code is quite different. Namely, the sublists in the AJAX example do not actually appear in the source code. They are loaded dynamically at the precise moment you click the plus sign to “open” the list.
It is possible to blend these two approaches such that part of your list is loaded when the page is first accessed, while the rest is loaded only as the user requests it. For example, if you had a tree that went five levels deep, you could load the first two levels and load the rest as it is needed. This will keep your code clean and the relevancy of your page intact, while still allowing for ultimate mobility on the user end side.
Informationarchitech is glad to offer assistance to businesses and individuals who wish to integrate dynamic content using javascript and AJAX on the navigational elements of their website. Contact us for a free consultation.
Save to del.icio.us
Follow me on Twitter
