Tonight We're Gonna Code Like It's 1999

Creating Responsive Emails

By Jennifer Wong / @mybluewristband

Follow Along

http://jennz0r.github.io/1999/

Who am I?

Who was I?

Civil Engineer

Then I Was

"Community Specialist" at "Startup"

Read: customer support.

I hated it

So I taught myself to code.

SUCCESS

I landed my first job as a Web Developer!

Yup!

Here we go

First Assignment

Redesign emails and make them mobile-friendly.

Oh crap

Fortunately

First Things First

Research!

The first victim was our Welcome email.

Naturally, I researched other Welcome emails.

Most   ಠ_ಠ

• Lumi
• HackerLeague

• Super text heavy. I'm not going to read all that!
• Lumi's calls to action are not noticeable and the email doesn't show how to unsubscribe.
• HackerLeague's calls to action are repeated and don't use images where they make sense (Twitter).

Most Favoritest

• Radiolab
• indiegogo

I know, I know, these are not welcome emails.

But they're just so pretty!

• Radiolab - color interest!
• Key calls to action super obvious.
• Indiegogo - awesome images and calls to action brightly colored, consistent, and obvious.

Takeaways

• Text (or not)
• Images
• Logo!
• Max width

• Use a logo similar to website
• Make logo large and top-anchored
• Ensure you don't have to read across entire page

Disclaimer

May not work for everyone

A/B Test the hell out of your emails

Assessment

What am I working with?

OMG

• Why is the logo where it is?
• Why is the spacing of lines so weirdly inconsistent?
• Wait, where do you unsubscribe?

Wow

Planning

What am I making?

Goals

• Consistency
• Brand Awareness

• Our emails lacked consistency.
• Consistency begets brand awareness
• When customers see something that's recognizable, they tend to associate it with the brand.

Responsiveness

• Scalable
• Fluid
• Responsive

Scalable

Testing the mobile waters

Reliable rendering across clients and devices

Teams with limited resources

• Scales across devices without changing sizes, so not scalable in size.
• Simple (usually single-column) layout
• Large text that is readable on screens of all sizes.
• Large, touch-friendly calls-to-action.

Fluid or Liquid

Simple layouts

Emails with mostly text that can flow

Teams with limited resources

• Percentage-based sizing so tables and images adapt to the screen size
• Similar to scalable - don’t purposefully alter the layout or content of an email, but “flow” to fill space on the screen.
• Typically work best for text-heavy layouts due to less control over how copy and images interact.

Responsive

Large mobile audiences

The most control over layout

Teams with knowledge of media queries

• Everything from scalable and fluid emails with more control via CSS media queries.
• Unlike Fluid, media queries to change layout of emails, sizes of text, images, and buttons, and hide or even swap content between desktop and mobile devices.

Combo

We used them all.

• For example, max-width will give you a scalable solution.
• Percentage based widths on tables will give you a fluid solution.
• Swapping images for high-res ones for retina devices will give you a responsive solution.

Pre-Made Templates

There are a LOT of options...

which I'll mention a bit later

... and which I didn't use.

• It's up to you to determine if you want one or if you need one.
• Our emails hadn't been updated in over five years.
• I had all the time in the world to do these emails right.
• Also, this was a big learning experience for me.

Sketching

• If I've learned anything from UX, I learned that sketching can be amazingly helpful.

Photoshop

• If you've got the skills, go for it!

Images

Rule of Thumbs

Minimum Touchable Area44px by 44px

WRONG!

Smashing Magazine: Touchscreen Target Sizes

Puget Works: Minimum Touchable Areas

• Based on the original iPhone Human Interface Guidelines for the first iPhone, which no longer exist.
• Back when I started, we were naive and used 44x44. Now I know better and pass this info onto you!

• So pretty!
• Big top-anchored logo.
• Calls to action are bright and obvious - BUTTONS!
• I left the copy alone, but added whitespace and dividers.
• Mimicked the look of our website with the image footer.
• Unsubscribe and edit preferences

Aesthetic Prince Would Approve of

Just for Reference

Tables

are coming.

MDN says:

• Mozilla Developer Network
• MDN characterizes table elements as block level.

Emails say

Tables

Are Important

Not adding an outer <table> makes your code disappear in Apple Mail and Outlook 2011

Tables

do not display as inline or block

<table> default is display:table;

Use display:block; or Chrome will ignore max-width!

Inline Styles

You Need Them

Gmail doesn't support <style> in <head>

Outlook.com doesn't support link in <head>

Many clients don't support a whole bevy of CSS!

See Campaign Monitor CSS page.

Inline Styles

You will, unfortunately, be doing a lot of this:

<table cellpadding="0" cellspacing="0" border="0" align="center" width="
  95%" style="margin: 15px auto 10px auto; border: 1px solid #72b6e6; 
  background-color: #f3f7f9;">
  <tbody><tr>
    <td style="padding: 10px;">
      <span style="font-size: 0.9em; line-height: 1.0em;">
        From: <strong>${userName}</strong>
        <a href="mailto:${userEmail}" style="
          color: #47c7b5; font-weight: bold;"><${userEmail}></a>
      </span>
    </td>
  </tr>
</tbody></table>

• Fortunately, there are actually tools that put your CSS inline for you!

Max Width

• Maximum readability (while avoiding scrolling)

Max Width

550 - 600px

<%--Wrapper Table Begin--%>
  <table cellpadding="0" cellspacing="0" border="0" width="100%" id="
    backgroundTable" style="display: block; 
    max-width: 600px; 
    margin: 0 auto;">
  </table>
<%--Wrapper Table End--%>

• Based on most email clients' preview panes

A Note About Comments

Tables all the way down.

• Life saver when you have tables in tables in tables

Image Alternatives

Always have alt=" " or a background color.

This is also great for accessibility!

• Some browsers or clients do not automatically display images.

<img src="http://files.hotpads.com/images/email/hotpads_logo_email.png
  " width="130px" alt="HotPads Logo" style="border:none">

or

<img src="http://filenet.hotpads.com/images/email/footer.jpg" class="
  footerImage" style="width:100%; background-color:#71B5E6;">

My Template

Check it out on Github

Why Template?

• Keeping it DRY - Don't repeat yourself!
• A little abstraction goes a long way.
• Consistency! Which again means brand recognition.

Media Queries

Awesome for readability or targetting devices!

@media only screen and (min-device-width: 768px) and 
  (max-device-width: 1024px) {
    #backgroundTable {
      max-width: 600px;
    }
  }

Note: Media queries don't work on all clients.

Style Campaign's Guide to Responsive Email Support

• Here I'm targetting larger browser screens, ensuring a max-width on my emails.

Media Queries

Target Apple devices with 480px

@media only screen and (max-width: 480px), 
  (max-device-width: 480px) {
    // Small screen styles here
  }

• Here I'm targetting both the screen display area (or browser) and the width of a device's screen.

Media Queries

Cover Your Bases

Use in conjunction with fluid layouts (% based widths)

@media only screen and (max-width: 480px), (max-device-width: 480px) {
  #backgroundTable {
    max-width: 480px;
    font-size: 18px;
    margin: 0px;
  }
}

AND

<table width="100%">
</table>

• This will cover screens that are smaller than 480px as well as devices and clients that don't support media queries.

Device Pixel Ratio

From Stack Overflow

• For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical resolution.
• Physical resolution: 960 x 640
• Logical resolution: 480 x 320

Device Pixel Ratio

Target retina or high res devices

@media  all and (min-device-pixel-ratio : 1.5),
     all and (-webkit-min-device-pixel-ratio: 1.5) {
      // Retina device styles go here!
    }

• Here I'm targeting any device with a DPR of 1.5 or higher.

!important

When to use?

Use !important

Sometimes inline styles overwrite media queries...

@media only screen and (max-width: 480px), (max-device-width: 480px) {
  .headerBar {
    height: 5px !important;
    line-height: 5px !important;
  }
}

<table>
  <tbody><tr>
    <td colspan="3" class="headerBar" style="
      height: 10px; line-height: 10px;">
        <span>Blah blah blah</span>
    </td>
  </tr>
</tbody></table>

• You'll want to use !important here to ensure your media queries can overwrite your inline styles.
• Three's also a later example of this related to retina images, which I'll show later.

Line Height

Solution

Set a line-height on the surrounding <td>

<Img> Within <a>

Super weird and only occurs occasionally.

• A thin gray outline or border will appear around your images.

<span class="playBadge">
  <a href="http://hotpads.com/referral.htm"><img src="http://filenet.hotpads.com/images/email/android_badge_100px.png" alt="HotPads Android App" class="mobileBadge"></a>
</span>

VS.

<span class="playBadge">
  <a href="http://hotpads.com/referral.htm">
    <img src="http://filenet.hotpads.com/images/email/android_badge_100px.png" alt="HotPads Android App" class="mobileBadge">
  </a>
</span>

High Res Images for Retina

The Problem

Outlook 2007, 2010, 2013, and Outlook in IE don't allow HTML or CSS image sizing. Argh.

The Solution

Replace <img> by setting a background-image style on the surrounding <td> and assigning display: none; on the <img>.

Campaign Monitor

@media all and (min-device-pixel-ratio : 1.5), 
  all and (-webkit-min-device-pixel-ratio: 1.5) {

  td[class="cautionBar"] {
    background-image: url('http://filenet.hotpads.com/images/email/warning.png');
    background-position: center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    width: 30px; !important;
    height: 30px; !important;
  }

  td[class="cautionBar"] img {
    display: none;
  }

}

<table>
  <tbody><tr>
    <td valign="middle" class="cautionBar">
      <img src="http://filenet.hotpads.com/images/email/warning_30px.png" width="30px" height="30px" style="float: left; padding-left: 5px;">
    </td>
  </tr>
</tbody></table>

• Note use of !important in order to resize <td>.

Outlook 2007, 2010, & 2013

ignore max-width.

Max Width Bypass

#backgroundTable {
  margin: 0;
  padding: 0;
  width: 100% !important;
  line-height: 100% !important;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #backgroundTable {
    width: 600px;
  }
}

Style Campaign Max Width Bypass

• Set the fluid layout as your baseline.
• Set all use cases to have 100% width.
• For larger screens, use a max or fixed width.

Outlook 2007, 2010, & 2013

WTF?

Rendering Engines

• Outlook 2000 - 2003: Internet Explorer
• Outlook 2007, 2010, 2013: Microsoft Word
• Outlook 2011, "Outlook for Mac": WebKit

• Outlook 2000-2003 use whatever version of IE is installed on that particular OS

Gmail

Ignores <a> color styles in the <head>.

You have to style each and every <a> inline.