August 8, 2024

A Quick Guide on BigCommerce Responsive Design

Arrow pointing left
back to blog

about

Designing an ecommerce site that is responsive across a wide range of devices and screen sizes is crucial for maximizing conversions and accessibility.

the author

Adam Ritchie
Ecommerce Contributor

share this post

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.

Create exceptional ecommerce experiences for mobile shoppersShogun’s visual builder allows you to create custom versions of your pages for every screen size.Get started now

What Is Responsive Design in BigCommerce?

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. 

Why Mobile Responsiveness is Important

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. 

BigCommerce Mobile Responsive Themes

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.

Best Practices for Responsive Design

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:

  • Buttons: Perhaps the most common issue with mobile sites is that visitors can have trouble clicking on what they want to click on. While a mouse and cursor provide a high degree of control when navigating websites, using a touchscreen is somewhat less precise. To save your customers from this frustration, make sure your buttons and other navigation elements are big enough for users to tap with their thumbs. 
  • Form fields: You also need to make sure that any form fields on your site are big enough for visitors to easily tap into. In fact, it’s best to replace form fields with select menus or radio buttons/checkboxes whenever possible, as it can be difficult to type on mobile devices as well. 
  • Font size and type: A relatively small font that works just fine on desktops and laptops may be downright unreadable on the smaller screens of mobile devices. Font style can also make a difference — the extra ornamentation of serif fonts like Times New Roman may look messy and cluttered when shrunken down for a mobile device. Instead, you should use a simple, sans serif font such as Arial or Calibri. 
Create exceptional ecommerce experiences for mobile shoppersShogun’s visual builder allows you to create custom versions of your pages for every screen size.Get started now

Making Images Mobile Responsive

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:

  • London
  • Los Angeles
  • New York
  • Sydney
  • Tokyo
  • Sao Paulo
  • Hong Kong
  • Singapore

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). 

Creating Mobile Responsive Pages on BigCommerce with Shogun

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. 

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.

You’ll be able to see what your changes look like on the type of device you’ve selected 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.

You can choose to customize elements on 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. 

You can choose to have an element displayed on certain devices but not others.

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.  

Shogun allows you to set the margins and padding for each element as a percentage rather than a defined number of pixels. 

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 will show you exactly how to make your BigCommerce store more mobile-friendly.

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:

  • There are buttons on the page smaller than 48×48 pixels (this is too small to easily click on a mobile device)
  • There isn’t enough color contrast between the text and the background (this can make content hard to read, especially on mobile devices)
  • For more than 40% of the text on the page, the font size is smaller than 12 px (a larger font would be easier to read)
  • The aspect ratio for one or more images is incorrect (this can make the images look stretched or squished)

With Shogun Insights and the visual editor, you have everything you need to design the perfect mobile experience for your BigCommerce store. 

Create exceptional ecommerce experiences for mobile shoppersShogun’s visual builder allows you to create custom versions of your pages for every screen size.Get started now

You might also enjoy

Get started for free

Get hands on with everything you need to grow your business with a comprehensive suite of tools.
Start now
Arrow pointing up and to the right Arrow pointing up and to the right