1 Introduction

I recently undertook a project for a charity who had been suffering a down turn in traffic from mobiles and tables following Google’s 2015 and 2016 changes to the search algorithm. The change biased against sites that don’t provide explicit support tablets and mobiles.

2 Keeping the Existing Site's Look and Feel but Making it Responsive

As they client’s budget didn’t allow for a full site redesign at this point we had to retain the look and feel of the existing site design in the short term but enhance it to make it responsive. I’d never claim to be a designer but feel I do have a good understanding of User-Experience (UX) and enjoyed taking the client through an iterative process to find the right solution. We reviewed the mobile navigation menus from similar “rival” charity sites, and some good sample sites from other industries to find ones that would work best for their existing site structure whilst providing a good user experience.

Fitting a mobile nav system into their existing site structure was easier said than done as we identified that there are currently three primary navigation menus on the existing site design! This process again re-enforced to the client that their overall site structure (e.g. the structure of the content) needs reworking but it was something better done in the next phase. The whole process focused on the primary goals of the site (namely to encourage donations, lead visitors to resources and to ensure that the site is friendly to people of all ages).

Web Developers will tell you it’s MUCH easier to build a front-end website from scratch than to refactor a legacy one to make it responsive which is true! In this case we had lots of legacy pages with custom CSS so we needed to take an iterative approach and so I made the old content “fit”, highlighting pages where the content editors would need to update the content easily to improve the user-experience (these were mostly pages which contained tables to provide column layouts).

3 Exporting importing the content from Umbraco v4.7 to Umbraco v7.4

Following the review of their website, as well as adding responsive elements to their website layout, I also recommended “upgrading” to Umbraco v7 as they had been stuck on v4.7 since the site was first built in 2011. I say “upgraded” but we needed to leave behind the legacy packages, rework the site from the legacy XSLT templates into modern C# Razor, and clean up the data. Umbraco does make it possible to upgrade through the versions to v7 but for this site it was time for a refresh and to put them on a platform they could build from in the future.

They had built up over 4,000 pieces of content which all needed to be to be imported, data converted (where old unsupported packages had been used – nupickers and image resizers) and URLs 301 redirected where necessary. They also had a large media library that needed importing which also mean all content had to be checked for references to media and the all links (including inline links in the Rich Text Editors!) updating to point at the correct location).

To do this I had to write a number of custom import routines which would both update the content and output lists where I could identify the content wouldn’t fit too well in a responsive layout (e.g. where it contains tables!) This allows us to migrate all the content to get the site upgraded and live but also allow them to fix any content issues as a lower priority. I worked with the client to create a plan based on the content’s popularity and the key landing pages.

4 How it went

The first stage is now complete, we’ve successfully imported the content, enhanced the site layout to be responsive and allowed the CMS to allow serve either, an older “everything in a single Rich Text Editor” approach, or allow the editors to update content in a more responsive friendly blocks for a grid solution.

Within two and half weeks I took a nonresponsive, Umbraco v4.7 site and migrated it to a fully responsive v7.4 site which the client now loves again!

With the Umbraco v7 improved user-friendly back office, the client has been more actively updating their content (which never hurts their SEO juice) and, more importantly, Google now returns the site in mobile search results again. As a result they’ve already seen an increase in Mobile / tablet engagement (blue bars vs orange).

The blue bars show the web traffic following the website rework.

I’m looking forward to phase two – we’ll restructure their site to make content easier to find and we fully expect to see those visitor numbers rise again which in turn leads to increased donation conversion and ensure the continued success of the charity!

There were some inevitable trade-offs but the end result is a seamless mobile experience which allows users to access all the pages from the mobile nav (which does the work of the three navs!) and ensures that the key goals are retained.

The client's logo has been covered.

Conclusion

From the client's perspective from a small amount of expenditure they've increased their mobile traffic and will enjoy increased donations and course bookings. They are keen to look a full site redesign and site content restructure in 2017!

If you’re currently on an older version of Umbraco or have a non-responsive site, and have been told it will be too expensive to change, contact me for a chat on the options available. Obviously it’s different for each site / client but for just two weeks of effort you could have a new Umbraco v7 platform with all of your legacy content imported!

As well as their Editors, Google now likes the site too!