{"id":10207,"date":"2015-11-05T13:30:17","date_gmt":"2015-11-05T13:30:17","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=10207"},"modified":"2015-11-05T13:30:17","modified_gmt":"2015-11-05T13:30:17","slug":"on-designing-emails-part-2-making-your-emails-responsive","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/on-designing-emails-part-2-making-your-emails-responsive\/","title":{"rendered":"On Designing Emails: Part 2 \u2013 Making Your Emails Responsive"},"content":{"rendered":"

We gave you the basics of making HTML emails work<\/a> in our last post, and now we\u2019re going to get into how to make your emails responsive.<\/p>\n

For maximum impact, HTML emails need to look good on all devices \u2013 from the large screen to the small screen. According to Litmus, 53% of emails are opened on mobile devices<\/a>, meaning that you need a responsive design that works on mobiles as well as on desktops.<\/p>\n

Non-responsive emails tend to be only glanced at and deleted, so having a responsive design means higher opening and click-through rates, maximising your marketing impact.<\/p>\n

Here\u2019s how you can make sure your email works across different devices and platforms.<\/p>\n

Work out your design<\/h3>\n

\"Designing<\/p>\n

When starting with your design, create mock-ups at two or three widths (such as desktop, tablet, and mobile). Design first for the mobile, then build up on it. Create a wireframe mock-up then a full colour mock-up to see how your design would work.<\/p>\n

Responsive designs are informed by understanding the code constraints \u2013 making significant changes in the layout between desktop to mobile may not be possible, especially in all email clients.<\/p>\n

Single-column emails work especially well, since there is less repositioning of the elements. You may still need to move images around, but at least you\u2019re not having to worry about a second column.<\/p>\n

Your content should be:<\/p>\n