Web page template with Ajax

In modern web page design, we usually use some kind template system to make all pages to have the same layout and/or menu structure.  The most common way is to use PHP or some kind of server-side script to format your pages.  This is great if you have server-side scripting capability.  For site without server-side scripting capability, Ajax may be used.  The common way to use Ajax is to have template as the main page and use Ajax to load different page content in the web site.   This is good except that it posts problem for the search engine to index the content of your site.  Also, browser without Javascript enabled will not be able to view your site.  My solution for this is simple.

I also use Ajax for my web site, but I use it in a reversed way.   In stead of a template that loads its content, each page will have a very simple layout elements.  The page will load the template and let jQuery and the template dress up the page.  In this way, if the browser don’t have Javascript enabled, it can still access and display the webpages with a very simple layout.   In this case, the main content of the page can be indexed by search engines.

On the other hand, if it is a Javascript enabled browser, jQuery with Ajax will dress up the page in a completely different and more beautiful way.

A webpage may look like the following:

<html>
<head>
  <script src='jquery.js'></script>
  <script src='myscript.js'></script>
</head>
<body>
  <div id='heading'></div>
  <div id='sidebar'></div>
  <div id='maincontent'>
    <h1>Main Content Goes Here</h1>
    ba ba ba ba ...
  </div>
  <div id='footer'><a href='sidemap.html'>SideMap</a></div>
</body>
</html>

Basically every page will only differ by the content in “maincontent” section (div). The sidemap.html will simply be a collection of pages that will be shown in the navigation menu of the dress-up very of your site. sidemap.html ensure that the search engine can access to all those top-level pages that are not linked to from some other pages in the side.

A disadvantage for this approach is if your network connection is slow, you may see the webpage in its naked form for a short while before the dressed up form appears.  This may not be an issue if you have fast network connection and/or your dressing template has small file size.  I would say that in more of the case, you would not see the naked form of the page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s