One of the key challenges of designing an ecommerce site is that there are a variety of different devices that someone might use to visit your store, and screen sizes vary widely:
So, some of your customers will be viewing your site on screens that are just a fraction of the size of what other customers are using. How can you ensure that everyone has a good user experience despite these technological differences?
That’s where responsive design comes in.
Responsive design describes all the web development practices involved in “responding” to the size of the visitor’s screen. In order for your site to be responsive, it will need to recognize what type of device the visitor is using and then adjust accordingly.
Mobile devices are just too popular to ignore. As of July 2024, smartphones account for 61.79% of all internet usage, and tablets make up another 2.17%. And in the United States specifically, 44.6% of ecommerce sales are made on mobile devices.
Indeed, there’s a good chance that about half (or more) of the people who visit your BigCommerce store are doing so on a smartphone or tablet.
Without a responsive site, many of these visitors will run into display and navigation issues, such as images that don’t render properly or links that are too small to easily click on with a thumb rather than a mouse. Such visitors will probably get frustrated and back out before they ever get close to adding items to their cart or placing an order.
A responsive site takes care of this problem, leading to a higher conversion rate and more sales.
It’s also worth noting that a more mobile-friendly store is a more accessible store. There are over 1.3 billion people in the world who experience significant disability, and many of these disabilities can affect a user’s capacity to shop online with a mobile device (vision problems, issues with fine motor skills, etc.). By making your site more mobile-friendly/accessible, you’ll be able to reach many potential customers who may not have been able to even use your store otherwise.
All storefront themes within the BigCommerce Stencil Theme Marketplace are responsive out-of-the-box. Images are also automatically compressed and served up via a CDN for fast page load times. BigCommerce has also natively integrated with Accelerated Mobile Pages, which optimizes page load times and search engine visibility.
To make sure that your custom pages on your BigCommerce store are responsive, you’ll need to pay especially close attention to the following areas:
Each part of your BigCommerce store, from your homepage to your product pages to your landing pages, should be utilizing high-quality product photography.
When asked what they dislike about online shopping, the top response people gave was that they don’t get a chance to see products in-person before they buy them. But you can do the next best thing by providing plenty of product photos — this will make customers feel more confident about ordering your products online, leading to more sales.
Indeed, research has found that a product page with one image converts visitors into customers at about twice the rate of a product page with no images, and the conversion rate for a product page with two images is about twice that of a product page with just one.
You’ll need to balance the need to provide high-quality images with the need to keep your site fast, though. This is particularly important for the mobile version of your site, as 53% of mobile users will back out of a page if it takes more than three seconds to load.
In terms of file size, images are often the largest elements on a webpage, which means they usually take the longest time to load. Thankfully, BigCommerce can help you provide these images without draining web performance with their content delivery network (CDN).
Physical distance has a significant impact on website speed. The farther a visitor is located from your server, the longer your site will take to load. CDNs keep copies of your most demanding web resources, such as images, on servers that are spread out all around the world. Specifically, BigCommerce’s CDN has nodes in the following locations:
By reducing the average distance between each visitor and the server delivering your resources, you’ll be able to provide a faster experience for everyone.
Another way that BigCommerce’s CDN makes your mobile site faster is by automatically converting images into the WEBP file format. Compared to the popular JPG and PNG image file formats, this results in smaller file sizes without sacrificing much (if any) quality.
Finally, BigCommerce uses an HTML attribute called srcset to account for the fact that different types of devices may be used to view your store. Each image you upload to BigCommerce will have a defined set of image sizes that the viewer’s browser will automatically choose from according to the size and resolution of the device being used.
In other words, BigCommerce will make the image small whenever it can (reducing file size and improving speed) while keeping it relatively large when it needs to be (you’ll be able to avoid the poor user experience of stretching out a small image file on a large desktop display).
Shogun’s visual editor makes it easy to create mobile-friendly pages for your BigCommerce store.
Whenever you’re making changes to a page in the visual editor, you can use the screen setting buttons located near the top of the page to toggle between which version of the site you’re editing.
There are four screen setting options: desktop, laptop, tablet, and mobile. Once you’ve selected one of these devices, you’ll be able to see what your changes look like on that type of device as you make your edits.
The cornerstone of Shogun’s visual builder is the element library, which allows you to choose from a variety of features (images, video, accordion menus, countdown clocks, etc.) to add to your page. For each element you add, there is a wide selection of customization options available — and if you like, you can use the “Edit on” settings to apply these customization options to certain devices but not others.
With the “Show on” settings, you can even set it up so that an element isn’t displayed at all on certain devices.
For example, you may think that a section on your company values is helpful but not quite necessary. In that case, you may want to include it on the desktop version of your site (where you have plenty of space) but remove it from the smartphone version (where you’re concerned about overwhelming the visitor with too much clutter). Shogun allows you to do so with just the touch of a button.
Shogun also allows you to set the margins and padding for each element as a percentage rather than a defined number of pixels. This is another key aspect of responsive design, as the number of pixels in the visitor’s display will depend on which type of device they’re using.
In addition to providing you with the necessary tools to make your store more responsive, Shogun offers analytics that you can use to confirm that you’ve done the job right.
Within the visual editor, you’ll find a feature called Shogun Insights.
Shogun Insights evaluates your page according to four different factors: Accessibility, Best Practices, Performance, and SEO. Each of these factors is graded on a scale of 0 to 100. If the score is 100, no changes are needed. If the score is less than 100, Shogun will tell you exactly what you must do to improve the page.
Several of the areas that Shogun Insights assesses pertain to the mobile version of your site. It will flag issues such as:
With Shogun Insights and the visual editor, you have everything you need to design the perfect mobile experience for your BigCommerce store.