M-Commerce: Designing for Mobile Sites
Originally coined in the ’90s, m-commerce (a.k.a. mobile commerce) encapsulates every purchase made directly from a consumer’s hand with wireless technology. This means that whenever someone buys something from their mobile device, it can be classified as an m-commerce transaction.
M-commerce has never been more prevalent in the age where online shopping reigns supreme and mobile phones omnipresent. This ubiquity is precisely why it's worth exploring, especially as you consider the optimal design for your client’s online storefront. Although you can use many mobile strategies to enhance a site’s appearance on a smaller screen, it’s also important to prioritize structuring your client’s site with content and architecture that are built for speed.
Mobile-ready stores call for optimization of logic and design. In this guide, learn tips to optimize sites for m-commerce and convert on-the-go visitors.
Before diving in
A platform’s features and responsiveness are crucial because they directly affect the user experience. This is particularly apt for m-commerce, where customers expect seamless, efficient interactions on their mobile devices. A site that loads quickly and adapts smoothly to various screen sizes ensures that potential customers can browse, select, and purchase products or services without frustration. Poor responsiveness can lead to higher bounce rates and lost sales, as mobile visitors often abandon sites that are slow and difficult to navigate.
Additionally, optimized functionality and responsiveness enhance the site’s accessibility and usability, making it more appealing and customer-centric. In the competitive m-commerce market, providing a superior mobile experience can significantly boost client satisfaction and conversion rates.
You’ll want to verify your chosen site builder can support responsive sites. Squarespace is designed with built-in responsiveness. This means that any site you create will function beautifully and sufficiently on mobile devices without major adjustments. With Fluid Engine, Squarespace’s drag-and-drop content editor, you can further optimize the mobile version of your client’s site, fine-tuning and enhancing the customer journey to better meet your client’s goals and improve visitor satisfaction.
Learn more about designing responsive sites on Squarespace.
M-commerce checklist
Prime your client’s site for success:
1. Build for speed
Mobile visitors often browse on slower connections. Nevertheless, they expect fast and responsive websites. These steps can help you ensure your client’s site loads quickly.
Get a speed readout
Mobile devices have limited capacity for lag compared to desktop browsers. A page speed tool can help you identify page speed. There are several free and paid tools that you can use to verify the site loads quickly. You’ll want to research the best option for your workflow and confirm it offers the analytics that are most valuable to you and your clients.
Reference our Help Center to troubleshoot site performance and speed.
Measure size of site
Large, resource-heavy sites can significantly slow down load times, leading to a poor user experience and higher bounce rates. Optimizing site size helps with quick loading, smooth navigation, and efficient transactions. Additionally, smaller site sizes contribute to better SEO rankings, as search engines prioritize fast-loading sites, driving more organic traffic. Verify that each page is smaller than 5 MB using your browser or another inspection tool.
Reference the Help Center to learn more about checking and reducing page size.
Balance resolution and size
Image size impacts the speed at which a webpage loads. While they are a key part of your site's design, large or heavy images slow sites down. Ideally, every image should be the smallest size possible without compromising the quality. At most, aim for 500 KB.
After you’ve uploaded an optimal image into Squarespace, the platform creates seven different versions of the image. Squarespace uses these to optimize content for different screen sizes as part of its built-in responsiveness.
Learn more about formatting images for Squarespace sites.
Check image focal points
Depending on where the image is located on the page, some images may be cropped for mobile devices. Verify that all image focal points account for cropping. If not, change each image’s focal point to accommodate these adjustments
Learn more about using focal points to center images.
Check spacing
Adjusting text spacing is crucial to preventing overlapping on mobile screens. It makes copy more readable and maintains a seamless user experience. To prevent text from overlapping on mobile screens, set letter spacing to at least 0px.
With Fluid Engine, you can create mobile layouts that are independent of the desktop layout. This gives you more control over spacing between elements and helps you create more impactful layouts.
Learn more about how sites appear on mobile devices.
Configure SSL and HSTS
Configuring SSL (Secure Sockets Layer) and HSTS (HTTP Strict Transport Security) for m-commerce sites is essential to secure data transmission, protecting customer information from interception and fraud. SSL certificates establish a secure, encrypted connection between the visitor’s browser and the server, fostering trust and increasing the likelihood of transactions. Implementing HSTS further strengthens security by forcing browsers to interact with the site over HTTPS only, even if the visitor initially types “HTTP,” preventing potential attacks. Together, these measures enhance the overall security and credibility of your client’s site, which is crucial for maintaining customer confidence and safeguarding online transactions.
Learn how to enable these settings on Squarespace sites.
2. Design for mobile contexts
While Squarespace’s built-in responsiveness automatically accounts for mobile site visitors, you’ll want to plan each page layout with your client’s audience in mind. As their goal is to convert mobile customers, incorporate the following best practices:
Consider visual strategy
Every image should have a purpose, catering to the site’s overall mobile experience. Use high-quality images and concise, engaging product descriptions to create an appealing and informative shopping experience.
When reviewing your client’s site, see how the images appear when the site’s content is stacked vertically. If a visitor has to scroll too much to locate key information, you may lose their attention and their business.
See how many images you can remove without compromising the site’s quality. This can improve user experience and load times. If the images are critical to your client’s brand message or necessary for customer conversion, consider resizing and refocusing the images.
Review the site’s content
Given that mobile visitors are typically on the go, you’ll want to confirm that all content is relevant. “Speed” applies to both loading time and the amount of mental effort it takes to understand something.
Optimizing the site for all screen sizes and browsers is only part of the challenge. Designing the content of your client’s site to work with the shopper’s divided attention is another.
Optimize navigation
Strong navigation means that the visitor can quickly and intuitively navigate the site. When building for m-commerce, consider how the customer’s context may affect their relationship with the website. They have momentum, but they also need guidance.
For m-commerce sites, use a clear, concise menu that's easily accessible, often through a collapsible “hamburger” icon. Prioritize essential links and categories, placing the most important options at the top to reduce scrolling.
Implement a header or footer that offers quick access to the cart, search, and account functions. Additionally, incorporate breadcrumb trails to help users trace their steps and maintain context while browsing. On mobile, breadcrumbs appear when visitors click the category tags on a store landing page. Breadcrumb navigation doesn't appear when visitors click a product directly on a store page.
Learn more about styling site navigation.
Enable AMP
If your client’s website has a blog, enable Accelerated Mobile Pages (AMP). AMP can make blog content easier for search engines to prioritize by creating lightweight versions of pages that provide better mobile experiences. This makes search engines want to rank them higher in mobile results, resulting in a more readable and discoverable website.
Learn how to use AMP with Squarespace.
3. Simplify purchasing
Now that your client’s content and pictures are optimized for on-the-go browsing, the actual purchasing experience should be of similar quality.
Checkout page
While the checkout page should match your client’s overall brand identity, use a clean, intuitive layout with large, tappable buttons and clear calls to action to facilitate seamless navigation and purchasing. Simplify the checkout process by minimizing form fields and incorporating mobile-friendly payment options like digital wallets and one-click payment methods to streamline transactions. Regularly test the mobile shopping experience across different devices and browsers to identify and address any usability issues.
Learn more about styling checkout pages.
Set up payments
Integrated payment is essential for m-commerce because it streamlines the checkout process, reducing cart abandonment and enhancing user experience by offering a seamless transaction flow. Using Squarespace Payments, you can simplify the payment process with built-in security features and support for various payment methods, creating a trustworthy and efficient shopping experience for customers. The tool also makes it possible to manage and track sales directly from the platform, giving you and your client the insight you need to optimize their site for on-the-go conversion.
Learn more about connecting a payment processor.
Shopping cart
If your client typically sells one product or service at a time, implementing express checkout is a great way to simplify the checkout process and reduce cart abandonment. Express checkout saves customers a step by directing them to the checkout page when they click to buy a product, instead of adding an item to a shopping cart. If your client’s customers don’t need to fill a shopping cart, express checkout can streamline the shopping experience.
Billing information
Streamline the checkout process on m-commerce sites by requesting only essential billing information. This minimizes the steps required for customers to complete their purchase. Necessary information typically includes the customer’s name, billing address, credit card number, expiration date, and CVV code. By reducing the amount of information required, you can decrease the likelihood of cart abandonment and improve the overall user experience.
Learn more about customizing the checkout experience.
Ready for m-commerce
Ultimately, the design of m-commerce heavily relies on the same effective techniques used for creating ecommerce websites. Nevertheless, there are nuances that can greatly affect the shopping experience for mobile users. Being aware of these subtleties is crucial for achieving success in m-commerce.
Explore more ecommerce strategies with the following resources:
This article was originally published March 2, 2020. It has since been updated.
Want more?
Check out Squarespace Circle, Squarespace’s program for professional web designers, developers, digital entrepreneurs, and creatives. Along with exclusive content, discounts, and other perks, Circle brings professionals together from across the globe to exchange advice while connecting with new clients and collaborators.