Collaboradabra: Our Journey in Designing a Multi-Device Email

Collaboradabra: Our Journey in Designing a Multi-Device Email

Heidi Olsen

We pride ourselves in designing creative solutions for our clients. We look at analytics, we devise strategies, brainstorm and create campaigns that we test repeatedly to ensure their effectiveness. Our industry is ever-evolving, which can be exciting as well as a huge pain in the @ss.

One major shift that anyone who isn’t rocking a Nokia 3315 is aware of is how much we use our mobiles for browsing the interwebs. Whether it is cat videos on YouTube or pictures of cats on Tumblr, we use our phones for everything. According to this awesome chart Litmus put together on Email Market Share, Apple iPhone ranks number one among email client usage with 23%, followed by the stubborn Outlook desktop application with 16% and Google Android coming in 5th with 8%.

Even though mobile views are dominating our world and are on the rise, it’s still too early to even think of abandoning our old-school classic desktop versions (Wah Wah).

Alright, so what next? How do you give your customers the best email experience when you have to take into account multiple devices?

Before we can successfully adopt an approach to suggest to our clients, we need to start with ourselves, at eROI. After signing up for a few webinars, playing around with wireframes, code snippets and some open conversations over coffee, we decided to meet as a group to take a look at our current newsletter and build a new, multi-device email as a group, both designers and developers.

First, we took a look at our company’s current e-newsletter.

Things we were doing right:

Current Newsletter

  • Concise preheader that is under 85 characters, displayed ahead of the “View as webpage” so it will follow the subject line when an email is viewed in an inbox
  • Clear hierarchy of content using both font-size and color
  • Large hero image
  • Links to blog posts and social channels, including large icons in the footer

After a brief round of pats on the back, we started the discussion about creating a multi-device email. We decided we needed to implement the following:

  • Less content. According to the Email Stat Center, the majority of viewers will not read the entirety of the email, especially large content blocks, making concise copy and visual cues extremely important to keeping their attention.
  • Higher call to action. We wanted to make sure that we had a clear way for the subscriber to access the content on our site, whether they were viewing it in a preview pane or the top-left corner of their Android phone.
  • More white space. This doesn’t necessarily entail that the space needs to be the color “white” but provide more room for the content to be fluid. For us, this meant taking away our container and letting the color flush full width.
  • Discard columns. Columns in general do not scale well.
  • Larger text. Both in headline and in copy. And while you are at it, make those headlines actionable.
  • Larger imagery. Let’s face it, we love pictures.
  • Finger-friendly buttons. Yep, we said it. Bonus points if you use web-friendly text too.

As a result, we designed and developed a winning template. Take a look. This isn’t the end of our discovery, but it is the first (public) draft. Our last template lasted for a little under a year. Don’t let your email get stale. Evaluate its effectiveness to your goals and rebuild.

If you aren’t already subscribed to our newsletter, please sign up below so you can see it live in your inbox next week!
OoooOooooh Fancy!

Is a multi-device email for you?

How does your subscriber base behave?

First things first, figure out who your subscriber base is and what email clients they use. Do they work in sales or travel a lot? If your subscriber is constantly on the go, chances are they will be viewing your email on a mobile device. To take the guess work out, many email service providers offer testing for your subscriber lists, including Litmus’s Email Analytics, which will show you a breakdown by percentage of what email clients are being used.

Won’t people just save it for later?

According to Litmus, only 3% of users will view the email on multiple devices, so while you might see a fascinating email on the bus that you want to read in detail once you get to work, it’s a good chance your ADD mind will forget about it as it gets piled on by the other million emails you subscribe to.

Isn’t it a lot of additional coding?

Not necessarily, as long as you include a multi-devices approach as part of your strategy. It’s not impossible to manipulate an existing email campaign into a mobile one, but as we learned during our Collaboradabra, it’s more successful to establish a base level of user experience that all email clients will be able to render properly.

Whether you decide to shift your campaign to be multi-device friendly or not, it is always important to constantly re-evaluate your strategy and make sure you are obtaining the highest engagement and conversions.

Hungry for more?

We attended the Multi-Screen Email Design: Lessons from the Pros webinar hosted by Silverpop, Justine Jordan from Litmus and Brian Sisolak from Trilogy Interactive and was definitely one of our favorites. Check out the following whitepaper on Multiscreen Design.

Campaign Monitor also has an extremely comprehensive guide to designing and coding multi-device emails.

We pride ourselves in designing creative solutions for our clients. We look at analytics, we devise strategies, brainstorm and create campaigns that we test repeatedly to ensure their effectiveness. Our industry is ever-evolving, which can be exciting as well as a huge pain in the @ss.

One major shift that anyone who isn’t rocking a Nokia 3315 is aware of is how much we use our mobiles for browsing the interwebs. Whether it is cat videos on YouTube or pictures of cats on Tumblr, we use our phones for everything. According to this awesome chart Litmus put together on Email Market Share, Apple iPhone ranks number one among email client usage with 23%, followed by the stubborn Outlook desktop application with 16% and Google Android coming in 5th with 8%.

Even though mobile views are dominating our world and are on the rise, it’s still too early to even think of abandoning our old-school classic desktop versions (Wah Wah).

Alright, so what next? How do you give your customers the best email experience when you have to take into account multiple devices?

Before we can successfully adopt an approach to suggest to our clients, we need to start with ourselves, at eROI. After signing up for a few webinars, playing around with wireframes, code snippets and some open conversations over coffee, we decided to meet as a group to take a look at our current newsletter and build a new, multi-device email as a group, both designers and developers.

First, we took a look at our company’s current e-newsletter.

Things we were doing right:

Current Newsletter

  • Concise preheader that is under 85 characters, displayed ahead of the “View as webpage” so it will follow the subject line when an email is viewed in an inbox
  • Clear hierarchy of content using both font-size and color
  • Large hero image
  • Links to blog posts and social channels, including large icons in the footer

After a brief round of pats on the back, we started the discussion about creating a multi-device email. We decided we needed to implement the following:

  • Less content. According to the Email Stat Center, the majority of viewers will not read the entirety of the email, especially large content blocks, making concise copy and visual cues extremely important to keeping their attention.
  • Higher call to action. We wanted to make sure that we had a clear way for the subscriber to access the content on our site, whether they were viewing it in a preview pane or the top-left corner of their Android phone.
  • More white space. This doesn’t necessarily entail that the space needs to be the color “white” but provide more room for the content to be fluid. For us, this meant taking away our container and letting the color flush full width.
  • Discard columns. Columns in general do not scale well.
  • Larger text. Both in headline and in copy. And while you are at it, make those headlines actionable.
  • Larger imagery. Let’s face it, we love pictures.
  • Finger-friendly buttons. Yep, we said it. Bonus points if you use web-friendly text too.

As a result, we designed and developed a winning template. Take a look. This isn’t the end of our discovery, but it is the first (public) draft. Our last template lasted for a little under a year. Don’t let your email get stale. Evaluate its effectiveness to your goals and rebuild.

If you aren’t already subscribed to our newsletter, please sign up below so you can see it live in your inbox next week!
OoooOooooh Fancy!

Is a multi-device email for you?

How does your subscriber base behave?

First things first, figure out who your subscriber base is and what email clients they use. Do they work in sales or travel a lot? If your subscriber is constantly on the go, chances are they will be viewing your email on a mobile device. To take the guess work out, many email service providers offer testing for your subscriber lists, including Litmus’s Email Analytics, which will show you a breakdown by percentage of what email clients are being used.

Won’t people just save it for later?

According to Litmus, only 3% of users will view the email on multiple devices, so while you might see a fascinating email on the bus that you want to read in detail once you get to work, it’s a good chance your ADD mind will forget about it as it gets piled on by the other million emails you subscribe to.

Isn’t it a lot of additional coding?

Not necessarily, as long as you include a multi-devices approach as part of your strategy. It’s not impossible to manipulate an existing email campaign into a mobile one, but as we learned during our Collaboradabra, it’s more successful to establish a base level of user experience that all email clients will be able to render properly.

Whether you decide to shift your campaign to be multi-device friendly or not, it is always important to constantly re-evaluate your strategy and make sure you are obtaining the highest engagement and conversions.

Hungry for more?

We attended the Multi-Screen Email Design: Lessons from the Pros webinar hosted by Silverpop, Justine Jordan from Litmus and Brian Sisolak from Trilogy Interactive and was definitely one of our favorites. Check out the following whitepaper on Multiscreen Design.

Campaign Monitor also has an extremely comprehensive guide to designing and coding multi-device emails.

If you like this story subscribe to our newsletter.

Get updates directly to your email and never miss a thing.

Thanks!

This entry was posted in Blog, Design, Development, Email, Mobile, Strategy, Tips & Tricks. Bookmark the permalink. Trackbacks are closed, but you can post a comment.
Google+