The Podcast
Show Links
Help the Podcast
Transcript
Hello, Scott Austin here.
As a Shopify store owner, you are probably aware of what a responsive web site is and what mobile-first design means. As a quick refresher a responsive web site is one that adjusts the page layout to the screen size that it is being viewed on so that the content is viewable and customers can get to the checkout on all devices. A mobile-first design is one that focusses on the mobile experience first as that is the harder screen size to optimize for.
One key step to creating a responsive website is determining how you will test the responsiveness of your store.
In this episode, I'm going to cover how to determine what screen sizes, devices and browsers your customers use. We'll use this data to put together a plan for which combinations we'll be testing. And that's because a crucial part of a responsive website is thorough testing of the content and functionality across a matrix of devices, screen sizes and browsers.
For data, I prefer to use Google Analytics. Shopify Analytics will have some of the same information. But the Google Analytics data is more comprehensive and easier to work with. I've created a Dashboard and added it to the Google Analytics Solution Gallery so that you can easily add it to your own Google Analytics account. I'll include a link to this dashboard in the show notes so you can quickly see your store's data.
Let's start off with devices. For data on devices, Google Analytics has a report under Audience > Mobile > Overview or you could use the dashboard I mentioned. The report shows the percentage of users bucketized into three device categories of Mobile, Desktop and Tablet. Laptop users fall under the Desktop category. I recommend that you look at this report with a month's worth of data to get a good sampling. This report will show you device breakdowns for Acquisitions and Conversions, so you can see how the customer behavior changes between all visitors to the site and those that purchase. For this discussion, I looked at the data from a sampling of 25 of my client's Shopify stores and the data varies widely. For example, one store has 92% of its conversions on mobile while another store has 17% of its conversions on mobile. And if you were to look at the businesses, its easy to see why the percentage of mobile purchasers is so different. In the heavy mobile purchaser business, it’s a consumer facing store with simple to select products with easy variant choices. In the low mobile purchaser business, it's a B2B store with large, complex to configure products. So the different nature of the business and their customers drives the very different mobile usage. In other words, there's no one goal of device usage that a store should be aiming for. Each store is unique and its important to see what devices customers are using to access the store in order to drive design and testing of the site. That said, if you see a large drop-off in the percentage of visitors on a device to the percentage purchasing on that device, you may want to dig into that a bit more to understand what is going and if there are any issues that need to be resolved.
Now that I've just said that every store is unique, I'm still going to give you some averages as a baseline to compare your store with. In the sampling of stores that I gathered, here's how the users break down over the 3 device groups. The top device is mobile with 59% of the users. Then desktop with 37%. And last is tablet with 4%. Then if we look at purchasers, mobile is still the top device but it slips 9 percentage points to 50% of the purchasers. Desktop climbs 10 percentage points to 47% of the purchasers. And tablet slips 1 percentage point to 3% of purchasers.
My take away from this is that mobile and desktop are equally important. But that a mobile-first prioritization is needed to help ensure that mobile doesn't slip much with purchasers. And tablet is a distant, distant third. So if your resources are limited, it may be okay to just focus your efforts on the mobile and desktop experiences and not worry about tablet for now. If your business is large volume though, it will be worth your effort to ensure a good experience on tablet as 3% of a $10 million business is $300,000.
I take it as a given that each store should be tested on mobile first and then also on desktop. You should use the knowledge you've gained here to determine if you'll be adding tablet to your testing mix or not.
With that decision made, let's move on the next decision to make and that is what screen sizes to test for. You see, the average Shopify store is viewed under hundreds of different screen sizes. And that is because computers and phones come in all sorts of different screen sizes. We'll use Google Analytics to see the screen sizes. The dashboard I mentioned earlier has a report of the top 10 screen sizes used to view your store. To see the full list go to Audience > Technology > Browser & OS. Then select the Screen Resolution tab. I'm looking at one of my client's report and it shows 873 different screen sizes. Now that is an impossible number of screen sizes to test. We need to simplify this drastically. What I essentially look for in this report is how prevalent small phone screens are in viewing your store. Let's classify a small phone screen as anything less than 360 pixels wide. In the store I'm looking at, the first screen below 360 pixels wide is number 28 on the list, which is pretty far down. And I don't see small screens that often. In this case, I would decide to not test the store on small phones. Now as I look at another store in Google Analytics, I see a small screen size is #9 on the list and it shows up a couple of more times in the top 30 screen sizes. So for this store, I would test small phones in addition to large phones.
If you previously made the decision to test on tablets, you can decide which size or sizes to test on. I look at just iPads as they are usually the bulk of Tablet usage. iPads are generally 768 pixels wide by 1024 pixels high when used in portrait mode and iPad Pros are 1024 pixels wide and 1366 pixels high in portrait mode. So you can look for those sizes in the screen size report to help determine which sizes to test on.
So, we've made decisions on devices and screen sizes. The last aspect to make a decision about is browsers. There are many different browsers. In one store that I'm looking at right now, there are 24 different browsers listed. The 4 most prominent browsers are Chrome, Safari, Firefox and Edge. The other browsers are from smaller share browsers like Internet Explorer or Opera. Or propriety browsers for devices from companies like Amazon, Playstation, Samsung or Blackberry.
Here's the average browser breakdown from the sampling of stores I looked at.
- Safari - 43%. Safari can be found on Macs, iPads and iPhones.
- Chrome - 42%. Chrome can be found on everything. Desktops with Windows or Mac. Tablets. And phones with iOS or Android.
- Firefox - 3%. Like Chrome, Firefox can be found on everything.
- Edge - 3%. Edge is also available for everything. But in reality only gets used on Windows.
- All others - 9%
For almost every store, testing on Chrome and Safari is a no-brainer. You should look at your store's data for Firefox and Edge to determine if you should test them too. In my sampling, Firefox usage varies from 0 to 7% and Edge varies from 0 to 10%. Let's say that if your store's percentage is greater than 5%, then you should add them to your test suite.
So you now have a desired list of devices, screen sizes and browsers to test on. You probably don't have all of the combinations you need for testing. But that's okay as its easy to simulate some things. For example, Dev Tools in the Chrome browser allows us to view a web site in a wide variety of screen sizes. You can access Dev Tools in Chrome through Control - Shift - I. Safari has similar capabilities. You access them by selecting 'Enter Responsive Design Mode' from the Develop menu. If your browser doesn't show a Develop menu, you can add it by going to Preferences in the Safari menu. Then check 'Show Develop menu in menu bar' under the Advanced tab. The biggest challenge in putting together your test devices is for those people that use Windows for their computer and Android for their phone. That’s because Safari, which is usually the most used browser, is only available on Apple operating systems. But Apple devices are so common, you probably know someone with a device you can borrow for testing.
And that should give you all the information to put together a test suite of devices, screen sizes and browsers that accurately supports your customers habits. Now as for what you test for, we covered that in the previous podcast episode on User Testing Your Shopify Store, which I'll link to in the show notes. By combining these two episodes you'll be able to fully test your store and be confident that your customers are receiving a quality experience.
Thanks for listening.