Knowledge

Let's call it a tweak

Published on August 17, 2014 under Web Development

Culinaria

Last year, I unveiled the new redesign and improvement of my food blog, Culinaria. I had taken what was a simple Wordpress blog and expanded it into a multi-section web blog running my own custom CMS. I wanted to build a brand and make a better user experience for the site.

So it’s been a year later, and I’m happy to say the site is seeing more traffic, but there was a problem. Keeping up with Google Analytics has shown me that my bounce rate was at 90-100%. That means practically every visitor who comes to the site immediately leaves soon after, rather than explore other sections and content.

I took time to fully research the “why” to this issue, and found several spots where I could improve, and I did. While it’s not a redesign of the look and feel, it’s more a “tweak”. Let’s have a look:

A fully responsive experience

Culinaria Bootstrap responsive layout
Click to enlarge

When I coded Culinaria a year ago, I had made a “split responsive” experience where I had a website built more for desktops, laptops, and large tablets; and a second site for small tablets and smartphones.

Unfortunately, my research has shown that this will affect the SEO. I found that despite my meta data and analytics settings, the mobile website was not registering visitors. Thanks to my wonderful experience with Bootstrap, I had no excuse now not to have a fully responsive website.

Now every page is on the same link, and I kept a redirect for those who happen to arrive via a mobile link floating around the internet. I’ll also add how the mobile navigation on the old site was a misery in coding, so I’m happy to add this has been improved.

No more slider

Home Page slider replacement

Another point of contention was the home page slider. I did like it in many ways because I still like the idea of a home page being a central “welcome” spot where you see the latest information put on said site. However, the analytics showed that barely anyone ever interacted with the slider. Plus I felt it was hard to read unless I had slides sitting there for 8-10 seconds each...not to mention the bugs/problems I encountered with the slider on mobile.

The new solution was to instead use images and text in a way similar to a slider, but with no animation. Rather than one big image that shuffles, I put in one larger image and four smaller images, each with headlines written to give a good description of what is at the end of the link. Responsively, they just shuffle their way down to one column when you are on a smartphone.

Related links

Related Links

In trying to lower my bounce rate, the biggest piece of advice I found for a blog is to place “related links” at the bottom. It makes sense, as a user who arrived on an article will thus have easy suggested options of where to go next. I used to think the categories or the tags would suffice, but I was wrong.

I didn’t just want to put four random links at the bottom, but more tailored choices that fit with what you were reading. I first thought about just setting up four blanks where I’d add in selected links for each article and recipe, but I didn’t like how I’d have to come up with this for every piece of content. Not to mention it would never randomize the links and allow for newer content to appear.

I instead used what I knew of arrays and functions to build a complex system. The function starts off by making an array of all the articles, and one of the recipes. The script then takes the tags of the parent article, and seeks out similar results from those two arrays. It will select two normal articles and two recipes, so there is a balance of content coming to the user. If there aren’t enough similar articles/recipes in the results, then completely random articles and recipes are pulled to fill in the empty gaps.

The end result is that each user will see different related links and thus spread more content around, hopefully driving users to explore over leave.

The end result

I’m happy to say that since the relaunch of the new improved site, my visits are increasing and my bounce rate is slowly coming down. Hopefully in a year we might see the bounce rate much lower, but only time will tell.

Have you ever dealt with a high bounce rate? What changes did you implement?

Tags: web design, responsive, blog, sep, bootstrap

comments powered by Disqus