EN
Welcome to Clocking Dollars, a production-centered blog series that provides a look into the out-of-the-box solutions we’re creating to help clients maximize budgets, achieve faster results, and improve quality in less time.
Because at Assemble, we use a strategic blend of research, world-class experience, and lots of testing to create new tools and processes that optimize our clients’ budget, so they can achieve all their campaign goals regardless of their unique circumstances and needs.
In this very first article, we’re talking all about email images for mobile.
The Problem:
Anyone involved in email development knows it’s an art, not a science. No matter how much research you do, there’s no one final answer to address all the formatting issues that any marketer could possibly face. So instead, we like to be prepared for all of it with multiple solutions that cover the common problems they face.
When it comes to converting a desktop email to a mobile version, there are a lot of things that can go awry. Your image could get distorted, your text becomes unreadable, it could show up twice, or it may not show up at all. And if you don’t have a mobile-friendly version already prepared, you’re forced to create one from scratch — adding time and money to the process.
Our Solution:
Best case scenario, you have a mobile-friendly email design with mobile-friendly images. But we don’t always get so lucky. So in addition to offering a faster way to work with responsive emails, we also came up with alternatives.
Responsive
Pros: Instead of having to build and test a mobile version manually, we’ve created a tool, known as BAM (Build-a-Mail), that resizes the images to the right specs automatically. We simply drop the original image code into a smart text editor that regurgitates the right code resized for mobile. And it’s been tested thoroughly so we know it will render flawlessly on mobile devices.Cons: Even though a responsive email design may render properly, it doesn’t mean those images are optimal on a much smaller scale. So while the original image quality may stay intact, the font could be too small to read or too hard to click on a mobile screen, which can pose accessibility challenges as well.
Image Switch
Pros: When a client has a second version of their desktop asset specifically created for mobile specs, we can set a rule for the browser to “hide” the desktop image and show the mobile image instead when the viewport (or device) is smaller than 500px. This comes in handy when images include data or charts that a standard responsive resize would make difficult to read.Cons: The client will have to provide both a desktop and mobile design, meaning they have some extra initial work to do. If they don’t have it, we’ll either have to rework the image by removing pixels or create a whole new image.
And when we have a second graphic, the data has to be reordered to accommodate the new specs. You may have to repeat code, which poses the risk of the image showing up twice depending on the final email client. This is often possible when the email is forwarded by a user to another user with a different client, which may manipulate the code.
Live Text
Pros: We can create “live” text on top of a background image, so as the image gets resized on different viewports, the text overlay remains the same, eliminating the risk of distortion. Our team has done extensive testing on Litmus to confirm it renders properly across almost all email clients, while also enabling us to maintain the same font size as desktop and simply apply CSS styles to manipulate it. This option also allows us to get more creative without having to duplicate code, facilitating more innovative solutions.Cons: While this option usually addresses all the issues of #1 and #2, it does take some additional time to test and ensure everything is working correctly. (Don’t worry, this delay is something we’re working to address in the next few months.)
Conclusion:
So how do you know which to use? We like to think of your options as less like a backup plan, and more like a best-fit solution. The right choice is determined by your specific design, placements, and needs.
Choosing #1: If you have a design that renders properly on both desktop and mobile, we can essentially build the mobile version automatically in the BAM framework, requiring less time and resources than any other option.
Choosing #2: If you have a desktop and mobile version of your design or converting the design to mobile is an easy adjustment that reads clearly, this option is a smart way to better ensure it displays clearly on all devices.
Choosing #3: If there is more complexity to the image than option #2 can accommodate or you want to be able to get more creative across devices, then this option is the way to go. It will just require some additional testing.
By providing our clients multiple options to optimize their mobile email images, we can be sure to always deliver — no matter what their unique circumstances. And by optimizing our own processes and keeping our code super clean, we can better expedite the work involved for any of our developers that have to step in. Our investment into research and development never ends, so neither does the expansion of our capabilities. Don’t be surprised if this list has doubled by the end of 2024! Stay tuned.