Case Study: Responsive Email Design
The development of smartphone and tablet devices has ushered in a new age of receiving information and content faster. Companies are using email marketing to send upcoming events, information and new product release to their followers and clients. As some of you may know that web content needs to be responsive, adapting to the size and dimension of the display screen, or you are forcing the customer to expand or compress the window with their fingertips. I know, “it is not that difficult to maneuver the screen and adjust to your liking” but from experience, most customers will respond to content that is already adjusted.
Responsive Email design is relatively new to the email design, but it is not new to web design. Responsive email design is gaining in popularity with over 47% of emails opened are on a mobile device. Over 80% of people will delete an email if it doesn’t look good on a mobile device. The foundation that responsive design is built on is CSS3 and the use of fluid design.
of people delete an email if it doesn’t look good on their mobile phone
At DOME, we are always experimenting and trying to implement responsive email designs in our email marketing campaigns. Whether it is weekly email messages or Cross Media Campaigns, we are trying to provide the best, fluid designs as possible. I want to outline our process in designing an email message, and provide our commentary.
STEP 1: Planning email campaign
When DOME receives a request to produce an responsive email design for a clients campaign, we start by outlining the design, determining the hierarchy of the design. It is always key to develop an email with your customer usage in mind. We have had different format of design, from splicing a photoshopped layout and adding links to each section, to providing live content with images next to or on top of the content.
Some of the issues we have come across here are trying to determine what will be live text and what will have to be image based text. Most email clients will not allow the use of background images and will throw them out of your design from the start.
When determining the responsive layout, you will have to determine the way the images and content will stack when the media query is in effect. The content will always stack in order from left to right, top to bottom. We made it a clarification from the start that if they want the image on top, the image needs to be on the left. This allowed us to keep our media query short and not have the email based solely on the query stipulations.
STEP 2: Design and Coding
When you finish with your planned email layout, comes the fun part, design and coding. Now a lot of articles online will tell you that certain email clients do not read responsive email CSS3 and will toss them out from the design. Mobile applications like: Gmail, Yahoo , and some Windows Phone OS do not accept responsive email designs.
| iPhone Gmail app | iPhone Yahoo! Mail app |
| iPhone Mailbox app | Android Yahoo! Mail app |
| Android Gmail app | BlackBerry OS5 |
| Windows Mobile 6.1 | Windows Phone 7 |
| Windows Phone 8 |
Now when I design the table, I found that it is always best to set the width of both the table and each column. Use a fluid design method and try not to use pixel widths. This could force weird scaling to the document. Use percent widths will always make the image fill the table section.
The next issue I have experienced is determining the exact size of the image. This is where you can use both pixel size or percent size. But make sure you use the align attribute for each column and table to place the image exactly where you want it.
STEP 3: Testing
Make sure you always use some form of email testing client, Like Litmus, to get an accurate email test for each email client available. The clients I always check, no matter how many times I refine my document, are Outlook 2007, 2010, 2013, Gmail browser client, and Yahoo browser client.
Outlook will always be an issue. Outlook adds a 25 pixel buffer for each table. If you have tables next to each other, you will see an added space that is not in the code. It can create a lot of issues with your design and can cause your tables to stack. Some web clients will ignore you CSS and I always recommend using inline CSS together with a CSS in your head section.
Conclusion:
If you are planning a design for a responsive email, remember to test, test, test and test until you are completely satisfied. Not every email client will accept your design how you want it, but it will help you refine to have something acceptable in all clients.
If you are interested in building responsive email designs for your campaigns, Litmus provides a great way to test your design and has a great amount of resources and inspiration for your design.
Comment below, anything I have missed or if you have your own stories about email design.
