Mobile has emerged as the new frontier for marketers, developers, and designers alike. While it has become standard practice across the web, it's been slow to enter the email marketing sphere due to the rigid coding structure that typically accompanies email.
I tackled this important problem by creating a flexible mobile-first email framework that works with any layout desired, across almost every email service provider (Yahoo, Outlook, etc).
Desktop
In this use of the framework, the desktop view displays the cars in a 3x1 format, with each section divided by a banner that extends to 80% of the email's width. Names and links are displayed below each car image in order to utilize space efficiently.
Mobile
When viewed on a mobile device, the email is reformatted into a 1x3 layout. The banners now expand to the full width of the email and the cars' names and links swing up from under the image to its right side. By reshuffling not only the cars, but the names/links as well, valuable space goes unwasted and the user is provided with a better email experience.
When viewed on a mobile device, the email is reformatted into a 1x3 layout. The banners now expand to the full width of the email and the cars' names and links swing up from under the image to its right side. By reshuffling not only the cars, but the names/links as well, valuable space goes unwasted and the user is provided with a better email experience.
For the few email providers where responsive emails don't work (like Gmail), the mobile version of the email is displayed on both mobile and desktop viewports.
This framework is flexible enough to take on any layout desired, as well as any type of responsive transformation. It's been used to transform a 3x1 layout into a 1x3 layout, 3x4 layout into a 2x6 layout, and 2x3 layout into a 3x1 layout. There's also no limit as to which sections of the email can be transformed. It really is an all-inclusive solution for responsive email.
If you'd like to learn more about the framework or how else to apply it, shoot me an email!
