[Part 3] Mobile-Specific Assets: A How-To Guide

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

Part 1 and Part 2 detailed the importance of optimizing mobile assets and 2 methods for improving the end user’s mobile experience. This third and final segment is a how-to guide for implementing mobile-optimized assets using using images and HTML.

How to Implement Mobile-Specific Images and HTML

In order for an “Images and HTML” approach to be implemented, the assets for the homepage promotions need to be delivered somewhat differently than usual. Rather than having the text and call-to-action baked into the image, they need to be delivered as separate pieces, so that they can be repurposed on mobile.

To ensure this method is successful, the most important thing is consistency. Though the design can change anytime, the structure of the desktop code must remain the same so that Mobify’s code will be able to pull it incorrectly.

Hero Banner

The homepage hero banner component would consist of three parts:

  • Image – The image that would serve as the backdrop for the promotion.
    • No information or text should be included/baked into this image.
  • Headline Asset – The headline for the section.
    • The image would need to have a transparent background (a PNG or a SVG would work).
    • On desktop, this image would be sized and positioned with CSS.
    • We recommend that this be larger than what’s needed for desktop so the resolution will be clear and crisp for mobile.
  • Call to Action – These links lead to the promotional pages.
    • On desktop, they would be sized and positioned with CSS.
    • You can use an image for this, but preferably it would be real text.
    • If you were to use an image, we would require that each image uses the alt attribute on the img tag with the text so we can use that for mobile (ex. alt=”Shop Women”).

Code Example

Note the classes and alt attributes on the CTA and headline images. Note, the CSS doesn’t need to be inline; if it’s reusable, feel free to add it to your CSS files.

Code Example - CTA and headline images

Category Banners

Category Banners

A category banner has a somewhat different structure, but it would be structured very similarly to the hero banner and would consist of the same three parts:

  • Image – Instead of functioning as the entire backdrop of the component, this image would function as the background for the headline.
    • No information or text should be included/baked into this image.
    • On mobile, rather than having the image full width, we would probably use CSS to crop the image.
  • Headline Asset – The headline for the section.
    • The image would need to have a transparent background (a PNG or a SVG would work).
    • On desktop, this image would be sized and positioned with CSS.
    • We recommend that this be larger than what’s needed for desktop so the resolution will be clear and crisp for mobile.
  • Call-to-Actions – These would be the links that would lead to the listing pages.
    • On desktop, they would be sized and positioned with CSS.
    • You can use an image for this, but preferably it would be real text.
    • If you were to use an image, we would require that each image uses the alt attribute on the img tag with the text so we can use that for mobile (ex. alt=”Shop Women”).

Code Example

Note the classes and alt attributes on the call-to-action and headline images. Note, the CSS doesn’t need to be inline; if it’s reusable, feel free to add it to your CSS files.

Code example

Category Blocks

Category block example

These blocks would be slightly different from the components above:

  • Image – This wouldn’t serve as the backdrop, more of a thumbnail.
    • No information or text should be included/baked into this image.
    • The call-to-action should be separate from the image.
    • The image should be larger than it will appear on desktop, and then resized with CSS. We would need a higher resolution for mobile so it doesn’t appear blurry.
  • Call to Action – This should be a separate piece and positioned below the image.
    • You can use an image for this, but preferably this would be real text.
    • If you were to use an image, we would require that each image uses the alt attribute on the img tag with the text so we can use that for mobile. (ex. alt=”Shop Women”).

Code Example

Note the classes and alt attributes on the CTA and headline images. Note, the CSS doesn’t need to be inline; if it’s reusable, feel free to add it to your CSS files.

Code sample

Additional Promotions

Additional promos examples

Additional promos would be structured much like the hero banner.

  • Image – The image that would serve as the backdrop for the promotion.
    • No information or text should be included/baked into this image.
    • The image should be larger than it will appear on desktop, and then resized with CSS. We would need a higher resolution for mobile so it doesn’t appear blurry.
  • Headline Asset – The headline for the section.
    • A transparent png of the text would be required.
    • On desktop, it would be sized and positioned with CSS.
    • We recommend that this be larger than what will be needed for desktop so that its resolution will be clear enough for mobile.
  • Additional Text – The additional text could be an image or real text, and positioned with CSS.
    • The additional text should not be combined with the headline asset.
    • Currently, we don’t recommend pulling this into mobile because it would be difficult to predict how much it contains, how to position it, and how big it will be.
  • Call-to-Action – This should be a separate piece and positioned below the image.
    • You can use an image for this, but preferably this would be real text.
    • If you were to use an image, we would require that each image uses the alt attribute on the img tag with the text so we can use that for mobile (ex. alt=”Shop Women”).

Code Example

Note the classes and alt attributes on the CTA and headline images. Note, the CSS doesn’t need to be inline; if it’s reusable, feel free to add it to your CSS files.

Code example

Conclusion

Creating an amazing mobile experience is imperative as increasing mobile conversions can have a significant business impact. We hope that this series has been useful to you and your team. Feel free to contact your Customer Success Manager or Support Team for more information.