[Part 2] Mobile-Specific Assets: 2 Methods for Integrating Custom Mobile Assets

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.

Image + HTML Text

 

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.

Text and interface elements

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.

Custom Mobile Banner Graphic

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
Minimum image size and text specifications

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:

Using attribute data-src

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.

Multiple CTAs

We recommend using the attribute data-title. You can see an example of how it would be used below:

Attribute data-title

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.

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 imagery

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.

 

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.

Related Articles