Mobile Devices: How Your Favorite Ecommerce Websites Look

When I first heard about responsive design, I thought it was like magic. A web design method that allows a single website to render beautifully across any device? Madness! We finally had a feasible solution to the massive proliferation of screen sizes consumers use to consume content and shop online. With an average of 232 different screen resolutions hitting websites in 2013 -- up from a mere 97 as recently as 2010 (source) -- there's no way we were going to build an awesome user experience that's piecemeal using the "m.domain.com" methods we had been relying on. Furthermore, the increasing importance of tablets in shopping (whose conversion rates and average order values have reached the same levels as desktop shoppers [source]) meant that ecommerce sites, in particular, could not afford to allow mobile shoppers to have bad experiences without losing sales.

In the interest of journalistic integrity, I have to mention that not everyone is in love with responsive design. However, the only significant argument that anyone has made is that responsive design sites have the same number of assets to load as the desktop version and mobile data speeds are (historically) slower than desktop speeds. Some worry that slower loading times would cause more harm than good. However, I'd counter that speed studies - such as this one by Yottaa comparing the speeds of different CMS's - show that CMS's like HubSpot (where all websites are responsive) actually load faster overall that CMS's where the majority of their users are still not responsive. Also, the State of the Internet report by Akamai shows that mobile data exceeds an average speed of 3 Mbps - more than enough to handle loading sites with responsive design. Also, given that most consumers prefer shopping while they're at home in the evening (source), access to wi-fi networks is prevalent enough that the benefits of an awesome user experience outweighs any speed concerns.

Still not sold on responsive design? Tweet me and tell me why, or leave a comment below.

Sold? Cool. So all that being said, let's take a look at how some of your favorite ecommerce websites render across various mobile devices. I've loaded some sites into our new free Device Lab tool that shows how a site renders in different resolutions. For simplicity's sake, I'm just using the Samsung device rendering (because that's what I have) but that site does several different renderings for you.

HubShop

Because I think you should never pick on someone without checking on yourself, I'll start with HubShop - our ecommerce website. I'll add the caveat that we're not really an ecommerce company and we only have that site to sell awesome nerd gear and cool marketing books - but it's still important that we practice what we preach.

Here's how our site looks on your desktop:

And here's how our site looks on your mobile device:

Amazon

Next I'll pick on Amazon. Contrary to what some may think, given that I co-authored a book that's a recipe for selling better than Amazon, I'm actually a huge fan of theirs. And once again, Amazon delivers on their goal of awesome buying experiences with beautifully responsive design.

Here's how their site looks on your desktop:

And here's how their site looks on your mobile device:

CheapHumidors

I'll pick on myself a little next. CheapHumidors is one of my favorite sites, and a company that I used to work at, is our first non-responsive design offender of the day. Which really sucks, since they sell cigars and 99% of the time if I'm checking out a new cigar it's because I'm at a lounge and I'm on my mobile device.

Here's how their site looks on your desktop:

And here's how their website looks on your mobile device. You'll notice that their really cool content and product recommendations require you to Z-Scroll like a madman until you get the full picture:

Beachbody

Our next offender is Beachbody, the authors of the wildly successful P90X and Insanity workout DVD series (personally, I've never made it past about day 50 but I'm working on it).

Here's how their site looks on your desktop:

And here's how their site looks on your mobile device. Although one might argue that looking like that guy might be their value proposition, you'll notice that their calls-to-action (which drive the sales and value for their site) are immediately gone from view without scrolling:

Gemvara

Last, I'll pick on another of my favorite ecommerce companies - Gemvara whose former CEO's ideas around customer loyalty and LTV partially inspired my book. Their website is beautiful and well organized around how people actually shop, but it makes for a poor mobile experience.

Here's how their site looks on your desktop:

And here's how their site looks on your mobile device:

Now it's your turn - run your ecommerce site through our free Device Lab tool or fire them up on your mobile device. Is shopping easy? If not, you may be losing out on sales - and it's only going to get worse.

What about you? Are you implementing responsive design on your website? Why or why not? Let us know in the comments.

Image credit: TheBostonChow