In today’s world, customers need to be able to reach your online store by one or more device. In fact, recent statistics indicate that in America:

  • 77% of people own a smartphone
  • Nearly 80% own a laptop or desktop computer
  • Around 50% have a tablet computer
  • 20% own an e-reader device
  • Over 10% are smartphone-only users, meaning they don’t have traditional broadband Internet at home and instead rely on their smartphones to browse online

internet use by device stats

These figures demonstrate the importance of having an online store that can respond to all of these different types of devices. Especially when you consider the fact that mobile traffic is starting to take over from traditional desktop traffic. Compared to a few years ago, a mobile website isn’t something that’s “nice to have” – it’s a necessity.

online devise usage changes over time

Why Should You Have a Responsive Website Design?

According to Google, the benefits of having a responsive website design include:

  • It’s easier for users to link to and share your content with a single URL
  • It takes less time to maintain a number of different pages that contain the same content
  • It reduces the risk of common mistakes that are made on mobile websites
  • Users don’t have to be redirected to a website that’s optimized for their device, thus reducing the load time of your site. This also reduces the risks or error associated with agent-based redirection
  • It helps Google’s algorithms because they can accurately assign indexing properties to your website’s pages rather than having to signal the existence of corresponding mobile/desktop pages

Is Your Online Store Responsive?

Firstly, it’s important to figure out whether or not your e-commerce store is responsive, and there are some simple ways you can do this:

Desktop Browser

This is the quickest way to find out if your online store is using a responsive web design:

testing website responsiveness

  1. Open your website browser, e.g. Safari, Fox or Chrome
  2. Place your mouse on the bottom right-hand corner of the window
  3. Make the window smaller by dragging this from the right to the left

If, as you do this, your content starts adjusting to the new dimensions you have created, it’s highly likely your website is responsive. However, to make sure it’s fully responsive on other devices, you’ll want to check how your website appears on these.

Smartphone, Tablet and Desktop Devices

Grab your phone, your friend’s tablet and your sister’s desktop and start looking at your site on all these different devices. This will give you a genuine insight into how responsive the site design is and whether your online store is compatible with devices of all different shapes and sizes.

Not got access to all these devices? Then head into an electronics shop and load your website on all the different devices on sale there!

Emulators

Another way to check the responsiveness of your site is to use an emulator, however, these can’t be 100% relied on to give you an accurate indication of the experience users are getting. But they will give you a general insight as to how your e-commerce store works on different devices.

Emulators include Screenfly by Quirktools. To use, simply:

  1. Insert your website’s URL when prompted
  2. Click on the different device icons at the top of the screen to start viewing the website through these – these include desktops, tablets, mobiles and even televisions
  3. To make it easier, enable scrolling by clicking on the icon that has an upward- and downward-pointing arrow
  4. You can also test a user’s experience with a range of different resolutions, which is particularly useful as new devices start to enter the market

Even though these emulators will provide you with a great overview of how your online store appears on various different devices, they don’t account for scrolling with your fingers. You’ll be using a mouse on this emulator, so it’s crucial you look at your website’s usability through the device itself to account for things like “fat finger syndrome.”

Finally, if after doing all this you’ve discovered your website isn’t responsive – don’t panic. Below you’ll find a number of ways you can create an online store that works across all devices.

Top Tips for Creating a Responsive E-Commerce Website

Understand Your Customers’ Journey

Firstly, you need to understand the traffic that’s coming to your website. Where are these customers coming from and what device are they using to browse your online store?

You might find that only a low number of users are using their mobiles, but if more than 10% of them are, it’s time to make sure your website is mobile-friendly. Equally, by analyzing your website’s traffic you’ll be able to tailor the content to the user, making sure the calls-to-action and content you’re displaying are appealing to the customer and meet their needs.

Many websites are now having to create an experience that accounts for a number of different devices within one customer journey. For example, you may notice a customer browsing your website on their mobile after searching for a product you sell. However, the customer may use their desktop device to make the final purchase. In these types of cases, just making sure your website works on different devices won’t be enough. Instead, you need to understand what your customers want, when they want it and how you can give it to them.

Understanding the above will help you with the next tip.

Identify “Micro-Moments” in Your Customers’ Journey

Now you know what you need to present to each customer at every stage of their journey with your online store, it’s time to look at the “micro-moments” within this journey.

These micro-moments are the time when users reflexively go to their device to fulfill their need to buy something, watch something, find something, do something or learn something. These moments are intent rich and are the times when your customers’ decisions are made.

An example of how brands have adapted this within their customers’ journeys include:

  • Hertz emails a customer as soon as their plane lands to tell them their car is ready
  • A Starbucks card is loaded by Apple Passbook when a customer’s near a coffee shop
  • Starwood allows their customers to open their hotel room and check in using their smartphone

Customer journey examples

These intimate, responsive experiences are something customers are coming to expect. Recent research conducted by Forrester found that:

  • 62% of Americans expect a website to be mobile-friendly
  • 23% expect the mobile experience they receive to change based on their location

website responsiveness expectations

To create this experience, you can analyze:

  • Customer Searches: What keywords, ads and queries are bringing users to your store on alternative devices? Once there, what searches are being carried out by users on these different devices, and can you spot any helpful trends? A restaurant owner may find mobile device users searching for her location or hours, while desktop users are more prone to jump to the menu page.
  • Content: What content is being accessed by users at each stage of their customer journey, and on what device? Is there a trend surrounding what people are downloading on their phones? What content are they sharing?
  • Flow: Look at the direction customers travel through your online store according to what device they’re using. What path does a mobile-, tablet- or desktop-using customer travel down? And what sources are sending these customers to the site?

By understanding these finer details you’ll be able to provide your customers with quick and easy access to the content they want and need to fulfill their buying journey.

Consider the Mobile Version First

The mistake a lot of online companies make is to create their desktop site first. However, if mobile is a preferred method of browsing on your site, it might be beneficial to start with the design of your mobile version first. That’s because it’s easier to scale up your website than to scale it down.

Show All Content on Your Mobile Version

In an attempt to reduce the size of a web page, some developers will shrink or hide content from the mobile user. However, this doesn’t help reduce the size of the page and is only seeking to make the experience for mobile customers more frustrating because they can’t find the information they need.

Due to the high number of people using mobiles, especially during the research stage of the buying journey, omitting information from these devices is only going to hamper the experience you’re providing them with.

Choose a Framework

Creating a responsive website takes a lot of work, as you can imagine. However, there are a number of frameworks that can do a lot of the hard work for you. These include Foundation and Twitter Bootstrap.

Rather than starting from the beginning, these frameworks will allow you to use your online store’s existing code before upgrading and modifying it.

Convert Your Site’s Code

When you’re converting a fixed width, there’s a lot to consider. For example, you’ll need to add in meta tags such as “maximum-scale=1” “initial-scale=1” and “width=device-width”

Equally, if your site’s moving from a fixed design to a responsive one, you’ll need to trigger CSS rules with “break points.” Doing all of this one page at a time will make it much easier to do and control.

Make Sure Your Emails are Responsive

It’s not enough to make your website responsive, as it’s just as important that your emails are responding to the size of the device being used, too. The emails your online store sends out go hand-in-hand with your website, so why shouldn’t these be responsive as well?

Making mobile users scroll through endless streams of information to try and find the highlights of an email can be incredibly frustrating. So, make sure the efforts you are going to to make your website responsive include your emails too. This includes confirmation emails after your fulfillment service has picked, packed, and shipped their order.

Offer Support for More than One Image Resolution

It’s crucial your website supports more than one image resolution if it’s going to be deemed “responsive.” This is because how long it takes for the image to load will depend on the type of device being used.

To automatically alter your e-commerce store’s images you can use platforms like HTML, JavaScript, and PHP. It’s also important to consider specific color palettes, the maximum sizes you’re setting and what aspect ratios will be used.

For example, if you’re using CSS for images, you’ll need to insert the code “.my-img { width:100%; height: auto;}”. This will automatically keep your images in proportion.

Achieving responsive images that are satisfactory will depend on your online store, your customers’ needs and the resources you have. If you were to go for a performance-optimized approach, for example, you might create images in a variety of different sizes, assigning a particular size to a specific device. This may take time to implement and create, but will reduce the risk of issues caused by performance or bandwidth.

By following all of these tips you should be well on your way to creating an e-commerce store that maximizes the user experience. Equally, with many brands now catching up with the benefits of creating mobile-friendly websites, it’s important not to be left behind.

Additional Resources

For even more helpful advice on how you can make sure your online store’s creating the best user experience with responsive design, check out these guides and tutorials below:

Smashing Magazine – This in-depth guide explains what responsive web design is and how to use it.

DZone.com – Find out how to use HTML/CSS to create a responsive website.

Google.com – Advice for using JavaScript to alter how your website behaves and renders on different devices.

w3schools.com – Includes codes to help you move, enlarge, shrink, hide and resize your website’s content.

CreativeBloq.com – 10 useful links to even more helpful responsive web design tutorials.

Resources:

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design

http://www.pewinternet.org/fact-sheet/mobile/

http://mobilemarketingengine.com/is-your-website-responsive-design-step-by-step-guide/

http://aspireid.com/web-design/tips-make-website-look-great-devices/

https://blog.hubspot.com/marketing/optimize-website-mobile-experience

https://www.forrester.com/report/The+Mobile+Mind+Shift+Index/-/E-RES95941

https://www.iwdro.org/web-design/4-ways-to-make-your-website-responsive-across-all-platforms

https://www.business.com/articles/how-to-transform-static-site-into-responsive-website/

http://www.cmo.com/opinion/articles/2016/12/19/mobile-apps-from-onehit-wonders-to-enablers-of-multichannel-customer-experience.html#gs.h1m7i8A

  1. Ryan Smith

    #reply

    Thank you for this article! This is very helpful insight on an increasingly critical execution point for businesses. I can definitely attest to how frustrating it can be to try to navigate a watered down website, but to what extent should you consider how long a page may take to load if you do not reduce your page size for the mobile experience?

  2. Jake Rheude

    #reply

    Ryan, Thanks for your comment. Often times you can have a relatively small page but if it’s over loaded with CSS features the page load speed can still be lagging, especially for mobile. KissMetrics has a great article on this that goes into a bit more depth: https://blog.kissmetrics.com/speed-is-a-killer/

Add Your Comment