Ever since the advent of email as a marketing tool, and the use of HTML to include images, logos and layout, it has been an issue that the many different email clients – from Outlook and Mac Mail to Hotmail and Gmail – render (display) your carefully designed message differently with sometimes drastic consequences as you can see in the images below.
With the growth in smartphone usage, and the explosion in the use of mobile email this issue just got even more complex! The good news is that with the advent of the iPhone, Android and big improvements from Palm and RIM, it’s becoming less important to think of mobile as a different email platform altogether, and if you follow the basic rules for ensuring that the email works on all desktop email clients, then it should be fine when viewed on a smartphone. There are however still a number of design issues that need to be considered when optimising email for viewing on a mobile device:
- Keep the width to less than 600 pixels. Although we have always recommended 600px as an optimal width for email, the width issue is even more important now as mobile devices have small screens. However, they are also fairly intelligent, and so although some may have screens below 600px, they do in fact render the email fine at this width, just be sure to make the text big enough.
- Use the @media filter CSS now has provision for and @media query. This allows you to add css specifically for mobile devices as the css contained in it will be ignored by non mobile clients. The query should be placed in the <head> part of the email. Although this section is ignored by some desktop clients it is processed by mobile email clients, and so can be used. Remember though to keep all your main css in-line and just use @ media for the mobile css tweaks.Here is an example of an @media query to give you the idea of the format:@media only screen and (max-device-width: 480px) { .text { font-size: 20px !important; } .headline { font-size: 24px !important; } }The first line is the important one @media only screen and (max-device-width: 480px)this ensures that the css is only applied to screens that are smaller than 480px (eg a landscape iPhone). The css is then contained in {} and takes the normal format.Remember to use the !important on key lines as this ensures that it will overwrite any inline css contained in the body of the email.
- Don’t forget the text version Over recent years as HTML on desktop email has become the norm, the text version has lost some of its importance. However, not all mobile users will be able to view HTML so don’t forget to include the text version. Most good emailing systems (including BSA Emailworks) will offer a very simple way to do this.
- Avoid small text Small text rapidly becomes unreadable on mobiles, and although most will allow zooming to make the text readable, the impact of the message is greatly reduced. So bear this in mind, and ensure that all key messages and hook lines are in larger text. Note however that this is also good practice for non mobile email.
- Use images to get your message across It is said that a picture paints a thousand words, and this is most definitely true when it comes to mobile email, especially as many mobile email clients (including the iPhone) download images by default.Images can really add impact to mobile emails. If you are using images though don’t forget the Alt tag for when images don’t display.
- Optimise the subject line Good subject lines are key to a successful email campaign irrespective of the platform they are being delivered to, but as mobile devises usually don’t have a preview window. The subject is all the recipient will see until they open the message
- Don’t crowd links If you are including links in your email (and I would argue that you should) be sure to space these out across your copy. If links are very close together it makes them difficult to select using the touch screen. As a rule of thumb (excuse the pun) the optimal size for a clickable area on a mobile touch screen is about 44 pixels square)
- Think about your landing pages There is no point in optimising your emails for mobile devices if the landing pages that lead off the email are unreadable on the mobile platform (more about the concept of joined-up marketing in the near future). Although it is always a judgement call as to how far to go in the optimisation process, usually based on what proportion of your target market are likely to receive the email on a mobile, this point is always worth considering. If you believe that a significant number will be using mobiles, developing dedicated landing pages optimised for mobile should be a consideration.On this subject, if you are using WordPress to manage your website, the Mobile detector plug-in is a great tool to change the layout of your website based on which device is being used to view it.
As mobile grows, as it is and will surely continue to do, increasingly needs to be considered when planning email campaign, but always remember that for the foreseeable future, there will still be people accessing it on non mobile platforms, so you still need to ensure that the email also works on the various desktop email clients.
