We’ve reviewed beginners’ B2B email marketing techniques, intermediate techniques, and A/B testing. These techniques are getting you one step closer to a well-rounded email marketing engine. In this post, it’s time to go deeper with understanding the nuts and bolts of email rendering.

Rendering the right way

Have you ever opened an HTML email only to have the images, text, or other elements look strange, or you weren’t able to see them at all? Has an email appeared fine when you opened it on your desktop computer, but when you opened it on your mobile device, it didn’t look right? Most likely, the organization or person that sent you the email didn’t test it in all email platforms and email clients to ensure that it appeared as they intended it to.

There are three types of email platforms:

  1. Desktop platforms (like Outlook)
  2. Browser platforms (like Gmail)
  3. Mobile platforms (like an email app on an iPhone)

Within each type of email platform, there are over 70 email clients. Litmus Email Analytics reports worldwide data on email client popularity. The top 10 email clients and their percentage of the market share as of March 2014 are:

  • #1 Apple iPhone 26%*
  • #2 Outlook 14%*
  • #3 Apple iPad 12%
  • #4 Gmail 11%
  • #5 Apple Mail 8%
  • #6 Google Android 7%
  • #7 Outlook.com 6%
  • #8 Yahoo! Mail 5%
  • #9 Windows Live Mail 3%
  • #10 Windows Mail 2%

Other email clients include AOL Mail and Mozilla Thunderbird.

*It’s important to note that email clients can only be detected if the images in the email are automatically displayed. Outlook 2000 and Apple iPhone are two email clients that display images by default. This likely inflates their market share compared to other email clients such as Yahoo! Mail, which does not automatically display images.

Each email client uses different underlying technology, which makes HTML emails appear differently in each one. Sometimes the same email client will change what underlying technology it uses from version to version. For example, Outlook 2003 uses Internet Explorer 6 to render HTML. Outlook 2007 and Outlook 2010 render HTML using Microsoft Word.

With the large number of email platforms and email clients out there, as well as multiple versions of the same email clients, testing emails in each one can be daunting. While you can test HTML email rendering manually by setting up email accounts on all of the email platforms and clients and sending test emails to each one, this process can be very time-consuming.

For firms that send emails frequently, it’s just not practical, particularly if errors do occur: fixing an HTML issue in one email client can then cause a different issue to occur in another client. Many manual tests may need to be done to ensure the email eventually appears correctly.

Fortunately, most email marketing solutions now have a preview feature that enables you to see how HTML emails appear in most email platforms and email clients. There are also services available from Litmus, Email on Acid, and others that enable you to test HTML emails on every email platform and email client.

SEE ALSO: The Art of Advanced Email Marketing: A/B Testing

Right message, right audience, right time

For professional services firms, email marketing is all about getting the right content in front of the right audience at the right time. Sounds simple — but in reality, this can be difficult to execute effectively. According to results of a 2013 BtoB Magazine email marketing survey of B2B marketers, the greatest percentage of respondents—58%—cited delivering relevant content as the biggest challenge and opportunity they faced in the next year.

Email Marketing Guide for Professional Services

Dynamic content, also referred to as “adaptive,” “personalized,” or “smart” content, are elements of an email that change based on information about the recipient. This information is stored in the recipient’s contact record in your email marketing solution, CRM solution, or database, such as their name, location, industry they work in, interests, or past interactions with your emails or other marketing activities. Dynamic content creates an experience that is customized specifically for the recipient.

Delivering dynamic content requires an email marketing solution capable of this type of customization. There are two basic types of dynamic content:

1. Variable Substitution. Fields are placed in the email template representing recipient attributes and are automatically customized for each recipient. One of the most popular is inserting a recipient’s name in the email greeting. While variable substitution can have great value, it only allows fairly simple levels of personalization.

2. Content Insertion. This is very similar to variable substitution, but goes a step further to enable entire sections of content (phrases, paragraphs, images, etc.) to be inserted based on recipient attributes. This inserted content may itself contain variable substitution fields to further customize it.

It’s important to keep in mind that using content insertion can have a big impact on the production process. Each piece of dynamic content must be created, proofread, and approved, which some firms may find challenging.

Going mobile with responsive design

Respon­sive email design, sometimes called “mobile design,” ensures that an HTML email automatically readjusts in order to display appro­pri­ately on the device on which it’s opened, whether that is a desktop computer, mobile smart phone, or tablet.

According to a study by Litmus in December 2013, 51% of email opens take place on mobile devices. To ensure you’re engaging recipients who open your emails on mobile devices, your email marketing strate­gies need to include a lighter for­mat and a mobile friendly lay­out.

Mak­ing emails read­able and able to be interacted with on any device means adapt­ing what they con­tain and how they are built. Here are some basic guidelines for mak­ing respon­sive email design work:

  • Use a relative width of 100% rather than a fixed/absolute width of 600 pixels (or other) in email templates.
  • Use media queries in emails to instruct the email client to use different CSS styles depending on the display characteristics of a device.
  • Build on a sin­gle col­umn tem­plate to opti­mize read­abil­ity, as most smart­ phone screens arrange con­tent ver­ti­cally. Eliminate or minimize lat­eral scrolling as it makes the email harder to read and interact with on mobile devices.
  • Reduce or simplify the con­tent in your emails.
  • Ensure that the call-to-action is vis­i­ble with­out scrolling.
  • Call-to-action but­tons must be 44×44 pix­els minimum to be large enough for mobile users to use their finger to click them.
  • Make image file sizes small to ensure they appear quickly.

With effective, dynamic and mobile-ready emails, you will be utilizing the techniques of the most successful email marketers out there. Through persistence, thoughtful testing and metrics, and careful iteration, it is possible to achieve truly ambitious email marketing goals and build increasingly strong connections with your audience.

Advanced email marketing doesn't stop at email rendering and responsive design. Learn more techniques in the free guide, Email Marketing for Professional Services Firms. 

On Twitter or LinkedIn? Follow us @HingeMarketing and join us on LinkedIn.