Tips for designing emails for smartphones Published March 7, 2012 With the addition of reporting by device to our email marketing software, people are now able to tell what proportion of their recipients are opening emails on their desktop, on tablets or on their smartphone. This posed a question for many of our customers: “We had no idea that a third of our customers were using their phones to view our campaigns; should we be doing anything differently?” In an ideal situation you’d be able to create a separate version for people to view on their phones, but the reality is that not only will this take up even more of your valuable time; you’ll end up with a pre-header that contains far too much text. This is before you’ve even started your email, so it’s not really ideal. Fortunately, there are some very simple rules that you can follow to ensure that your email designs will look good however people are opening them. Don’t forget everyone else! The most important thing to remember is that even if sizeable proportion of your customers are viewing your emails on their phones, the remainder will still be using their standard web browser or email client, so creating designs for these people should still be a priority. If your campaigns were successful before you even considered mobile design, then you probably won’t want to change too much, at the risk of people losing their familiarity with your brand. Width of your email and layout The most common width of HTML emails is 600px. The biggest and most obvious issue that hinders mobile devices is that you’re limited to viewing the email in a much smaller window: iPhones for example only have a resolution of 320px wide. This means that when you zoom in you’ll have to scroll around side to side of the email just to read whole lines of text. How you get around this problem depends on what style of email you’re designing. If you’re aiming to have blocks of content stacked on top of one another, then it may be worth reducing the width of your email to around the 500-450px region so that once you’ve taken out any margins and other blank space at the edges, the actual width of the text area is nice and easy to view, and the recipient only needs to scroll down the email to read it. On the other hand, if you’re splitting your emails content into columns, for example a text area parallel to a picture, then you could consider making the overall email wider, to 640px, so that when people zoom in to read the message, they will have two mobile friendly columns that people can easily flick between. Links in your email Having your recipients know where they’re meant to be clicking is a key requirement for any email, but because of the more limited view on phones, this is now even more essential. Make sure that any text links are consistent in colour and style, preferably marking them out from the rest of your content, so that people are very clear on what they need to do to visit other pages or get more information. If you’ve got image links that you want people to be visiting, for example to your social pages, consider making the images slightly bigger with more clear space around them, so that people are both able to spot them easily, and click them without getting frustrated because they can’t select the exact area they want. Style of your content Even with the ability to zoom in, you’ll still want to make sure that all your text is nice and easy to read- body text should ideally be 14pt in size, but certainly no smaller than 12pt; for headers and call-to-actions, 24px to 30px will give your most important sections the visibility they deserve. And finally… your website It’s very likely that you’ll be linking to your website in your email campaigns: you can follow all the best practice in your emails you like, but if you’re using them to get direct traffic to your homepage, and this isn’t optimised for being viewed on mobile devices, then you’re instantly going to undo all of your hard work!