6 tips to optimize your Store for mobile
November 23, 2020
By Alberto Cubero
Art director, Stores
Consumers are spending more and more time on their mobile devices and this is fueling the growth in mobile retail. Mobile has changed the way people shop. In the first quarter of 2020, two-thirds of Store visits were made from a mobile device.1
With such a large number of shoppers using mobile devices to access your Store, it makes sense to prioritize a mobile-friendly design.
We know that with the myriad of screen sizes, resolutions, device types, and browsers, designing for both mobile and desktop customers is complex and constantly evolving. To get you started, we're sharing 6 tips from the Stores design team that will help you optimize your Store for mobile shoppers.
Test on a mobile device
Testing your Store on mobile will help you discover errors that can affect your mobile shoppers’ experience. The best way to make the right adjustments is by discovering for yourself what type of customer experience your Store provides on mobile. Step away from your desktop/laptop computer and access your Store on a phone or tablet. Tap through pages and tiles. Is your Store easy to navigate? Are the texts and graphics easy to read?
To test out your Stores experience:
1. Click Preview > Share Preview in Store builder.
2. Copy the preview link
3. Paste this preview link in an email or anywhere where you can access from your phone (Tip: Include the preview link’s password on a separate line so it’s easier to copy and insert it later on).
4. Navigate through your Store on your mobile device as if you were a shopper, and take notes on what needs to be improved. Is it easy to navigate? Can you find the products or information that you’re looking for? How do your images look on a mobile device?
Use the custom mobile layout option
Because of the screen size difference between a desktop monitor and a phone screen, sometimes a tile design is legible on desktop but not on mobile. Although Stores will automatically adjust images for different screen sizes, this doesn’t mean every element will be legible on mobile, especially if the text looks small on desktop to begin with.
In these cases, we recommend using the custom mobile layout option in Store builder. This allows you to add two separate images, one optimized for desktop and one for mobile. This option is only available for image tiles, and it can be found by scrolling down on the “Editing: Image” panel.
Example of a custom mobile layout:
Make sure content appears in the right order
Mobile screens are narrower and designed for faster scrolling, which means that the order and layout of content is not exactly the same for your Store on desktop and mobile. Mobile Stores use a left-to-right row prioritization for the order of content. See below for an example.
Check your Store on a mobile device to confirm that content is appearing in the right order.
Optimize your header image
Even with custom mobile layout, you can only use a single image for your header. The header image is 3000 pixels wide on desktop and is automatically reduced to half (1500 pixels) on mobile. This dynamic resizing shrinks all graphic elements within the header, including text.
Because of this, please keep in mind the following:
- Try limiting the number of products on a header to three. The more products you use in the header, the more cluttered it will look on mobile.
- The copy in the header should be less than 30 characters so you can increase the size of the text to be legible on mobile and desktop versions without overwhelming the header. For this we recommend a minimum font size of 100pt Arial regular font or equivalent.
Choose an effective call-to-action (CTA) placement
Research has shown readers typically read top to bottom, scanning left to right. Keeping this flow in mind can help you choose an effective placement for your call-to-action (CTA) button on mobile.
Consider the importance of above-the-fold elements, which are the parts of the Store page that are viewable before scrolling down. If a CTA is placed at the bottom of a vertical tile, it is unlikely to appear above the fold, making it less visible to customers.
CTAs on mobile should also have decent spacing around them, or “breathing room,” so it's easy for customers to find and click on it. Having limited space for a CTA can cause it to merge with its surroundings and lose hierarchy and visibility.
Provide alternatives to menu navigation
The navigation menu on a Store appears differently on desktop than on mobile. On desktop, shoppers see multiple tabs along the navigation bar. On mobile, shoppers see a single drop-down menu. See the images below for a comparison.
This is an important factor to consider when it comes to highlighting your top categories or tabs on a Store. Putting those top pages in the menu is one good strategy, but you can also use image or text tiles to create an additional way to navigate your Store. Adding these tiles at the top of your Store, along with a strong CTA, ensures shoppers can find your most important content even if they don’t expand the drop-down menu.
1Amazon internal data, WW, 2020.