Creating Responsive Email Campaigns for Mobile Devices

2 May

If you’re a savvy business owner, then it is likely that you have already kick-started a mobile-minded email marketing strategy for your company. After all, you cannot be oblivious to the fact that the number of people who check mail on their smartphones or other hand-held devices is increasing dramatically every year.

We’re all a part of a shift where more people are using tablets and mobile devices than desktop computers and laptops.  This means our websites should be responsive, which means it adjusts the menus so it’s easily visible to navigate.  If you are not sure if your website is responsive visit your website on a smartphone internet browser, and if it just looks like a shrunk down website it’s not yet responsive.

Due to the fact that many people are using smart phones to check email, there’s no question about that, if you are doing email marketing when they click a link it will direct them to your website on their smart phone.  You can check the stats of how many people are using a smartphone to visit your website with website analytics.

Question: Do you know how many of your visitors are on mobile devices?  It might surprise you.

-Jeremy Jones, founder 180xCoaching.com and the Creative Marketing Podcast

 

This article was contributed by Chris Stevens is a best practices activist and
advocate for a leading provider of email marketing services.

Mobilizing an email campaign is more than just squeezing its web version to make it fit on a smaller canvas. There are two basic design areas to consider when creating responsive email campaigns for mobile devices: the aesthetics and the coding. So, let’s begin.

mobile-devices

Aesthetic Considerations for Responsive Email on Mobile Devices

The trait of a truly responsive email campaign is a supremely functional design that is also easy on the eye. Those who read emails on their hand-held devices have all come across great-looking newsletters or other promotional literature that had tired their fingers (with all the scrolling, flicking, and tapping), strained their eyes (with fonts barely legible), and ultimately snapped their patience so that they “responded” by simply closing the mail.

You wouldn’t want your messages to have the same fate, so make sure that your design team keeps the following pointers in mind when creating email campaigns for mobile devices:

  • The minimum font size that can be displayed on iPhones is 13 pixels. Make sure that you frame and style your text according to this rule so that it does not need to be stretched or does not spill out. You may want to tweak with the CSS to override this regulation but be careful.
  • The buttons and the links on your layout, for an Apple hand-held device, should have a minimum target or hit area that measures 44 x 44 pixels. Remember that your user is not often wielding a mouse, but relying on his finger to tap a button or a link.
  • Keep your text crisp and short, and remember to place all the critical design elements right near the top. You don’t want your subscriber scrolling almost endlessly to read your message and losing them.
  • Given that you have quite a shortage of screen real estate, you just cannot include every teeny-weeny detail of the desktop version of your email into its mobilized format. Leave out the nice-to-have parts and pare down your mobile email to just the essentials. “Brevity” is the watchword when your aim is to design responsive email campaigns.

The layout is one of the most critical aesthetic elements of an email campaign design. In fact, it is so important that it could not be clubbed with any of the design pointers mentioned above. Single-column layouts not broader than 500 to 600 pixels are the norm for mobilized email campaigns. While you may be tempted to use a two-column layout that can accommodate more content above the fold, remember the screen width limitations and the hassles of navigating on a mobile device.

However, if you are a maverick with HTML, you can tweak the codes to have your content displayed on a two-column layout even on a mobile device (CSS falls flat on this front).

Coding Ideas for Responsive Email Campaigns

The previous section on the design guidelines ended with a gentle nudge towards the coding specifications for creating responsive email campaigns for mobile devices. Now it is time to elaborate with an assuring declaration that you do not need to create a separate stylesheet for mobilized designs. You can tweak and lay down the controls from inside the curly brackets of a media query.

For instance, the @media only screen portion lets you specify the width and height of the mobile device on which the email will be displayed. The contenttable class on the other hand, ensures that if the email is viewed on a device with smaller dimensions than those specified in the @media only screen section, the tables of text and/or images are automatically narrowed to fit.

A combination of HTML codes and CSS will help you shorten the length of your message drastically by introducing a feature called “progressive disclosure,” a la Wikipedia. Using this feature, you can layer your content so that all the user sees is a heading and can tap on a Show/Hide toggle button to expand or collapse the content.

You yourself read emails on your phone, so you know that it takes only the tiniest design flaw or just a wee bit of coding error to turn the user experience from a wide-eyed wow to a disgusted ughh. But now that you know what to keep in mind when designing responsive email campaigns and armed with these tips and tricks, making an impact will be easy.

Sources:

http://www.campaignmonitor.com/guides/mobile/design/

http://www.campaignmonitor.com/guides/mobile/coding/

http://www.campaignmonitor.com/guides/mobile/responsive/

 

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *