[Part 1] Mobile-Specific Assets: Why Desktop-First Won’t Cut It

This is the first part in a three-part series where we will cover the importance of a mobile-first mindset and how to implement mobile-specific assets. 

As mobile usage continues to rapidly grow, it’s no longer sufficient to rely on a “Desktop First Approach.” This type of approach doesn’t optimize websites for today’s consumers who are browsing on smaller screens and have shorter attention spans. You must shift to a mobile mindset to engage these consumers and increase your overall conversion rates.

To begin to understand why a “Desktop First Approach” is no longer sufficient, it’s important to realize how many touch points a customer is now interacting with on a daily basis. Our story starts with Cindy shopping while waiting for a friend at a local coffee shop. She types a favourite brand name into Google search, taps on the top result, and lands on a classic mobile ecommerce homepage. At first, her eye is drawn to the bold colours, strong imagery, and recognizable brand name that Cindy has come to trust. As she begins to scroll down the page, a promotion catches her attention: a sale for the season’s latest shoes. The photography is great, the headline is nice and clear – Spring Forward! it reads – however, the details of the promotion are lost because the text is just too small. It’s unreadable unless she really leans in close and squints, so Cindy decides to move on; it’s just too much hassle. For most semi-engaged users, the amount of effort it takes for them to look at and consider your promotion is not worth it, and this is a lost opportunity for retailers and brands.

We often see customers not engaging with promotional content on mobile. A mobile interface is physically constrained by the size of the device. Content that is simply “shrink-to-fit” can cause a great deal of friction for the user. Here are a few examples of images that were not optimized:

Examples of instances of mobile-specific assets were not created.

Incorporating intentional, mobile-first designs into your workflows creates friction-free experiences so the customer is more likely to engage. We realize that sometimes Marketing and IT resources can be tight, but this shift to optimizing everything for mobile is important for the your customer experience.

Thinking About Mobile-First

Why Should You Have a Mobile-First Mindset?
A layout that works well on desktop will not work on mobile. We instinctively know this, but often don’t stop to ask why. Desktop is fundamentally a landscape canvas, where the user scans content from left to right as they move down the large screen. Conversely, a mobile user is constrained by a tall, narrow viewport and little ability to scan left to right.  Adapting each platform’s design is the only way to create the best possible experience for both users.

At its core, a mobile-first approach is about prioritization. Content is stacked, meaning that one piece of content or component must be more important than another.

You are forced to prioritize:

  1. Navigation Header
  2. Major Promotion
    • Image
    • Headline
    • Supporting Copy
    • CTA
  3. Seasonal Promotion
  4. Category Promotion
  5. Category Links

This idea of prioritization is what makes mobile-first design so powerful. Because of your viewpoint constraint, and limited attention span from the user, you have to keep your messaging short, concise, and to the point. This forces you to lose all the cruft from your interfaces. It forces you to keep your messaging simple, your call-to-actions succinct, your interactions obvious, and your data entry fast. In turn, these actions benefit your desktop experience by not allowing you to fall into the trap of filling the space with excess information, competing messages, or convoluted interactions.

Examples of clear, succinct call-to-actions

Mobify believes every screen deserves special attention; our focus is to help you build the best user experience possible. We believe that every image asset you have on your desktop site deserves to have a supporting custom mobile asset to match. Sometimes the differences may just be the way the image is cropped. In other cases a large landscape photo with great typography overlayed will be transformed into a square image with supporting content below.

How Do I 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 recommend using attribute data-src. You can see an example of how it would be used below:

<a href=”/URL/to/promo” title=”Shirt and Top Sale”>

<img border=”0″ alt=”Shop Women”

src=”/URL/to/women/shirt-and-top-women.jpg”

data-src=”/URL/to/women/shirt-and-top-women–mobile.jpg”>

</a>

As most desktop images don’t work well on mobile, we don’t suggest falling back on 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.

Now that you understand the importance of moving away from the desktop mindset into one where desktop and mobile are aligned, read on the Part 2 where we dive into the 2 different ways to optimize your assets for mobile.

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