Rise of the tablets
We keep a close eye on some of the headline traffic stats for Cutting Edge Knives and thought it might be interesting to share some real world updates from our growing eCommerce site.
For those who haven't at some point been exposed to my talking and tweeting about our Cutting Edge Knives site, you're lucky. I'm incredibly proud of what we've built so far and how it's growing and in the spirit of sharing some real world data from our modest business, I've been digging around our analytics this week.
We have a pretty wide range of people access our site and although we make a few base assumptions about many of our customers, it's always interesting to take a look at what devices and systems people are using to view and buy our wares.
Time to refactor and rebuild
When we built the site more than 2 years ago, we were new to responsive design and this was a decent sized project to get stuck into with lots of nuances and content, a purchasing path and some pretty heavy duty imagery to boot.
Our decision at the time was to simply opt for a "desktop" and a "mobile" view using 2 stylesheets and a single media query based on iPad at the time. It's served us well but the landscape and our customers are a little different now.
The current design for the most part is actually pretty much unchanged from day one but it's getting to the point where a few things are creaking and groaning and in need of refactoring and rewriting a little better so I've been looking around at where our user base come from these days.
Meeting our customers
Part of the reason for this post is to give ourselves insight into who we're going to be dealing with and what sort of tweaks and optimisations we'll need to be making soon in order to sell more awesome knives.
Having been used to an IE dominated landscape for years, followed by the rise of Chrome over the lifespan of this site we're very much entering a mobile/tablet era now and it's nice to finally see some traffic on our own site to back up many of the reports other people working on responsive sites claim.
OS and browsers
When we first launched in June 2011, Chrome (19%) was top dog followed by Firefox (18%) and IE (14.5%) and all were on Windows machines. iPhone and iPads along with Mac in general combined to give us 16% of traffic.
Fast forward to September 2013 and the world is a different place... Safari on iOS accounts for 20.3% of our traffic on its own.
Add in another 11% and 6% for Safari and Chrome on Mac and we're looking at a significant shift in OS over 2 years but also significantly for us, a shift to mobile/tablet access which presents some interesting new design requirements.
We approached the initial build of the site in a content first way anyway and it's probably why we've been able to leave the front end of the site relatively untouched for more than 2 years but it's clear the rise of the tablet is something we should focus on now.
Mobile access still accounts for significant traffic percentages for us and it's grown steadily the whole time. While it's always been reasonably easy to browse our site and complete a purchase on a phone there are some interactions and design decisions that I'm going to give some thought to - namely better touch/gesture interactions.
Tablets, tablets, tablets
They're everywhere now. They weren't so much 2 years ago. Some highlights on tablet use for the site include:
- Highest page views per visit (by 1.5 pages/visit)
- Lowest bounce rate per visit (by 5%)
- Highest time on site per visit (by 3 seconds .. but still ..)
- Highest conversion rate (that's private)
At the moment, thanks to our crude division of screen sizing 2 years ago, a portrait tablet gets the "mobile view" (less than 768px) of the site while a landscape tablet gets the "desktop view" (more than 768px).
One of the most interesting things to come from our analytics was that the highest number of visits came from people using a tablet - in portrait mode - 768 * 1024px is the most common screensize on our site and has been for more than 6 months.
I'm a little embarrassed to be honest.
The highest percentage of visitors (and potential customers!) we get and we show them basically a quick fix/fallback version of our site using our original "mobile.css" file written 2 years ago.
There's no nice touch interactions, no swiping, space isn't used as efficiently or as effectively as I'd like if this wasn't my site and I was shopping on it.
The challenge ahead
So it's becoming clear that tablets and phones are in common use now and it's very much time to consider a better design approach for our site in these devices.
It's great to see our stats backing up what I read online and hear at conferences but up until relatively recently haven't really experienced.
Refactoring of some of the code and CSS on the site is a must at some point. There's a lot we can improve and I'll be looking at converting the site to Sass while I go along but for me the main focus will be planning and designing a significantly improved experience for our tablet and mobile (basically, touch enabled device) using visitors.
Got a site you could share a write up about? I'd love to hear about it and I'm sure everyone else would too.