Get High CTR with Responsive, Mobile friendly emails

¹By end of 2013, 50% emails will be opened on mobile devices and tablets. Moreover, 69.7% emails which are poorly visible on a mobile device are deleted immediately. This clearly indicates the need of a mobile friendly, responsive email design that works on all devices, regardless of screen size and delivers clean user experience. It is critical to understand that not all mobile email clients are same and difference in HTML emails display is radical from device to device. Designing your email in a responsive email format enables you to use a single email design for mobile, tablet and PC versions. This directly leads to high user engagement and improved CTR, increasing ROI for your email marketing campaigns. To get started, here are some quick points, which you can easily implement to get a responsive email design for your campaigns.

1. Use a simple email Layout: As an email marketer, the traditional approach of making emails with complex coding and layout to make them more attractive can negatively impact your results. Rather, an email design with a simple layout is mobile friendly and more engaging for your customers. To achieve best results from a simple layout, follow the guidelines mentioned below:
   1. Use a single column layout with width not more than 550px-600px.
   2. Define a minimum target of 44px x 44px for all links and buttons.
   3. Use a minimum font size of 13px for mobile devices.
   4. Hide less important sections in mobile layout using ‘display: none;’.
   5. Keep a clear, sharp Call to Action for improving email conversion rate.
2. Use Media Queries to target specific devices: Media queries (also known as Media Declaration), in HTML coding enable you to define specific mobile display areas for which the email will be rendered. Media queries work great with almost all major mobile email clients.As an example, adding code ‘@media only screen and (max-device-width: 480px)’ will render the CSS which has been set for device with 480px width or higher than that. The media queries can be fine-tuned by adding specific conditions for rendering emails on mobile phones.

3. Building 2-to-1 Column Layout: Having a single column layout for your email is a best practice. You can create a 2 column responsive layout, without the need of writing extra code in your CSS files. Using a 2 column layout lets you display more content above the fold in desktop clients but reduces readability in a mobile email client. The best way to avoid this is by using proper HTML attributes instead of CSS attributes. HTML attributes are more solid and clearly defined in comparison to CSS and more reliable for email 2-to-1 column layout.In the example below, instead of using ‘float:left’ to left-hand side column, we have used <table align=”left”>. This will work fine as long as table width is equal to the combined width of both these columns. This would display 2 column layout on desktop and 1 column layout on mobile client. This can be clubbed with media query to fine tune the display further.

4. Optimized images for mobile-friendly look: Since, there is limited screen space available on mobile devices, it is important to keep minimum images for a mobile email client. However, with CSS, we can leverage our background images and create more attractive and appealing mobile emails. Background images don’t work in many desktop email clients. With CSS support and media queries, we can substitute images with background images for mobile devices.Adding below code will ensure that background images are displayed only for email viewed on a mobile device. You need to ensure that you create separate images for background here, rather than just resizing the original image. Additionally, you can use fluid layout options, wherein ‘background-size: cover;’ can be used instead of ‘background-size: 100%’ for support in all devices.

5. Getting more subscriptions with Mobile Friendly forms: Apart from designing a mobile friendly email, you need to make sure that users are easily able to subscribe on your landing page at first place. Here are certain tips, which will increase the conversion rate for your subscription forms on mobile devices:
   1. Every time a user clicks on any text field on a mobile device, the viewport zooms in and the text label shifts to the left side. Using Top-aligned labels, when user clicks on a text field, ensures, the labels are clearly visible top of the fields.
   2. Using <input type=”email”> for email address field ensure different keyboard appears with characters like ‘@’ and ‘.com’.
   3. With mobile specific CSS, you can create narrow forms in a top to bottom layout, without any visual clutter.
   4. Prefer drop-down lists over radio buttons to improve form functionality and user flow.
   5. Using the Viewport tag, you can avoid unnecessary zooming in the form, while the user is filling it. The tag in HTML Header section can be added as:
      <meta name = “viewport” content = “width = device-width,
      user-scalable = no” />.
      For details, refer to Apple’s documentation for viewport tags.
6. Creating mobile compatible plain text versions: Having a text version of email is always beneficial for better delivery of your email campaigns. For a typical user, a single line should have 60-65 characters per line. In mobile devices, the lines automatically break and wrap the text in few lines, which may create a scattered look. It is recommended that you add proper line breaks while creating text mails, rather than relying on the mobile device to break the lines.

For instance, Crocs, a world renowned shoe manufacturer, decided to switch to responsive email designs to achieve a consistent experience for users who interact with the brands online as well as offline. Below is the snapshot of email design after implementing mobile-friendly email changes. The new design increased CTR by 7.66% and improved overall engagement by 15%, giving an extra edge over its competitors.

Mobile friendly emails may appear a bit difficult to make initially but they benefit your business in the long term. With enhanced reach to your existing and future customers, you can easily leverage responsive emails for deeper engagement.

About Grazitti^™ Email Design Services

References:

1. http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_SECONDHalf2012.pdf