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.
M-commerce transactions have never been more prevalent in an age where online shopping reigns supreme and mobile phones are 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 optimizing logic and design. In this guide, learn tips to optimize sites for m-commerce and convert on-the-go visitors.
Before diving in
A web design 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 m-commerce success by following the these tips as you build:
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. Research the best option for your workflow and confirm it offers the analytics that are most valuable to you and your clients.
Learn more about troubleshooting 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.
Learn more about checking and reducing page size.
Balance resolution and size
Image size can reduces the speed at which a webpage loads, impacting user experience and the site’s overall performance. While images can play a key part of the site's design, large or heavy images can slow site speed 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 variations 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 prevent text overlapping with other site elements on mobile screens. It makes copy more readable and maintains an effective user experience. To prevent text from overlapping on mobile screens, set letter spacing to at least 0px.
With Fluid Engine, you can create mobile site 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 security 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 mobile browsing in mind to help your clients convert more customers:
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 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 them.
Review the site’s content
Given that mobile visitors are typically on the go, you’ll want to confirm that all of the site’s content is relevant. In a web browsing context, “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. Strategically designing the content of your client’s site to grab 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 knowledge and 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 with 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.
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.
Set up payments
Integrated payment is essential for m-commerce because it simplifies the checkout process, reducing cart abandonment and enhancing user experience by offering a seamless transaction flow. With 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 in the site dashboard, giving you and your client the insight to optimize their site for on-the-go conversion.
Learn more about connecting a payment processor.
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 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.
Billing information
Streamline the checkout process on m-commerce sites by requesting only essential billing information from customers. This minimizes the steps required to complete a 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.
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.
Learn more about setting up express checkout.
Design for m-commerce on Squarespace
Ultimately, m-commerce design 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 Squarespace 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 designers and web design agencies. 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.
