Responsive Newsletters using Foundation

Responsive Newsletters using Foundation

Responsive Newsletters
in Foundation for Emails 2

Email is still one of the strongest tools of online marketing and it is apparent that despite all online innovations, it is likely to stick around for many years to come. However, even such a conservative matter as is the email has to be adjusted.

Nearly half of email newsletters are viewed on mobile devices nowadays, but only as little as 10% are optimized to mobile viewing. Many so called Decision makers read most emails on mobile devices and responsive content in emails therefore has a substantially higher conversion. Responsive email technology is unfortunately still far behind the possibilities of responsive web sites because of many different email clients and providers. The Zurb company, which is mostly known for its responsive Foundation framework as well as visionary and modern approach in web design, has decided to change that. Zurb presents a framework for creating emails (previously known as Ink). In a few days, a new version, Foundation Email 2, will be released. The following article deals with the sophisticated usage of this framework in connection to the Inky build tool.

Conditions in the web browser field are stabilizing, implementation of the newest standards is very fast, and compatibility is high. The newsletter conditions are unfortunately still dismal and obsolete technologies and processes are used:

  • Table design
  • Inline styles
  • Historical attributes (VALIGN, CELLSPACING, etc.)
  • All code in one file
Disunited technology and a practically non-existent standard leads to bad mobility across clients. Hand coding of a newsletter template is complicated, as even an experienced frontend developer can easily drown in a huge amount of nested tables and constant style defining for each individual element:

<i>TR-TD TR-TD by Radek Pilmaier</i>

TR-TD TR-TD by Radek Pilmaier


<tr style="background:#e5e9ee;">
 <td width="240" height="125" style="text-align:center;padding-right:8px;">
   <h3 style="font-size:15px;color:#64686e;font-family:'Helvetica Neue',sans-serif;font-weight:bold;">Some image</h3>
   <p style="margin:0;text-align:right;font-family:Arial,Tahoma,sans-serif;"><span style="font-size:11px;font-weight:bold;"><a href="http://example.com/homepage/" style="color:#ff0000;" target="_blank">Show me more</a></span></p>
 </td>
</tr>

Because this is still understood as the email standard, in which millions of newsletters are sent daily, it is evident that we will unfortunately not get rid of the inline table design for a long time. But why not make template coding easier and codes more synoptic, since we live in a world, where automation works and where build systems and pre/post processors exist.

Zurb is therefore introducing a system that will make writing more synoptic and up the creation of responsive newsletter templates to the level of 2016. The key to the whole newsletter-making system is the build system Inky, which secures all steps and prepares the final code to be used with the Foundation for Emails 2 framework.

Inky is a template language and a build open source system, which converts pseudo-HTML writing to a complex table design compatible with the Foundation for Emails 2 framework.

Foundation for Emails 2 is currently the most advanced responsive email framework we’ve known. It helps create HTML templates, which are compatible with most of today’s mail clients.

It contains things common to the responsive web, which is a 12-column grid system for desktop and mobile viewing, and basic UI elements for fast prototyping. If necessary, it is possible to define specific properties for buttons etc.

The basic layout and the code itself it written in SASS, processed by gulp, and supports browser sync.
Long story short:

Finally, modern frontend technologies used for email coding!


The basics of creating a functional responsive newsletter are described in the following steps:

Creating a Structured Pseudo-HTML Code in Inky

The code structure looks this simple at the beginning:


 <row>
   <columns small="12" large="6">
     <p>Lorem ipsum dolor sit amet</p>
   </columns>
   <columns small="12" large="6">
     <p>Consectetur adipisicing elit</p>
   </columns>
 </row>

Generating a Standard Email-Ready HTML

After generating an email-ready HTML, we will obtain a code, which uses the Foundation for Emails 2 Framework:


<table class="row">
   <tbody>
       <tr>
           <th class="small-12 large-6 columns first">
               <table>
                   <tr>
                       <th>
                           <p>Lorem ipsum dolor sit amet</p>
                       </th>
                       <th class="expander"></th>
                   </tr>
               </table>
           </th>
           <th class="small-12 large-6 columns last">
               <table>
                   <tr>
                       <th>
                           <p>Consectetur adipisicing elit</p>
                       </th>
                       <th class="expander"></th>
                   </tr>
               </table>
           </th>
       </tr>
   </tbody>
</table>

This code needs to be “enriched” with inline styles in the next step. Because of compatibility, Inky will again take care of inserting inline styles from a classically created CSS for you, because many email clients don’t take other formatting types into account.

Working CSS into Inline Styles

And this is what a preview of the final newsletter looks like.


<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;">
    <th class="small-12 large-6 columns first" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 8px; text-align: left; width: 274px;">
      <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
        <tr style="padding: 0; text-align: left; vertical-align: top;">
          <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
            <p style="margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">First COEX column</p>
          </th>
          <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
        </tr>
      </table>
    </th>
    <th class="small-12 large-6 columns last" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 8px; padding-right: 16px; text-align: left; width: 274px;">
      <table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
        <tr style="padding: 0; text-align: left; vertical-align: top;">
          <th style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">
            <p style="margin-bottom: 10px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0; text-align: left;">Second column</p>
          </th>
          <th class="expander" style="color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th>
        </tr>
      </table>
    </th>
  </tr></tbody></table>

Reflection

The standard procedure is usually frontend coding of a newsletter template, code compilation to inline style, and handoff to backend processing. Backend usually processes the final table code for automatic bloc, text, and database item generation. In this case, it might be an interesting idea for backend to render items right at the pseudo-HTML level and generate the whole code directly on the server by following the above mentioned process.

A problem might occur when generating personalized newsletters with variables in its content, because it is surely not desirable to build each and every email from pseudo-HTML to its final form. This problem is, however, solvable by pre-generating various blocs and then assembling individual parts into the final whole.

Email Testing

The generated code must, of course, be tested on real email clients. The following online services proved best for these purposes:

Puts Mail is a very simple online tool, which enables you to send the final compiled html code to any email address, thus making it possible to email test on real email clients.

Litmus is a paid online service, which allows you to input a compiled HTML code in it and then shows you screenshots of it from various versions of real email clients. (The unpaid version can only display Gmail, iPhone 6S, and Outlook 2013)

Pros and a Few Cons

To make it simple, we can say that thanks to this process, the code, which would normally contain a thousand lines and would be nested dozens of times, is simplified to a hundred lines and nested only a few times. And thanks to the smart use of build technologies and the pseudo-HTML language, the gap between modern coding of responsive webs and outdated approach to newsletter coding is getting smaller.

The above mentioned process has many advantages over the classic effort to create newsletter templates. It deals with compatibility across email clients for responsive design as well as for developers, who can create templates following these modern processes, and substantially increase their effectivity.

On the other hand, not all is resolved in this case either. For instance, compatibility across all mail clients is still complicated – many more are being created and historically, there are many nonstandard interprets in mail clients. The goal is to keep raising the compatibility bar to as many clients and devices as possible and to accept the fact that a client on a 2002 PDA will simply not be able to display the email properly.

However, what poses a problem are big players like for example Gmail, where the creation of a responsive email meets with certain shortcomings because of ignoring the input CSS style, and therefore making it impossible to use media-queries.

The statistics show that the same way there is demand for responsive webs, it is necessary to optimize newsletter viewing as well. It is quite clear, that if an email isn’t adjusted to mobile devices, a user’s interest in it will decrease, and conversion from email campaigns will therefore be much lower.

It is great that interesting options arise in this field to help overcome the technological barrier and to make a coding hell into an enjoyable process with a modern approach ;)

Perhaps somebody might find this process helpful – if you have any questions, feel free to contact us on https://twitter.com/coexcz.

Related links

  • Foundation for Emails 2 (Quickly create responsive HTML emails that work.)
  • Inky (Convert a simple HTML syntax into tables compatible with Foundation for Emails.)
  • Putsmail (Test your HTML emails before sending them)
  • Litmus (Preview your email in popular apps and devices before you send)