Courtesy of Brett Gardner
According to a recent 2012 study by Knotice1, email open rates on mobile devices are skyrocketing.
“In the first half of 2012, steady growth in mobile email open rates continued. During that time, 36.01% of all emails were opened on a mobile device (phones and/or tablets), which is an increase of 32% from late 2011 numbers of 27.39%. This shows the steady, strong increase in mobile open rates continues, which lends further evidence to the accelerating rate of mobile adoption as previously forecast.”
While an email can look awesome in your inbox, often its not the same story when squeezed into your smartphone’s relatively smaller screen. Designing emails that appear readable on mobile devices becomes critical to get your message across effectively and increase conversion rates.
Eloqua is hard at work on our mobile strategy and product enhancements for the platform. In the meantime, you can start designing mobile-friendly emails in Eloqua today that scale gracefully between desktop and smartphone email clients. We've added a new Mobile Template Gallery that includes e-mail templates that will dynamically adapt for optimal viewing across a variety of devices. To get started:
1. Create a new email
2. In the template chooser, you will see a new "Eloqua Mobile" option under Template Gallery.
3. Click on a template to view additional details.
4. Select Choose to use the template to start personalizing your own mobile friendly email. Note: Instructions on how to use the templates effectively can be found directly in the body of the email for your convenience.
The rest of this post provides a behind the scenes look at responsive email design and tips and techniques you can use to develop your own mobile templates from scratch in either Eloqua’s rich editor or using an editor of your choice such as Dreamweaver.
Creating a Mobile-Friendly Email in Eloqua’s Rich Editor
1. Create a new email
2. Add a textbox the width of the canvas
3. Edit the textbox by adding text and inserting images
Important Note: Dynamic and Shared content cannot be placed within a text box. If you would like to add dynamic or shared content, make sure the elements are stacked vertically, and also sized the exact width of the canvas.
4) Add a little CSS under Tools
<style type="text/css">
@media only screen and (max-width: 600px) {
/*CSS styles here will be applied on supporting mobile devices*/
table, div {
width:100% !important;
max-width: 600px !important;
position:relative !important;
height:auto !important;
overflow:hidden !important;
top:0px !important;
}
img {
max-width:100%;
height: auto !important;
}
}
</style>
The CSS snippet utilizes a media query to adjust table widths and image sizes on mobile devices so that the email is scaled down to fit smaller screens, yet preserves text sizes for optimal readability.
*Note: If you add padding to your textbox under Tools, you need to adjust the width override in the CSS snippet above to less than 100% to account for the padding (i.e. 96%).
The Results
Desktop Email Client (e.g. Gmail)
Mobile Email Client e.g. iPhone WITHOUT CSS Media Query Mobile Email Client e.g. iPhone WITH CSS Media Query
This simple approach works well to create mobile-friendly, 1-column email messages in Eloqua. For more complex mobile-friendly email designs, certain responsive design techniques and best practices can be effective, which are covered below.
Creating a Mobile-Friendly Email Using an Editor of Choice
If you would like to design a mobile-friendly email in an editor of your choice (e.g. Dreamweaver), to import and use in your Eloqua campaigns, there are best practices you can follow to ensure solid markup and consistent rendering on mobile devices.
Here is a list of articles with great best practices, markup tips and examples for creating mobile-friendly emails.
- http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/
- http://www.emailonacid.com/blog/details/C13/designing_html_emails_for_mobile_devices
- http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
- http://www.campaignmonitor.com/blog/post/3564/applying-fluid-layouts-to-html-email-design/
With any method you choose, make sure to test rendering of your email on multiple actual mobile devices and clients.
Resources