M-Commerce: Designing for Mobile Sales
M-commerce—distinct from E-commerce—was coined back in 1997 when the Internet was wired and smartphones were science fiction. Now, M-commerce encapsulates every purchase made on the move and occasionally from the couch. Every time someone buys something—or does their research—on a mobile device, it’s considered M-commerce.
M-commerce is so prevalent that it makes up about half of online shopping. This ubiquity is precisely why it's worth investigating. Many mobile strategies amount to making the site look good on a smaller screen. That’s certainly important, but it’s also important to make sure that your site’s content and architecture are built for speed.
Mobile-ready stores call for optimization of logic and design. In this guide, you’ll get a checklist to help you optimize for M-commerce.
Before diving in
Squarespace is responsive
Squarespace sites look great on phones out of the box. When you build a site, your content will automatically maintain its visual appeal. Squarespace lays the foundation for you but, as a Circle member, there’s more you can do.
When you’re building a site, you’ll want to understand how it'll look on mobile. Learn more about style considerations, Device View, and how mobile formats affect certain elements on the page in the Help guide.
M-commerce Checklist
1. Build for speed
Get a speed readout
On mobile, there’s less room for lag than there is on desktop browsers. Use a page speed tool to ensure your site loads quickly.
You may have used Google’s PageSpeed Insight tool to check site speeds. The custom CMS that powers Squarespace can return inaccurate results on this tool. You can get more accurate results from Pingdom Tools.
Configure SSL and HSTS
Ensure your site’s SSL and HSTS options are enabled. Doing so may make your site faster and more secure.
These protocols protect your clients and customers. Learn how, and how you can enable these settings in Understanding SSL certificates.
Measure size of site
How big is the site? Ideally, the images are under 500 KB and each page is smaller than 5 MB.
Learn more in our Help guide on checking page content size.
Check spacing
To prevent text from overlapping on mobile screens, set letter spacing to at least 0px. If you’re using Spacer Blocks, they won’t show up in mobile. To have a consistent effect, change the padding to add more white space.
Balance resolution and size
Images are a key part of your site's design, but heavy images slow sites down. Ideally, every image should be the smallest size possible without compromising the quality.
After you’ve uploaded an optimal image into Squarespace, the platform will create seven different versions of the image. It’ll use these to optimize the content for different screen sizes. For even more speed-boosting power, some Circle members recommend additional steps.
For more about how Squarespace features imagery, check out the Help guide.
Check image focal points
Do the focal points on your images account for cropping? Depending on where the image is located on the page, some images may be cropped for mobile devices to help make the site responsive.
You can change an image’s focal point to account for these adjustments. Learn more about using focal points to center images in our Help guide.
2. Design for mobile contexts
Consider visual strategy
Make sure every image has a purpose, and the images cater to the site’s mobile experience.
Resizing and refocusing images are important steps to take. Equally important is evaluating how imagery will exist in mobile contexts.
When you’re reviewing a client’s site, see how the images work when the site’s content is stacked vertically. If a visitor has to scroll too much to get to key information, you may lose them to a competitor.
One approach is to see how many images you can remove without compromising the site’s quality. This can improve both the UX and load times.
Optimize navigation
You want visitors to be able to navigate the site at a glance.
When people are shopping on a mobile device, they’re often out in the world. They probably aren’t in their home office, diligently looking for background information. They may be in the store or walking down the street. They have momentum. In the moment, they may need guidance as much as they need understanding.
Make sure people can get what they need quickly. Otherwise, they may switch back to navigating the real world instead of the site.
Review the site’s content
Is the content on the page relevant to someone who is on the go?
Speed applies to both loading time and cognitive load or the amount of mental effort it takes to understand something. Optimizing the site for all screen sizes and browsers is only part of the task. Designing the content of your site to work with the shopper’s divided attention is another. When building for M-commerce, consider how your customer’s context may affect the site.
Enable Accelerated Mobile Pages (AMP)
If the site has a blog, enable AMP. AMP can make blog content easier for Google to prioritize.
AMP creates lightweight versions of pages that provide better mobile experiences. This makes Google want to rank them higher in mobile searches. The result is that the site is easier to find and read.
To learn how to get started, visit Using Amp with Squarespace.
3. Simplify purchasing
Checkout page
Does your checkout page match the rest of your site, and does the checkout experience happen on your domain? If they don’t, you may see customers bounce.
People are more concerned than ever about having their personal information compromised. If there’s incongruence between your site and the checkout experience, people may bounce for fear of getting hacked. To learn how to style this important page on your site, visit Styling your checkout page.
By default, checkout pages happen on a secure Squarespace domain. You can follow these steps to enable Checkout on Your Domain.
Shopping cart
Do customers need a shopping cart? If they typically come to your site to make one purchase, you can make shopping easier for them to shop with Express Checkout.
Express Checkout saves people a step by directing them to a checkout page when they click to buy a product, instead of adding an item to a shopping cart. If customers don’t need to fill a shopping cart, express checkout will help you streamline the shopping experience.
Billing information
Do customers need to indicate which country they live in and do they need to type out their address twice? If you haven’t set a default country and configured the page to automatically use the billing address for the shipping address, they may have to take a few extra steps.
To reduce the number of opportunities to drop off, you can help clients configure these Checkout settings.
Collecting info
Are you collecting unnecessary information? In some situations, you want to encourage people to subscribe to your newsletter or share other personal details. When people are on the move, be mindful that this may add friction.
Learn more about getting started with Squarespace Email Campaigns and creating custom checkout forms.
Ready for M-commerce
Designing for M-commerce is similar to designing for E-commerce, but there are many subtleties that can make or break the experience. When people are shopping on the go, a site should match their momentum. Optimizing a mobile site’s size, content, and checkout is even more essential.
Many Squarespace features make it easier to design for M-Commerce environments. After you’ve gone through this checklist and implemented any necessary changes, your site should be easier for people to find and use when they’re shopping on their phone or tablet.
We can’t wait to see you design the next wave of the web.
