This is the second part in a three-part series where we will cover the importance of a mobile-first mindset and how to implement mobile-specific assets.
In Part 1, we outlined why it’s important to move away from a “Desktop-First Approach.” Now we’ll dive into 2 ways to integrate custom mobile assets into your desktop and mobile sites. There are two main methods: the first (and most ideal) method involves utilizing both imagery and code throughout the site, and the second involves custom graphics that are already created with mobile specifications incorporated. Whether you choose Method A or Method B, it’s important to recognize the constraints of mobile, from managing multiple CTAs to customizing product imagery (size, alignment, white space), as these contribute towards creating a frictionless shopping experience.
Method A: Image + HTML Text
Method A is what we would consider the gold standard as it has proven to produce the best results across all platforms. It involves using images for any graphic or photographic elements, and HTML text for any text-based content or interface elements, such as buttons.
This workflow allows you to manage a single codebase, and transform the content for the best possible user experience depending on the screen size. Text and interface elements like buttons fall in line with all existing site styles to make content consistent across screens. The user experience benefits from an accessibility perspective as all headlines, supporting content, and CTAs are readable by screen readers. With this option, you also have the advantage of all content and links being readable by search engines.
The challenge of this approach, however, is that your teams and workflows have to be able to support code-based design and the development for all promotions and dynamic content. The look of the content modules is also affected as they must all follow a similar structural pattern. For some brands this lack of flexibility in typography and content design is not ideal.
Method B: Custom Mobile Images for Promotions
We realize that, for many of you, your marketing teams are not setup to support front-end development and that incorporating an image + HTML text approach may not be feasible – but you can still create mobile assets that are compelling to the user.
This method customizes mobile assets to a more exacting standard. Text sizes fall above a minimum size, call-to-action buttons are suitably sized to make interaction easy, and images are cropped and sized in a way that makes them appealing on a small screen.
By implementing some simple standards you will be able to create and manage your promotional banners and get them live fast. You will also have the flexibility to control your layouts as you see fit. You will, however, lose the accessibility and performance of a modular image + HTML approach.
Here are some basic guidelines for creating a full-width mobile asset:
- Assets that span the full width of a mobile device should be a minimum of 1300 pixels wide at 72 dpi. This will allow for images to display clearly on 2x and 3x devices.
- Text should be no smaller than 40pts
- Call-to-action buttons should a minimum of 132×132 pixels and contain a clear call-to-action no smaller than 40pts
How to Add Mobile-Specific Assets for Mobify
The easiest way to include mobile-specific assets is to add a unique attribute to the image tag, and add the mobile-specific asset URL as the value.
We would recommend using attribute data-src. You can see an example of how it would be used below:
As most desktop images don’t work well on mobile, we don’t suggest falling back to them even if there is no mobile asset. Therefore, if the image tag does not have the data-src attribute, it will not be included on mobile.
Multiple Calls to Action
If a promotion or section has multiple call-to-actions – like the New Arrivals example below – we may want to create a title banner rather than a banner for each call-to-action.
We recommend using the attribute data-title. You can see an example of how it would be used below:
Other Considerations: Product Images
Another area where we see friction on mobile devices is in the creation of product imagery. We often see product photography shot consistently using a common baseline. Baseline photo alignment provides an easy way for the user to see the size and scale differences between similar products. This works especially well on a Product List Page.
However, when the user navigates to a Product Detail Page on a mobile device, the page often feels unbalanced or broken because of the excessive white space above the image. There are two approaches we recommend in reducing this issue.
Custom PDP Product Imagery
The first is to create a custom mobile PDP image with the extra whitespace removed. This allows for the greatest flexibility but does require additional resources and support within the ecommerce back-end.
Programatically Remove Whitespace
The second option is to utilize in-page functionality to detect the white space and to crop the image on page load. This approach is computationally intense and affects ultimate page load times. It also requires additional development and testing during the build phase of the project.
As you can see with our examples above, integrating custom mobile assets really enhances the customer experience with sleek and easy-to-navigate pages that create a frictionless shopping experience. Retailers must understand that mobile presents a variety of constraints that need to be addressed in order to bridge the gap between desktop and mobile sites.
Part 3 of this series dives into more specifics on how to integrate mobile-specific assets using images and HTML.