In 2017, responsive design is no longer a question of “if,” but of “how.” And this rule doesn’t just apply to websites either. Mobile email is constantly on the rise, so if you haven’t hopped on the mobile optimization bandwagon yet, time is running out!

88% of advisors feel that mobile-friendly capabilities could make fund group emails more effective

Source: 2017 StoneShot Digital Marketing Survey

This may seem like a friendly suggestion, but the truth is advisers have very little patience for emails that don’t work on the go. In fact, if it doesn’t scale correctly, odds are it’s going to end up in the deleted folder.

45% of advisers immediately delete emails that don’t look good on their mobile devices

Source: 2017 StoneShot Digital Marketing Survey

Our latest Digital Marketing Survey revealed that around 70% of investment professionals check email on a mobile. Large desktop emails are usually illegible and messy on these compact screens, putting your email at risk of being deleted. Responsive design offers a positive user experience and maximizes audience engagement – things that should be a priority when sending out communications.

Converting existing email templates to responsive isn’t easy, but it’s worth the investment. When making the switch to responsive, there are four steps our team considers: Analysis, Redesign, Coding/Testing, and Training/Deployment. We invite you to use these steps to map out your own emails and start thinking responsively.

Analysis

The first step is essentially getting a lay of the land. Take the time to consider the reasoning behind making an existing email template responsive. Research your audience: How many contacts view emails on their mobiles? Which devices do they use? Analyze your existing templates to decide how much the design will have to change and how this will affect brand guidelines.

Another big question that needs answering before beginning work is whether the skills required to design and code a responsive email are available in-house or if you’ll have to outsource the work (and create a budget). All project details should be finalized before moving on to the next stage.

Redesign

Static emails designed for desktop view are usually very wide (650+ pixels), contain small links and text, and are comprised of complicated layouts. These features don’t translate well for mobile or tablet use since the text becomes illegible, the small links “untappable,” and users will have to scroll horizontally (gasp!). Overall, it makes for a terrible user experience.

Revised design, taking into consideration responsive technology capabilities, is vital for effective cross-compatibility. During the redesign stage, you’ll put together two designs: a desktop version designed with mobile in mind, as well as a mobile and tablet version optimized specifically for smaller screens. A few things to consider when redesigning:

  • Arrange your content into stackable blocks
  • Place all important design elements in the upper portion of the email as scrolling is harder on a touchscreen than with a mouse
  • Scale down to only the most essential content to reduce clutter on small screens
  • Have prominent CTAs and touch-screen-friendly buttons and links
  • Create a mobile-specific high-resolution header if needed
  • Enlarge font size to make it easier to read
  • Keep designs as simple and clean as possible to increase loading speeds
  • Ensure the new designs are still on-brand

Coding and Testing

With the new designs in place, it’s now time to get down to business: the code. Responsive email coding can be a challenge as it involves a radical shift in thought compared to traditional coding. It’s considerably more difficult to code than a responsive website so you should take that into account when deciding whether this work will be done in-house or outsourced.

Another obstacle with responsive email coding is the framework. Web frameworks, such as Zend and Ruby on Rails, won’t work across all email clients, and so far there haven’t been any open-sourced, fully successful responsive email frameworks released. At StoneShot, we created our own bespoke responsive framework as this was the only way to guarantee accuracy.

For the full technical details, check out this great guide from Litmus.

Once coding has been completed, rigorously test your email across all devices and email clients. Chances are your code won’t work seamlessly everywhere, so don’t slack on the testing.

Training and Deployment

Congratulations! Your email has survived the testing inquisition. It’s time to launch. That’s one responsive email down, and many more to go. The next step is to begin pulling your email’s open and click rates to compare against the baseline.

Moving forward in the responsive design world, always remember you’re working in two environments: desktop and mobile. Design with mobile in mind from the beginning: block layouts, concise content, simple code, etc. Your audience will thank you for it!


For more tips on how to acheive mobile marketing success, check out these helpful articles:

If you need help with any of the stages of building a responsive email template, StoneShot offers bespoke services to meet your needs. For more information, shoot us an email at engage@stoneshot.com