January 5, 2016No Comments

6 tips to enhance mobile optimized emails

Email marketing is one of the more successful channels for communicating with consumers. With over 91% of consumers using email at least once a day, and with an average return of $44.25 for every $1 spent on email marketing, it makes sense to target consumers through their digital inbox. But its not enough to just send an email blast out to a targeted list. With over 51% of email opens occurring on a mobile device, it is important to develop mobile optimized emails.

Recently, Jacobs & Clevenger was tasked with improving one of our more successful mobile optimized email templates known as "Service Date." You may be thinking, "If it's already a successful template, why mess with it?" As direct marketers, our goal is to employ different techniques to improve upon the communications we send to our target audience. Below are 6 techniques we used to enhance our "Service Date" mobile optimized email template.

Mobile optimized email test

1.) Design for a similar experience across mobile devices

When designing for a mobile optimized email it is important to think responsive design first. Responsive design allows the layout of your email to be flexible and scalable, so that it can adapt to different screen sizes across devices. While our previous "Service Date" email was responsive, it's layout was based on a 2-column format. In order to improve upon the layout the design was changed from a 2-column to a 1-column format. The 1-column format was selected to offer a more consistent experience between desktop and mobile devices. This layout also allows the design to restructure the hierarchy of information to fit with how most online content is read, which is from top to bottom. Changing the layout also provided a fresh look for audience members who had seen the previous template.

2.) Let the subject line work hand-in-hand with the preheader

Whether viewing an email on a desktop or mobile device, the subject line and preheader are the first elements your audience sees in their preview pane. It is important that these elements work together to give the viewer a quick overview and entice them to open the email. While this might seem like one of the more obvious email techniques, often times it goes overlooked. For example, if the "View as..." copy is placed above the preheader, it will display in the preview pane first, disrupting the subject line/preheader flow. Another example would be omitting a preheader altogether, and having an image as the first element in the content of the email. The alt tag for the image will appear after the subject line in the preview pane, which can cause a disconnect in messaging. In order to enhance the "Service Date" email template, the subject line and preheader were written in a supporting manner to provide a sense of legitimacy and urgency.

3.) Get personal with your audience

Personalization is a key tactic for enhancing mobile optimized emails. According to a study by the Aberdeen Group, personalized emails improve click-through rates by an average of 14% and coversion rates by 10%. Personalization tells your audience that you have a prior relationship with them. It also allows your email communication to stand out from the myriad of emails floating in a person's inbox. For the "Service Date" email revamp, personalization played a key role in shaping the content. Utilizing the data we had on our audience, we were able to customize multiple fields including such as name, vehicle make, vehicle model, model year and VIN in the subject line, preheader and body copy.

4.) Keep the content simple and scannable

Relevant content is key for any communication channel. However, sometimes there is a tendency to cram as much content as possible into an email communication. Instead of relying on the email to do all the heavy lifting for a campaign, streamline content to focus on the key objective of the email. Whether it's getting your audience to click through to a landing page or to call a phone number, craft your content so that it is clear to the audience what you want them to do.

In the revised "Service Date" creative, content was streamlined to focus on the offer and the timeliness of needed action from the audience. This allowed the email to play it's intended role in the campaign, which was to drive viewers to the landing page to purchase and learn more about the product. This also plays to the strengths of mobile optimized emails by having less content for the user to scroll through before taking action.

5.) Allow the audience a comfortable level of commitment

At times it can be tricky to get your audience to commit to a course of action. You want to be direct with the action you want them to take, but some viewers may not be ready to take that step. Offering up a hard and soft commitment option can help ease users into taking the action.

The main goal of the "Service Date" email is to drive users to a product landing page to purchase. In order to enhance click-through response we incorporated an "Update now" button along with a "Learn more" text link. Both call-to-actions took the user to the product landing page. This allowed the audience a choice of the level of commitment they were willing to engage with.

6.) Use relevancy to increase engagement

In direct marketing, relevancy is key to driving engagement. Would you act on an offer for discounted Christmas lights in June? More than likely the answer is "No." In order to enhance the relevancy for the "Service Date" template, emphasis was placed on the number of years it had been since the customer had updated their navigation system. Showing the customer the amount of time that had passed since an update helped add weight to the fact that their status was "overdue."

So how did these techniques enhance our revised "Service Date" mobile optimized email template? The new template outperformed the older control template with:

  • a 34% higher open rate than the control
  • an 85% higher click-through rate than the control
  • a 38% higher click-to-open rate than the control
  • 118% more clicks on the “Update now” button than the control

As you can see even if a mobile optimized email is performing well, it pays to continually find ways to enhance upon your success.

August 18, 20141 Comment

Nerding out with TEDC14 day 1

As a Senior Art Director at Jacobs & Clevenger, one of my responsibilities is email design and development. Though email is just one aspect of my job, it's a channel that is constantly evolving, and it is essential to integrated marketing. So when I found out about "The Email Design Conference" by Litmus or #TEDC14 for the Twitters out there, I thought "this is a conference I NEED to attend." Fortunately, Jacobs & Clevenger also agreed, and now my coworker (a developer) and I are in Boston.

Day 1: We arrive at TEDC14

TEDC14 started off with 2 optional workshop offerings: intermediate and advanced. Since we're both pretty email savvy, aka "email nerds", my coworker, Mike and I opted for the advanced workshop. We arrived at the Seaport World Trade Center at noon to register and enjoy lunch. There's nothing I love more than free conference swag, and TEDC14 did not disappoint. We received our name tags, conference shirt and tote bag with cool goodies such as tattoos, buttons, itinerary and a fortune cookie (it's all about the unique touches). We then sat down at our family dining style lunch and mingled with other conference attendees. To give you an idea of the credibility Litmus has in the email community, one of the attendees came all the way from Israel. I know there's no way I'd get on an international flight to attend a conference, unless I believed in the credibility of the host. After some good networking and coffee, it was time to get into the main event: the advanced workshop.

Diving into the TEDC14 advanced workshop

The TEDC14 advanced workshop began with understanding how to structure and style live coding. Our first presenter Fabio Carneiro, Email and UX Designer at MailChimp walked us through setting up an HTML file with the correct structure and styling needed to create a cross-browser, responsive email. I would love to say I'm able to type fast enough to keep up with the training, but alas I had to give up about 20min in. Mike, on the other hand, is a coding genius and kept up through the end of the workshop. Since I couldn't keep up with the coding, I focused on note taking and following along with the completed example. Fabio is an engaging speaker and kept what could become rather dry material, fun and alive. Such quotes as "I don't design for Lotus Notes because...I just don't like it," and "If you don't include unsubscribe links in your email, please lower your head and leave now" made this section fun and kept the crowd responsive. After a brief Q&A and a much needed coffee break, it was time to begin part two of the workshop.

Advanced workshop part 2: Email client targeting

The second part of the TEDC14 advanced workshop was presented by Kevin Mandeville, Desinger/Email Hacker at Litmus. Kevin walked us through ways to target specific browsers for different functionality when programming emails. For example, we went over how to hide an image specifically for Gmail, and how to enable a background video for WebKit only. The key message is that it's not about getting an email to work the same way in every browser, but to target elements to work better within specific browsers. While a little dryer than Fabio, Kevin provided easy to follow examples and encouraged great dialogue.

Key takeaways from TEDC14 Day 1

The advanced workshop was packed with great information for both designers and developers. Some key takeaways I got from the workshop are:

  • Think mobile first when designing/programming an email
  • Set your styles in your <head> tag first, and then implement into your inline styles
  • Target specific browsers to display information in the best way for that browser
  • It is possible to override browser styling issues with queries and CSS
  • Think "grid"
  • Know your audience and target specific browsers
  • Use CSS styling for buttons vs images

So far TEDC14 is off to a great start. I am excited to see what the next two days bring. Maybe there will be another free t-shirt. Stay tuned, as I will cover the rest of the conference in a future article. You can also follow updates about the conference on Twitter. Either follow the hashtag #TEDC14 or follow me on Twitter.

May 20, 2014No Comments

Tips to designing a responsive 2-column email

If you're a designer who is new to designing responsive, multi-column emails, the task can seem a bit challenging. The following guide outlines some best practices to follow when designing and laying out a responsive 2-column email.

1. Understanding a responsive 2-column email structure

Developing the layout for an email is a lot like being an architect. The easiest way to understand it, is to think of a building block structure. Each block stacks together to create the email layout.

The email structure is made up of tables, rows and cells. The table is the main container. Within the main table are rows. Within the rows are cells. Within the cell is your content. This content includes, text, images and other tables. The image below illustrates each element blocked off into its own section so that it stacks together. The more elements you have inside a cell, the more complex your layout becomes. The example below illustrates how the structure would be set up for a responsive 2-column email.

Responsive 2-column email structure diagram

Quick Tips

  • Tables are divided into rows.
  • Rows are divided into cells.
  • Cells contain data, content and tables.

2. Setting up an email layout

Photoshop is the preferred program for creating email layouts. When setting up your email in Photoshop select the following:

  1. Go to Preferences > Units & Rulers and change your ruler and type setting to "Pixels".
  2. Open a new project.
  3. In the pop-up dialogue box
    • Set your width to 680px
    • Set your height to 800px (you can change this as needed for design)
    • Set your resolution to 72 pixels per inch
    • Set your color mode to RGB


  4. Set a left guide at 20px and a right guide at 660px. This creates your container size for your email which is 640px. The 20px on each side allows you to show what the background color of the email will be.
  5. Set a vertical guide at 25px. This area is where your preheader will go.

This is the basic setup to begin your email layout.
NOTE: If you are creating a full width email, set your width to 640px and disregard step 4.

Quick Tips

  • Use pixels as your measurement increment.
  • Keep your color settings at RGB. CMYK colors display incorrectly when shown on web devices such as phones, tablets and web browsers.
  • Use guides to block off each area of content. This helps developers know the exact measurements when programming the email.

3. Structuring your responsive 2-column email

When structuring your email, think of it as building blocks, with containers stacking on top of one another. Start from the top and work your way down.

Think responsive first. Start by planning how your elements will stack when they go mobile. In a responsive two-column email layout, the content on the left will stack on top of the content on the right (see example below). For more complicated emails, you can have multiple left and right columns to arrange your hierarchy.

When designing a responsive two-column email:

  1. Set the guides for your two column widths.
    In the below example they are set for 420px wide for left and 220px wide for right. It is a good idea to keep the column widths the same if you are incorporating multiple rows of columns, i.e. the header has two columns and would stack before your two body columns (see example).
  2. Set a vertical guide at 600px.
    While it is becoming more common practice to have longer, more vertical emails, it is still a good idea to see where your "fold" hits for desktop users.
  3. Be sure to build spacing into your email layout.
    For example, if you want 20px of spacing between the edge of the email and where the content begins, set your guides to include that 20px of space. This allows the programmer to know how much space will need to be built in when programming.

Email design guide

Quick Tips

  • Setting up guides using whole numbers to show where spacing will occur gives programmers accurate measurements for development.
  • Keep as much pertinent information above the 600px vertical guide for desktop users.
  • Spacing does not need to be built in between paragraphs unless it is indented content, i.e. list, quote, etc.

4. Adding images to an email

Your image is a block of content unto itself. When placing an image, think about how you want the content around it to flow.

When using imagery keep the following in mind:

  1. Don’t use background images.
  2. For images to display well on retina devices, create images at least 2x the size of the image in the layout.
  3. Images cannot have transparent backgrounds.
  4. When placing an image into the layout, make sure it doesn’t overlap into another content area. For example, if you have an image in the body of your email, make sure that it clears the area where you would have a border space. See below.


Quick Tips

  • Be sure to have retina sized copies of your images.
  • Do not use background images.

5. Using fonts and text styling in an email

Text styling options are somewhat limited when it comes to email.
When using text keep the following in mind:

  1. Use only web safe fonts such as Verdana, Arial, etc. If the client has not specified a font for email, a safe option is to use Arial.
  2. Make sure your font increments are set as pixels and use whole numbers. Do not use a font size smaller than 10px for legibility.
  3. Do not use kerning or leading in emails. Keep these settings at "auto."
  4. Use white as a font color as a last resort.
  5. Set your text box to the width of your content area for a more accurate view of how your text will flow when programmed.
  6. Text cannot be justified. It can only be aligned left, right or centered.
  7. Do not use hard returns. Allow your text to flow naturally so that there are no awkward breaks when the email goes responsive.

Quick Tips

  • Keep kerning and leading at "auto."
  • Use whole, even numbers set at pixel increments for font size.
  • Don't forget to stylize your text links.

These are some of the basics for designing a responsive 2-column email. Now get your feet wet and dive in. Check out these resources for more information:
Campaign Monitor: Responsive email design techniques
Litmus: The How to Guide Responsive Email Design

Let's connect.

© Justin Herren 2022 | Creative strategist + design lead