Redeveloping my website

JohnAlexanderRowley.com has been around since 2009, and seen three serious redesigns – The most recent of which was completed late last month. But why redevelop again in 2014 and what’s changed in this redesign?

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.

Design changes

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.

 Going responsive

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.

JohnAlexanderRowley.com - Responsive design

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

Revised content

The new website design allowed a significant reduction in the number of pages, whilst allowing more in-depth articles to be published.

Content pages

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.

Performance

Throughout the build I tested performance factors including load times, Schema mark-up and copy optimisation for search.

Site speed

The site’s content heavy pages meant that optimising them for load times was essential, not only for the user but also for search marketing. Using W3 Total Cache I minified CSS, HTML and Javascript files in addition to utilising page, browser and database cache to further drive down server response time.JohnAlexanderRowley.com page load time - by Pingdom

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.

JohnAlexanderRowley.com - Homepage search engine result

Schema.org

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.

John Alexander Rowley

An enthusiastic digital marketing professional passionately dedicated to increasing the online presence of businesses and individuals in order to improve engagement and ROI.

Why I love digital marketing

Three tips to improve landing page effectiveness

Have you optimised for conversion, but still not seeing conversion rates improve? Landing page copy can often see landing page effectiveness skyrocket if done right.

Read the full article

Multiple backgrounds with CSS3

A nice little feature of CSS3 is comma separated values for background attributes, allowing multiple backgrounds to be defined against a single CSS element. No more overlaying several div’s!

Read the full article

5 common CSS mistakes

As Steve Jobs used to say: “Always try to make ‘the things you can’t see’ beautiful, too”. Here’s five common CSS mistakes I’ve made in the past, that I’ll be sure to avoid in the future.

Read the full article