Coding responsive emails can be a real pain but the juice is worth the squeeze. Email is still the best medium to reach your audience. With the release of Foundation for Emails 2, we help you get away from crappy table-based markup and into a world you might be be more familiar with (especially if you’ve used Foundation for Sites). The Inky markup language will make you feel right at home by using <row> and <columns> similar to what you’d use on the web. In this lesson we’ll build a common pattern you’d use in a responsive email using Inky and Foundation for Emails 2.

Feature Callout

This common pattern has an image on the left, and on the right a header, text and a button. On small screens the image and text stacks. Let’s get building!

Large Screens

Small Screens

Inside our <container>, we’ll add a <row> and <columns>. We know that the layout will be split into two sides, so we’ll create two columns.

<row>
  <columns>

    </columns>
    <columns>

    </columns>
  </row>

Ok great. Now we’ll add our content. We’ll use a placeholder image for now. Note: Make sure to add a description in the alt tag so in case the image is blocked by the email client.

<row>
  <columns>
     <img src="http://placehold.it/120"
     alt="image of savage kitty">
  </columns>
  <columns>
    <h4>Cat-tastic destroy couch</h4>
    <p>Sweet beast sun bathe or chase mice rub face on everything
     or leave dead animals as gifts for mark territory play time. Give
      attitude hunt anything climb leg.</p>
  </columns>
</row>

So if you save this and preview in the browser, you’ll see that each column is 50% width. The columns will size evenly inside a row unless we specify a width. We’ll do that now.

<row>
  <columns small="12" large="4">
    <img src="http://placehold.it/120"
    alt="image of savage kitty">
  </columns>
  <columns small="12" large="8">
    <h4>Cat-tastic destroy couch</h4>
    <p>Sweet beast sun bathe or chase mice rub face on everything
     or leave dead animals as gifts for mark territory play time. Give
      attitude hunt anything climb leg.</p>
  </columns>
</row>

Let’s break this down. There is one breakpoint in Foundation for Emails. It’s at 596px by default. So anything below 596px is considered small and anything above is large. The grid has 12 columns, so we can divide the width of the container by these 12 columns.

So small="12" means that on a small screen, the contents in the column will stretch full width. In our example both columns will be full width, so the second (right) column will stack underneath neatly.

On a large screen, the image will take up 4 columns and the text will take up the remaining 8 columns (4+8=12).

Time to add the button. In the Inky markup, you can create a button by using the <button> tag. Just make sure you include the href=. There are also sizing classes you can add to buttons like .small, .medium, .large. We’ll use .small:

<row>
  <columns small="12" large="4">
    <img src="http://placehold.it/120"
    alt="image of savage kitty">
  </columns>
  <columns small="12" large="8">
    <h4>Cat-tastic destroy couch</h4>
    <p>Sweet beast sun bathe or chase mice rub face on everything
     or leave dead animals as gifts for mark territory play time. Give
      attitude hunt anything climb leg.</p>
    <button class="small" href="#">Sniff everything</button>
  </columns>
</row>

Awesome! We have a feature callout! But on a small screen the image is left aligned. We can fix that very easily. We’ll use one of the Foundation for Emails alignment classes to solve this.

<row>
  <columns small="12" large="4">
    <img class="small-float-center"
    src="http://placehold.it/120"
    alt="image of savage kitty">
  </columns>
  <columns small="12" large="8">
    <h4>Cat-tastic destroy couch</h4>
    <p>Sweet beast sun bathe or chase mice rub face on everything
     or leave dead animals as gifts for mark territory play time.
     Give attitude hunt anything climb leg.</p>
    <button class="small" href="#">Sniff everything</button>
  </columns>
</row>

On the image we added a class of .small-float-center. It’s not really a float but it does center an image on the small breakpoint. Note: Outlook 2007, 2010, and 2013 require a <center> tag around the image to center it. But since we are only centering the image on mobile clients, the .small-float-center does the trick.

---