This is a five part series from Charity Dynamic’s fab consulting team. Amy Martin wrote about the why of responsive email in part 1. Below is a continuation based on design best practices.
We all wish we had a Tim Gunn in our lives. Someone who gives you good feedback and always tells you, “Ok, just make it work.”
From a best practices standpoint, there are certain design aesthetics to make it WORK. We can generalize to optimize open rates across email applications, but the main thing to keep in mind is that no matter how well you design or code an email message, there will always be a caveat that not all email applications or clients are created equal. This stems from the use of media queries to detect viewpoints, not device, and alter the content accordingly. I have a dream where freedom will ring from the mountain tops to all the email app creators and each user will have a universal experience, but until then, we can do our absolute best to encapsulate as many as we can without ignoring the behind-the-times adopters. A useful grid displaying which email applications support media queries can be found here.
With that technicality out of the way, here’s what’s actually possible with a responsive email design:
- Change hierarchy
- Change navigation
- Enlarge fonts
- Change colors
- Change layouts
- Scale images
- Adding padding
- Change or hide content
It’s important to mention that not all of these elements need to be utilized, but should be considered as more of a set of tools available to you only if they make sense for the overall design and message.
In turn, every iteration of your email designs should include these design best practices to create a beautiful and responsive email:
- Body copy is at least 16 pixels & up
- Headlines are 22 pixels & up
- Buttons or Calls to Action are no less than 45 pixels by 45 pixels
- Make sure these are left or center aligned to avoid being cut off on devices like Android (Oh, just join the dark side and get an iPhone already!)
- Provide sufficient space of 10 pixels & up surrounding tapp-able elements
- Significant contrast between juxtaposed elements to accommodate for accessibility, as well as screen brightness
- Relocate “If you can’t view this message…” language to the footer of your email so it does not display in the preview pane of the email application
- And as with all great designs, the core of the email design begins with that famous king—no, not the Burger King guy or even Louis VIII, but CONTENT. Content is always king. Without great content, you don’t have a prayer for a great responsive email. Remember the rule of KISS—“God gave rock and roll to you” and always Keep It Simple Stupid!
Living and designing by these easy guidelines will not only let you rest easy knowing your email is safe out there in the world, but your users will appreciate and respect the thoughtfulness of your communications, and maybe even love you for it!