How does your email communication look on a smartphone?

According to a recent survey, 58% of smartphone users check their email as soon as they wake, compared to only 11% checking their social media.* Due to our ever busy lifestyles, consumers expect content and information on the move, rather than having to wait for a quiet moment at home. Henceforth, the need for email to be readily available wherever we are, at any given moment is paramount, especially for people whose careers depend on it.

Recent research has revealed that worldwide sales of smartphones have risen 74% year-on-year, with Google’s Android operating system accounting for 43.4% of the mobile OS market. Nokia’s Symbian OS is practically half this, at 22.1%, closely followed by Apple’s iOS which has 18.2% market share.

So, with smartphone sales constantly on the rise, making sure your HTML emails look as good on a computer as they do a mobile device is critical. Here are a few tips to achieving this:

The width issue
The iPhone 4 has a maximum width of 640 pixels, for Android phones it is 480 pixels, Blackberry phones about 360 pixels, and earlier iPhone models have a resolution 320 pixels wide. Here, the standard HTML for email best practice guidelines pop up, which dictate that your template should really be no wider than 600px for ultimate optimisation. All of the devices mentioned above will scale the email down to fit, so ensure your template fits the mould and is no wider than 600 pixels maximum and it will look good on all devices.

The text issue
The only significant rendering problem that has so far been uncovered across mobile operating systems is the automatic resizing of text. For instance, the default mail client on the iPhone and iPad will display text at a minimum size of 10pt/13px/0.8em/80%. If a lower value has been specified it will be ignored and defaulted to 10pt. Font sizes over this will ensure the text is displayed as expected.

It appears that this is necessary to ensure text is easier to read on your mobile device. Unfortunately, if the design of your template has left little room to breathe, then this could result in quite an obvious break. Such problems usually crop up in images that have been chopped into slices, and look quite jarring in an otherwise well oiled template.

So, to override this command and prevent the font from being resized, use the following. This will need to be placed in the header or inline:

-webkit-text-size-adjust:none;

The click issue
As mentioned above, the space available to view email on a smart phone is considerably small. In emails that are very copy heavy i.e. newsletters, you need to be aware of the size of your text call to actions. Remember that a lot of smart phones are touch screen. Are your tiny text call to actions finger tappable? Think about how you can integrate buttons or icons into your email to accommodate for this.

For further queries or insight, don’t hesitate to pop an email to production@adestra.com.

*Exact Target Subscribers, Fans and Followers Report 2010