Today, responsive email design is more important than ever before. Roughly 50 percent of all emails are opened on a mobile device, and that number is projected to climb each year with younger smartphone users entering the professional world. Plus, email is becoming easier to check with the increasing speed of modern mobile devices. Whether you’re in the car (shame on you, shame on us all), on the train, on the toilet, lying in bed or laying out at the beach, your email can be accessed in a matter of seconds.
Of course, with the increasing popularity of Web browsing on mobile devices, along with thriving social media apps such as Facebook, Snapchat and Instagram, the way we consume information is changing. People are becoming accustomed to scrolling through hundreds of pieces of content daily, on average, and these behaviors are no different for email browsing. In order to captivate your audience, your newsletter needs to be able to stand out among the rest, while also being dynamic and intuitive. If your email is missing one of these properties, then the viewer will lose interest faster than you can say “Siri.” Much like the modern approach to responsive Web design, responsive email design must be implemented with mobile in mind, first and foremost. The term “responsive” will become a thing of the past as new technology continues to facilitate the integration of responsive design into marketing, and non-responsive content will fade away, unable to compete. What we’re left with is one option for email design: make it responsive.
However, it doesn’t end there. The trend has been growing for a few years now and soon everyone will be moving forward with it. There are many ways to take your responsive email campaign to the next level. Below are some of the best practices and reasons why you need to start now:
Don’t come on too strong
People don’t want to see spam in their inbox. It’s easy for someone to overlook the title of the sender and instantly judge the subject line, seeing key spam phrases like “As seen on,” “Order your,” “Click here,” “Get” or “Compare,” so be careful about your phrasing or that beautiful responsive email you’ve worked so hard on will never even be opened.
Make it pop
Bright colors and high contrast naturally draw attention. Bold candy colors can excite the reader and shift the hierarchy to your liking. For example, making your logo and call-to-action brighter and bolder will help the reader find the most important information right away. Color is also a great way to break up the monotony by separating sections of the email with accents and thin rules, or partitioning the layout with alternating background colors. This will help guide the reader and you can highlight elements that you deem the most important.
And ... Action!
A popular feature of many email designs is the use of animated GIFs. These spectacles can be used to command the viewers’ attention. GIFs aren’t a new concept but the extra effort can yield a more entertaining effect. Naturally, when people see motion they don’t want to look away until they know what they’re seeing; just make sure that it’s clear what you’re trying to communicate and don’t make the animation too long.
Know your content
Part of the fun in making layouts responsive is seeing multiple columns collapse into one as the screen size is adjusted (Wow, like magic!). However, don’t build multiple columns just for the sake of proving that you can do it. Single-column layouts are easier to scroll through for the reader. Plus, this reinforces the reader’s ability to retain the information in a linear fashion. Don’t overcomplicate the flow of your email if you have less content.
Paint a pretty picture
Imagery conveys a message in an instant. For example, think of all the arrows and stick figures on signs you walk past every day. Accompanying type with an icon or a small illustration can reinforce the meaning of the copy. Photography has the same effect, and can be used with reverse type or type overlay to create a more substantial piece of information. As we all know, “a picture is worth a thousand words," so be careful not to overload type on an image, use several words at most, then let the picture speak on behalf of the other 990-something words.
Finally, what you really need for a successful responsive email campaign is a back-up plan. Even when you’ve accomplished all of the previous points and you’ve made a beautiful responsive email, there are some email clients that do not support media queries (and those clients are a large percentage of the market). In many cases this will result in your email loading without any images, which is going to make your email look pretty bad.
Fortunately, there are some ways you can safeguard your email and still get your message across. First, link copy to all of your images as descriptions. For example, if your image is showing a photo of a musician in concert (for promotion, etc.), then title the image block as “[insert famous musician here] performing on stage” so that the reader knows what the image is supposed to be. Also, make sure that when images are not loaded, the image block is minimized; that way all of the content is still visible. If the image block retains the same size that it would have been if it were loaded, then all you’re left with when the viewer opens your email is a big empty block that pushes other important content out of the way. Keep in mind that it is recommended to keep roughly a 60:40-ratio between copy and image. That way, if images aren’t loading and the image blocks are collapsed, then the reader can still see all of the crucial information.
Opportunities for email designs are constantly improving, and responsive designs are here to stay. Integrating the right elements in your email and practicing proper development techniques will guarantee success in your responsive email campaign.