French Travel Connection Breadcrumb JavaScript Overhaul

  • Creative Fields
  • Web

This is a case in which I combined a long list of problems into one simple and effective solution written in JavaScript

French Travel Connection's website as of 2011 had a lot of problems, some of which I was able to solve, and some of which still exists as of 2012 September -- since it was out of my authority to remedy. Here is one specific case which I helped to make a big improvement.

Problems:

1. The site was based off a custom made CMS that did not have back-end server access, meaning that it was virtually impossible to have a native database for the website. 2. The website also had an inconsistent, messy and non-SEO friendly permalink structure, with each page being put on the root directory of the website, such as frenchtravel.com/CrewedCanalBarges_BurgundyAndProvence.aspx. 3. Each landing page of a category also had a tedious tabbed design that made it so that the viewing would be slow. For eg, you can't skip ahead to the content you want to view via a dropdown menu like you can now, and selecting a link from the category list would mean you had to go back to the category tab. 4. The breadcrumbs, while they were being automatically generated, would only reference the page name, so it would look like this: "Home > CrewedCanalBarges_BurgundyAndProvence" which was obviously a mess.
do you have a headache now? It's okay, I sympathise!

The Solution

... to all these problems at once was a dynamically generated breadcrumb coded in JavaScript -- which I have never seen being used before but only seemed logical at the time. To approach this: 1. I conceptualised, drew and documented the whole solution carefully and liaised with the manager to improve on the solution. 2. I had to manually restructure the whole website's permalinks, effectively categorizing it and making it SEO friendly (though the CMS did not support dashes, I had to use underscores). Such as changing the previously mentioned example to something like: frenchtravel.com.au/cruising/river_cruises/our_selection/burgundy_and_provence.aspx 3. I designed and xhtml/css coded the breadcrumbs to have a modern yet consistent look and feel to the website. 4. I wrote about 2000 lines of JavaScript code on my own to create a virtual database (since back-end server access was restricted), and to automatically generate the breadcrumb based on the URL of the website. Also I documented my code and made it easily modifiable with a list of variables at the top of the code. 5. Since the slow tabbed design is gone, all the landing pages had to be redesigned. (as seen in screenshot 1 & 2) 6. The "Our Selection" List pages as seen in the last screenshot are now also automatically generated and easy to update in the JavaScript code, in-sync with the Our Selection dropdown of the breadcrumb -- this saves a lot of time and effort in terms of maintaining the website... everyone loves Auto generated pages, right? link to live version

The Result:

The website at least now has professional looking automatically generated breadcrumbs that includes a dropdown menu to make viewing different categories and items a breeze. Not to mention a completely redone permalink system that finally makes sense, and category landing pages that make sense... too! View Source Code of Breadcrumb-gen.js Breadcrumbs in action: http://www.frenchtravel.com.au/cruising/river_cruises/our_selection/burgundy_and_provence.aspx