NovelProjects

Wednesday, January 7, 2009

NovelProjects.com and AJAX loading

I've had a few people ask me how I built the NovelProjects site using AJAX, yet still kept the SEO practices in tact. The answer is that I built the site first as if there was no AJAX, which means a tags with href's and titles. Basically, the whole 9 yards of basic SEO coding standards. Here's an example of what our nav started looking like:



<ul id="nav">
<li><a href="/" id="home" title="Home"></a></li>
<li><a href="/about/" id="about" title="About Us"></a></li>
<li><a href="/contact/" id="contact" title="Contact Us"></a></li>
<li><a href="/work/" id="work" title="Our Work"></a></li>
<li><a href="/news/" id="news" title="Latest News"></a></li>
<li><a href="/blog/" id="blog" title="Team Blog"></a></li>
</ul>


That should take care of the SEO side of things, now I added the attributes that I would use for my AJAX loading. This is the final HTML that I ended up with:



<ul id="nav">
<li><a href="/" id="home" class="npload on" load="/index.aspx" title="Home" preview="load Home"></a></li>
<li><a href="/about/" id="about" class="npload" load="/about/" title="About Us" preview="load About Us"></a></li>
<li><a href="/contact/" id="contact" class="npload" load="/contact/#contentonly" title="Contact Us" preview="load Contact Us"></a></li>
<li><a href="/work/" id="work" class="npload" load="/work/" title="Our Work" preview="load Our Work"></a></li>
<li><a href="/news/" id="news" class="npload" load="/news/" title="Latest News" preview="load Latest News"></a></li>
<li><a href="/blog/" id="blog" class="npload" load="/blog/" title="Team Blog" preview="load Team Blog"></a></li>
</ul>


At this point I added a class onto any elements that I wanted to trigger AJAX loading by giving it the class of "npload". Using jQuery, once the document is ready, I then removed the attributes of href and title for any element with the class "npload". This would remove the redirect functionality of my a tags (which would be replaced with AJAX loading). I then used the custom attribute named "load" to tell me which document to load. At this point, it was just an AJAX "GET" call, along with some fancy animations to move the pages in and out of the screen.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.