We’ve already established that responsive email design creates a better experience for your reader. Mobile opens are on the rise and showing no signs of slowing down. These days, less than half of emails are being opened on desktop. You heard about responsive web design-now it's time to put your newsletter templates to use!
Below is our take on the most useful guidelines when using and building responsive HTML emails.
1. Stick with Simplicity
Keep in mind the restrictions email clients have and be sure the layout can degrade gracefully for clients that provide limited support. Do not overcrowd your message with content-keep in mind how far the reader will be scrolling (or not) on their phones. Like Jacob always says, "Brevity is the soul of responsive email."
2. Pre-header Text
The pre-header is one of the first three lines a subscriber sees when viewing an email. Use a pre-header to catch your reader’s attention and entice them to open your campaign. A best practice is to limit the pre-header text to 85-100 characters. Don’t forget to test the pre-header content in different email clients to know how many characters will see.
3. Design for Fingers and Thumbs
Consider where your buttons and links will be on the screen. Placing buttons on the edges of the screen for a mobile device make accurately clicking a button more difficult. Do not be a afraid of white space! Make sure clicking will not require the accuracy of a world-class sharpshooter.
4. Remember the Hierarchy
Highlight key points and important information by building a hierarchy in the campaign. Make important links and calls to action stand out. Remember that your mobile reader is scrolling from the top down and that most will not make it to the bottom of your email. Put the most important information at the top of your email and prompt your reader to keep scrolling to the end.
5. Test, Test–and Test Some More!
Before you send, always test that email out! Preview your message across a multitude of devices. Tools like Browserstack or Litmus can help to ensure your content displays perfectly no matter what device your audience is using.