Tips for hiding, stacking, adjusting and swapping elements within marketing emails.
A month ago, I completed a project for Fairytale Brownies, who requested some help improving how their promotional email messages render on mobile devices. Prior to the updates, the Brownies emails looked adequate on smaller screens, but some elements like navigation, promotional text and product graphics were difficult to view on a smartphone. Using responsive properties, Fairytale Brownies now is able to deliver promotional messages to loyal customers and subscribers that look great on desktops, tablets and smartphones.
The following is a recap of the project with some tips you can employ when updating your emails for mobile devices.
If you’d prefer to forgo the technical stuff, you can also skip down to the before and after links.
The Primary Issue
You may have heard. People open emails on their mobile devices. Go figure.
Depending upon which study you prefer, roughly 48%, 51% or 66% of emails are opened on mobile devices. No matter what the percentage of mobile opens is for your list, chances are it is substantial enough to warrant optimization of the mobile email experience.
Here is what the Fairytale Brownies email looked like on both iOS and Android devices. Now do you see why they wanted to improve? While there are several more views to consider, the email is difficult to read on iOS and does not scale on Android.
Task List
1. Responsive Email
The primary task for this project involved including responsive design properties and code that modify the email template for smaller screens. All of the alterations from desktop to mobile clients (or from larger screens to smaller screens) rely on a collection of code that detects screen size and triggers changes to the email layout. This code is called the @media query, and it resides in the <head> of the HTML file. Here is a very simplified version of what it looks like.
Each line of code defines a modification that should occur when a class is called. Please note that the class names (i.e. hide, block_wrap, center, etc.) can all be customized but the other elements of the code should adhere to standard CSS syntax. For example…
→: HIDE an image, a string of text or an entire table cell
→: take two table cells that sit side by side in desktop layout and STACK them, one on top of the other, in the mobile layout
→: CENTER an element on the mobile screen
→: modify the WIDTH of a table cell or image to 320 pixels, a common width for many mobile screens.
→: change the FONT SIZE for text to 14 point to improve readability — this is the minimum font size for text on small screens (some prefer 16 point or greater as a minimum)
Once all of the responsive classes are defined in the <head>, you can declare them in appropriate areas of the <body>. Here is some sample code for an image that will be hidden on mobile screens.
<img src=“https://example.org/images/disappear.jpg” class=“hide”>
2. Gmail Offers for the Grid Layout
In addition to altering the email layout for smartphones and smaller screens, Fairytale Brownies also requested an update to include some code that would improve the way their emails appeared in Gmail’s promotion tab in the grid view. Using this resource, we were able to create a short script that includes references to the company name, website, Google+ URL, and a unique image. Once created with the Gmail Offer tool, the code can simply be pasted into the HTML file after the opening <body> tag.
3. Text-Based Navigation & Bulletproof Buttons
Every Fairytale Brownies email includes a line of navigation at the top of the layout. Each of these buttons was a unique image, which might not render in every client. To solve this problem, we modified the navigation to text with a similar background color.
Navigation Before:
Navigation After:
By moving from image to text, Fairytale Brownies can ensure that this important element of their design is always seen by every recipient.
They had also been using images for their “buy now” call to action buttons like this one:
To solve this problem, we used the Bulletproof Buttons tool from Campaign Monitor. This helpful utility allows you to enter in text, link, button width, color, border attributes and more to output a code snippet that will work in every email client without fail. Coding buttons on your own can be tricky due to all the rules placed by different email clients. Use this tool instead, and just copy/paste the code snippet into your HTML file.
4. Client Testing
One of the most crucial steps in this process is to ensure the email will render appropriately in all major email clients. To handle this task I consistently rely on Litmus, which allows me to upload the HTML or send a staging message to a test email address. Their interface provides a view of the email on desktop, mobile and web-based email clients. If something is not quite right, I can make some adjustments to the code and re-upload to a new version. If you design and code email, you must use an email client preview tool like Litmus or Email on Acid. Seriously – you have no excuses.
Hint: I find that Outlook 2007, Outlook 2010, Outlook 2013, Gmail and Yahoo Mail are most likely to experience issues. Also, Gmail’s mobile app does not recognize the @media query. Use an email client CSS support guide like this one to determine what the specific issue might be.
The Four Layouts
Fairytale Brownies asked that I update four different layouts. You can see an image of each below with its responsive alterations and a description of how the template was optimized.
Version 1
Unique Elements:
- Two primary images for the main offer
- Two secondary offers
- A promo box
Responsive Alterations:
- Stack the logo on top of preheader items
- Hide three out of six navigation buttons
- Stack the main offer images one on top of the other
- Stack the secondary product offers one on top of the other
- Adjust width and height of the promo box
- Resize and stack social sharing and legal elements
Each of these modifications relied upon the @media query explained previously. Stacking items involved use of the display:block CSS property. To hide items, I used the display:none CSS property. Any link used within the desktop version that would be too difficult (or small) to tap on a smartphone screen was either resized or hidden from mobile viewers.
If necessary, images were assigned their own class in the @media query to adjust width and height accordingly. For example, the following code could be used to modify a promo image.
In the @media query:
@media screen and (max-width: 600px){
*[class].promoimage{ width:300px !important; height:180px !important; }
}
In the <body> code where the promote image is referenced:
<a href=“https://brownies.com”><img src=“https://brownies.com/image/PROMOxyz.jpg” border=“0” width=“560” height=“336” class=“promoimage”></a>
By using the class=“promoimage”, the PROMOxyz.jpg graphic will change from its original size to a 300×180 pixel width/height on smaller screens.
Other small alterations were made to adjust spacing and font sizes.
Version 2
Unique Elements:
- Primary promotion graphic
- Four secondary product offers
Responsive Alterations:
- Stack the logo on top of preheader items
- Hide three out of six navigation buttons
- Adjust width and height of the promo box
- Stack the secondary product offers one on top of the other
- Resize and stack social sharing and legal elements
Similar to Version 1, this second template required some resizing, stacking and hidden elements. Similar CSS properties were utilized and classes were defined throughout.
Version 3
Unique Elements:
- Two primary images for the main offer
- Two secondary offers
- A promo box
Responsive Alterations:
- Stack the logo on top of preheader items
- Hide three out of six navigation buttons
- Stack the first two main offer images one on top of the other
- Resize the third main offer image and stack it under the first two main offer images
- Stack the secondary product offers one on top of the other
- Adjust width and height of the promo box
- Resize and stack social sharing and legal elements
The third version was very similar to the first. The primary difference with #3 was the use of three separate images that combine to create the main promo offer.
As these three unique images are stacked on the mobile screen, it is important that there is no overlap with the images and text used within each graphic. They are essentially three unique elements. Because many of the images used by Fairytale Brownies bleed over (see example below with three unique images displayed together), we took a different approach with the fourth and final template.
Version 4
Unique Elements:
- One singular image for the main offer
- Two secondary offers
- A promo box
Responsive Alterations:
- Stack the logo on top of preheader items
- Hide three out of six navigation buttons
- Hide the main offer image for desktop views and replace it with another image on mobile devices
- Stack the secondary product offers one on top of the other
- Hide the promo box for desktop views and replace it with another image on mobile devices
- Resize and stack social sharing and legal elements
This image swap process appears to be simple but actually required a few iterations to get it right. Using Litmus, I was able to test how the image hide/replace code performed in each email client. Here’s a recap of the three steps it took me to get it right:
Attempt #1
<img src=“DesktopImage.jpg” class=“hide”>
<img src=“MobileImage.jpg” style=“display:none;” class=“show”>
Here we have two images referenced in the code. The first image is for the desktop layout. The “hide” class is used to make the larger image disappear on mobile screens. The second image is for mobile recipients. The display:none style attribute is used to hide it immediately, but the “show” class (defined in the @media query with a display:block property) should supersede the style that is called and enable the correct image to render on mobile devices. Here is a quick recap of the results:
Most Email Clients: Success
Outlook 2007, 2010, 2013: Failure
Gmail: Failure
The mobile version of the email rendered perfectly on every smartphone client tested (with the exception of the Gmail mobile app of course). However, both the desktop AND mobile images showed in Outlook and Gmail desktop clients, so the display:none style attribute had no impact.
Attempt #2
<img src=“DesktopImage.jpg” class=“hide”>
<img src=“MobileImage.jpg” style=“display:none;” width=“0” height=“0” class=“show mobileimage”>
For my second try, I included both width and height for the mobile image and set them to zero, hoping that this would not allow the image to show on desktop. In addition to the show class, I added in a mobileimage class in the @media query, which defined the correct width and height of the mobile image, thus ignoring and supplanting the width=“0” height=“0” declarations.
Most Email Clients: Success
Outlook 2007, 2010, 2013: Failure
Gmail: Success
We’ve made some progress here with Gmail as the addition of zero width/height and the mobileimage class defined in the @media query resized the mobile image successfully. However, both desktop and mobile images still showed in the Outlook clients. Dammit.
Attempt #3
<img src=“DesktopImage.jpg” class=“hide”>
<img src=“MobileImage.jpg” style=“display:none;” width=“1” height=“1” class=“show mobileimage”>
I used a slightly modified approach here, but updated the mobile image width and height to a single pixel.
Most Email Clients: Success
Outlook 2007, 2010, 2013: Success
Gmail: Success
My theory is that with Attempt #2, Outlook chose to ignore the zero width/height declarations, likely considering them errors, but did not ignore a single pixel image in the third attempt. So in this case, the mobile image is present in the desktop layout; it is just minimized to a one pixel wide by one pixel high, making it impossible to see in the desktop layout.
If you are looking to hide some images used in desktop email clients and replace them with others for mobile email clients, use code similar to what I have provided above in Attempt #3.
Here is the final side-by-side comparison that shows how the mobile version changes from the primary desktop layout:
Interested in a before/after comparison of the Fairytale Brownies emails? See the links below. By manually adjusting (or sliding) the width of your browser to a more narrow layout (if reading this on a desktop), you can see how the new email responds.
Special thanks to Hilary Lee and Colleen Flynn at Fairytale Brownies for always being so great to work with and allowing me to share this project with you. If you have never tried a box of brownies from the crew at Fairytale, do yourself a favor. They are unbelievably tasty and make terrific gifts. Their emails aren’t too shabby either.
I just now saw this. Very nicely done! I have subscribed to your blog now as well.