New website navigation system launched resulting in a faster website and better mobile browsing experience
By Chris Beard, Web Development Manager, Strategic Communications and Brand
The Web Development team in Strategic Communications and Brand have recently launched a newly coded, underlying navigation system on the Keele University website. The new system is considerably smaller than the original, meaning a faster website that gives visitors a smoother browsing experience, especially on mobile.
Here is some background on why and how we have done it along with the benefits it has delivered. Back when the Keele website was relaunched in April 2018, the site became a hybrid of old and new templates and content types. We launched the top-level pages first which contained roughly 1,500 new core pages which covered areas of the site that accounted for 50% of our web traffic.
The navigation system that we originally implemented used CMS (Content Management System) nav objects and JavaScript from Absolute (the Digital Agency we worked with), and meant that we could, overall, set and forget the navigation system; as new pages were added to the CMS, they would publish to the site automatically and the JavaScript would automatically update the navigation system layout.
This has been functioning well in the background while we have concentrated on migrating the rest of the site. The only snag with this approach was that, for each new page that was added to the CMS, there would be a snippet of code added to each and every page on the site. Early on, this was not an issue. However, the nav has grown over the last three years and has created ‘code bloat’.
These blocks of HTML built up over time and we were starting to get reports of a) too many HTML nodes for the JavaScript to scan quickly and efficiently, and b) excessive HTML file download times.
We needed a way to reduce code-bloat and preferably retain a system that did not need excessive navigation maintenance. After much research and testing, we decided that the best approach would be to rewrite both the HTML output and the JavaScript code that converted that HTML into a working menu for desktop and mobile.
Rather than output the entire site tree into the HTML we changed it to output the current section and immediate child sections. Rather than searching through an entire site tree to find the position of the current page, we could simply inject the current section and child sections directly into the rendered page.
For mobile, we had previously created a navigation menu that could move up and down the entire site without ever having to reload the page. Analytics showed us that users were not using this extensively and so we changed the navigation to show 1) the current section you are on, 2) the ancestor/breadcrumb sections all the way up to the homepage, and 3) the direct child sections
To cover instances of pages that had long breadcrumbs that fill the entire height of a newly loaded page, we added a scroll animation that would take users to the current section within the navigation menu. On opening the menu, the user is not presented with a stack of breadcrumb links, but instead, they are quickly scrolled down to the current section name. Users can then scroll up to see the breadcrumbs if they wish or continue down into sub sections
Testing and developing the new navigation system was a challenge. Due to the large scale and global changes required, we could not feasibly test and develop on the live site. The solution was to create a new Git branch of the core website code and develop and synchronise key parts of it so that we could eventually merge the development code into the main branch and launch. A new server was set up and an alternative page layout (overlaid template) was developed. We used alternative JavaScript and CSS files on the new server which gave a full development environment that was safely apart from the current website.
The new JavaScript was set up to detect the variations of page layouts and where each page sat within the site. We needed to cater for a set of 5-page layouts and core page positions — bottom of branch, standard, homepage and ‘edge cases’ of which there were a few!
Once the JavaScript rewrite was complete and compiled, it was smaller in size than the previous code. This would now further help download speed, especially for first-time visitors to the site.
After extensive testing on different browsers and devices, the new system was launched on 1st September. The website can now continue to grow without concern for adverse download speeds. This will improve both Site Search Optimisation and User Experience.
Example size comparisons before/after implementation of the new code:
