Introduction to Responsive Design & eCommerce

The current buzzword/trend in the world of website design and development is “responsive.” It seems everyone wants a responsive site these days. If you’re a merchant, web programmer, or anyone else who deals with online media you’ve probably heard or read about responsive design and might want to know how it applies to you. As a merchant running an eCommerce site, I believe that a responsive design can add a lot of value for your visitors.

Since we deal exclusively with eCommerce here at Classy Llama, I’m going to spend a little time covering responsive design and then dig a little deeper into why it matters for eCommerce sites.

What Is Responsive Design?

The quick version is that a responsive design is a website design that changes and adapts to fit whatever device is being used to view the website. The design “responds” to the site visitor’s device and browser. A responsive design is also built to handle multiple input types so that it can be used on a touch device just as effectively as a device with a mouse.

All Your Stuff in One Place

In the multi-device world in which we live, many people will browse the web on a smartphone, a tablet, and a desktop computer. A good responsive design will display well and be easy to use on whatever device the visitor is using. Many new web technologies make it possible for the same site to work well on both a tiny smartphone and a giant desktop screen.

A responsive design uses the same design for both desktop and mobile devices. A responsive design maintains, as much as possible, consistency between the large desktop layout and the smaller mobile layout. Because it’s a single design for a site, a responsive design also contains all the same information for access on any kind of device.

Responsive vs. Mobile Websites

Although programmers have been creating “mobile” websites for a few years now, the key difference between a responsive design and a site with a traditional mobile design is that the mobile design is usually separate from the main site design. This generally means that the mobile site has different controls, a different layout, and must be loaded separately from the desktop design. Sometimes, with a mobile site, some website content isn’t available on the mobile site. Responsive design uses the same page content everywhere instead of splitting it up into separate sites.

Since I want to focus more on the eCommerce application of responsive design here, I’ve included links to a handful of articles at the end of this post where you can learn more about general responsive design.

“What about a mobile app?”

Since responsive design most often comes up when considering users with mobile devices, merchants have asked me about building a smartphone and/or tablet app instead of a responsive design. Apps are all the rage these days, with large app store companies posting big numbers about the number of apps users have downloaded and installed on their smartphones. However, there are a few reasons to prefer a responsive design to a mobile app.

1. Barrier to Entry

Using an app requires getting that app from the appropriate app store. A visitor who wants to use a site that only offers a mobile app has to go to the app store, download the app, and only then can they visit a mobile-friendly version of the site. This is a hassle and takes extra time, whereas with a responsive design the visitor can simply use the browser already installed on their phone to immediately begin browsing the site.

Additionally, many smartphone users have many apps installed already and are reluctant to add more. A user may not even have the storage space on their phone to add another app. If a website isn’t likely to be used often (e.g. if your website isn’t Amazon.com) then a user is going to be less inclined to install a dedicated app. With a responsive design, the user doesn’t have to install anything.

2. Multiple Platforms/Devices to Support

Because of the way that apps are programmed they are specific to a certain operating system and device type. For example, an Android app won’t work on an iOS device. Similarly, a smartphone app may not work very well on a tablet and vice versa. In order to support all the possible devices, a website will usually need multiple apps, which increases programming time and cost. Because a responsive design is designed to flex to fit different devices and runs in a regular web browser, it works on virtually all devices.

3. Separate Information Management

Because an app (or multiple apps) have to be programmed separately from a website, the information they contain generally also has to be managed separately. The website operators either have to duplicate their content creation and management efforts or create a sophisticated technical system to keep all the information up to date. Even then, information for the website may not fit very well into an app. With a responsive design, the information only has to be entered once on the website and it will automatically fit itself to all the devices with which visitors will browse the site.

Why should I care about responsive?

I hope I’ve made a clear summary case for why responsive is the right option for supporting your website on all kinds of different devices. But should you worry about these devices? Why should you care about all these smartphone-using people? Don’t serious customers use desktop computers anyway?

1. Mobile Web Traffic Trends

According to a report from Internet Retailer[1], mobile device web browsing made up nearly a third of all web traffic. That’s a pretty big chunk of users who are using all kinds of different devices to browse the internet and the number probably isn’t going down anytime soon. The percentage of web traffic grew 35% from 2013 to 2014 according to the Internet Retailer report[1].

What this tells us is that users are only going to be using their mobile devices more and more to browse websites. As an eCommerce website operator, all those visitors represent potential customers. It’s important to make sure that you’re not giving a third of your visitors a terrible experience on the device they want to use. Implementing a responsive design is like laying out a friendly welcome mat for them.

2. Untapped Opportunity

For many merchants, mobile traffic is a smaller percentage of their traffic and a very small percentage of their conversions. Based on this, I’ve found that some merchants have been hesitant to make the jump to responsive design. However, for many of these merchants, responsive design could unlock sales and visits that they don’t even know they could get.

If a visitor on a mobile device gets a bad website experience, of course, they aren’t going to browse around to shop and buy products. It’s very reasonable that they don’t visit much and don’t convert. However, if you implement a responsive design to give those visitors a great website experience, you might unlock a whole new category of mobile device sales. For an example, read the article linked at the end of this post to learn how a Magento responsive design helped create success for a merchant named Skinny Ties[2].

3. Many Device Form Factors

If you’re not already sold on a responsive design, keep one more thing in mind. It’s important to be welcoming to visitors no matter how they come to you and today those visitors have a huge range of devices available for browsing the web. Tablets and smartphones now come in dozens of sizes. There are even phones so big they’re called “phablets”, which fit in between the other device types!

With a responsive design, you’ll be ready for all of these visitors, no matter which device they’ve chosen to use. Even better, your site will be ready for visitors using devices nobody has seen yet because a responsive design adjusts itself to fit whatever device is being used.

Conclusion

I sincerely believe that for many eCommerce operators responsive design is the next big thing, a step that will unlock a whole new wave of sales. Up until very recently, it has been quite expensive to implement a responsive design, especially on the Magento platform. Even when considering everything I detailed above, the ROI hasn’t been strong enough for most merchants to make the switch.

However, that’s all about to change. Here at Classy Llama, the team and I have been able to work on some innovative, exciting new projects that we believe will make responsive design accessible to Magento merchants who didn’t even have the option before. I believe that not only are the benefits of responsive design clear there for merchants using responsive design on Magento, the value soon will be too.

Watch this space for updates on this exciting news! Or, if you’re just itching to get started and can’t wait, email[email protected] or call us at (417) 866-8887 to learn more.

Cheers!

References

More on Responsive Design

Share it

Topics

Related Posts

Google and Yahoo Have New Requirements for Email Senders

What ROAS Really Means

Everything You Need to Know About Updating to Google Analytics 4

Contact Us