JohnAlexanderRowley.com has been around since 2009, and seen three serious redesigns – The most recent of which was completed late last month. Although a complete redesign is perhaps a little excessive in most cases, there’s usually a pretty good reason for redeveloping.
Why I needed to update
Previous versions of JohnAlexanderRowley.com had been focused on articles covering a range of computing topics. The catalyst for redevelopment was a couple of hours with Google Analytics. This revealed that digital marketing articles were driving the majority of organic search traffic to the site (landing directly on article pages) meaning more of the homepage could give emphasis to career and freelance information.
Additionally, the site’s design was only partially responsive, and with the steady increase in mobile traffic it was clear that the theme was in need of an overhaul.
Step one: Redesign. There were a number of design elements to consider, but two in particular took a long time to decide on.
Removing the sidebar
One of the early design changes I decided on was the removal of the sidebar. Sidebars are still really common on many websites, but I found that content regularly exceeded the height of the sidebar – leaving empty space to the right of most articles.
Deciding to remove the sidebar meant I had to find somewhere else for additional articles and author information, with other elements taking a step back. With user habits changing (more familiar with scrolling) incorporating full-width blocks of metadata was a natural solution.
The decision to go responsive wasn’t a difficult one, but choosing how elements should scale on different screen sizes was more thought-provoking. Rather than ‘mobile-first’, I wanted the site to look like it was designed for the device it was being displayed on, including >1200px wide desktops.
To be honest, it didn’t take a huge amount of time to figure out how elements would respond to smaller screens, as Twitter’s bootstrap offered a seamless solution and had lots of examples, making mobile design a doddle.
Back to development
I’d confessed to colleagues that I felt I’d lost touch with modern web development, focusing on search marketing, social and email within my career. However it all came flooding back the moment I opened Notepad++.
WordPress and Bootstrap
WordPress was as friendly as ever, with functions such as add_options_page and add_meta_box allowing me to quickly set-up a content framework with custom metadata fields. This was a couple of hours of development, and allowed me to depreciate a couple of plugins that I’d used on other web projects.
Bootstrap was similarly easy to use, just requiring a couple of scripts and CSS files to be called and then being able to use classes and ID’s to create a responsive grid system which scaled automatically. Bootstrap even had an easy to use carousel script.
Plugins that did make it
Of cause, some plugins did make it into the final website.
- Contact form 7 (+ Really simple CAPTCHA) – Beautifully simple, spam free contact forms
- Disqus comment system – Replaces WordPress comments. Features social sign-on and off-site moderation
- Jetpack – Brings some nice functionality like spelling checks and simple social distribution
- WordPress SEO (by Yoast!) – A full-featured plugin to help add schema.org and optimise on-page SEO
- W3 Total Cache – Probably the most advanced performance (speed) based plugin for WordPress
The new website design allowed a significant reduction in the number of pages, whilst allowing more in-depth articles to be published.
Each page uses Bootstrap’s grid framework with different layouts. This allows the content freedom, allowing pages to be more bespoke. Each page is longer, with more content further down the page (as per the design). Reducing the number of pages also reduced the complexity of the navigation in the site’s header.
In October 2013 Matt Cutts, Head of Google’s search spam team posted a video explaining how less pages will effect SEO:
“I wouldn’t assume that just because you have a large number of indexed pages that you automatically get a high-ranking. That’s not the case.”
Digital marketing articles
Similarly to pages, article pages were able to display more content thanks to the refreshed design. This meant in-depth articles (something Google recently started including in SERPs) could be published giving both Google and visitors more of an understanding about what the site (an extension of me) likes to talk about.
The previous site contained over 200 articles dating back to 2009. Most of these articles didn’t rank well, were poorly written and were off-topic, so I decided to only migrate the latest thirty (going back to May 2013). These thirty were reviewed with new titles, meta descriptions, excerpts and feature images being added.
Throughout the build I tested performance factors including load times, Schema mark-up and copy optimisation for search.
The result was a load-time of ~3 seconds, with Google’s Page Speed Insights tool giving 78% and 91% scores for mobile and desktop, respectively. The same tool also gave a 95% user experience rating. Pingdom’s page speed tool scored the site’s performance 95/100.
Search Engine Optimisation
Using Yoast’s WordPress SEO plugin, I reviewed each page (8) and post (30) to make sure they were optimized for search engines. This required content to be analysed against focus keywords for keyword density and inclusion in metadata. The Flesch Reading Ease test was also used on articles to make sure they were easy to read.
Finally, Schema.org mark-up was tested to make sure organic results showed as much useful information as possible. This included Authorship, Person, Website and Article mark-up. Rich-snippets are increasingly valued by Google so ensuring that these displayed as expected was crucial.