Automatically Adapt Your Creative to the Mobile Screen
Responsive email adjusts automatically to fit different screens.
As the amount of folks who view their email on mobile devices is trending upwards from 10%, now’s the time to alter your email design and production strategy.
Over the last few years, mobile devices have plagued email marketers with design challenges. The differences in technology and screen sizes between a PC, a Blackberry, a Tablet and an Android complicate the design process—and the user experience. But the fact is, consumers own more than one device and will view and interact with the same message on all of them. Consumer behavioral shifts challenge marketers to display the appropriate version to the same customer regardless of the device.
In response, designers have learned to optimize email creative for mobile devices through various techniques, such as reducing the overall width of a design, spacing out navigation for easier use on a small screen or segmenting and versioning for mobile users. However, although these tactics do configure our creative closer to the mobile environment, they fall short of dynamically adapting it to whichever screen the recipient is using.
Enter responsive design for email!
Email that’s developed to be responsive uses a CSS attribute called media query. This code enables email creative to not only identify the screen size of the device it’s being viewed on, but also dynamically format it to fit that specific screen. For instance, you could open a campaign on your desktop monitor at work, and it would appear as normal, but then you could view the same email again on your mobile device on the train ride home, and see the mobile version.
This snippet of CSS code resides in the <head> section of the HTML document, and provides device-specific rendering instructions, while the <body> is coded to display the wider design for a computer. Unlike their desktop counterparts, most email applications on mobile devices understand how to use CSS and, therefore, easily swap to the appropriate version. On the other hand, desktop email clients will disregard this section of code, and render the normal version as usual.
Responsive design is the future of email creative, and its benefits are already being implemented. It may take a little forethought on the initial design direction, but this technique can really increase your email design’s ability to communicate relevantly across multiple devices and formats. To learn more about integrating this valuable tool into your email strategy, contact email@example.com.