Designing Emails for Mobile Devices

Designing for Mobile – 6 Strategies to Optimize

As I introduced in my first blog about the recent ExactTarget Connections 2011 conference, this was a great session that reviewed the many issues surrounding designing emails for mobile devices. Chris Studabaker of ExactTarget delivered the seminar.

Chris spent a bit of time going through some interesting data that showed what percent of subscribers viewed their emails on a desktop email program only (e.g., Outlook, Mac Mail), on mobile only, and on the web. You should uncover what those stats are for your subscriber base to determine the most appropriate mobile design strategy and then track those stats over time.

Chris then reviewed six primary strategies for thinking through how to design your email for mobile. The extent of effort you go through needs to make sense from a return-on-investment standpoint.

1. Ignore — If you don’t have many subscribers using mobile, then simply ignore mobile.
2. Plain text — Create a single column of text.
3. Aware — Be aware that mobile is important, but make the lowest possible investment, and don’t get too specialized with your design. Perhaps use a single column. See Threadless for a good example. The goal is to keep primary content in one column to have only a minimum investment.
4. Fluid — Fluid layout is still evolving and uses percentage-based layouts. This is best with simple layouts. Readability is key, and scaling would ruin the email. For example, the Key Ring application uses fluid.
5. Skinny — This strategy is when you need to get much more serious with your mobile design strategy. You’ll want to design your emails to be 320 to 520 pixels wide. This strategy makes sense when you need to balance desktop and mobile usability. Chris showed an example of how AT&T uses a link in its regular email to see the mobile version. He also pointed out that while it may look okay, AT&T probably didn’t use the best strategy. It may have taken less effort to create a mobile version that also worked for a desktop client, thus reducing overall cost of design and production.
6. Responsive — This strategy uses styles that differentiate between a large versus small screen. You can employ different styles using the @media query to enact alt styles based on the general viewing environment, allowing simple elements to adapt and change. We’d recommend testing this across email clients to ensure that you are getting the results you desire. You can learn more about the @media tag in this post.