Industry news

Rendering images on smartphones

I’ve received some feedback from clients having issues rendering images on smartphones. With the sale of smartphones going up and more and more people receiving email on these devices, it’s normal to be concerned about the number of subscribers reading your emails on a handheld device.

After some research, I’ve been able to come up with a few key points that will help ensure that images in your email campaigns render more easily.

1- Make sure the sender exists as a contact 
A smartphone’s way of marking you as a safe sender is by checking its contact list. It’s just the same as other email clients that check against an address book – but in this case, it checks the phone’s contact list.

2- Enable “Load Remote Images” 
This option is used to protect your privacy. Make sure you check the phone’s settings and allow the email client to load images from a remote server. (You can usually find it under the mail options in the settings panel). This will also help you target your subscribers better and help you understand your open rates.

3- Size matters
A few weeks back we talked about the importance of template sizes and how they rendered in different email clients. The same applies here. Abiding by the same rules, keeping your template size under 600px will maintain the smartphone view in place and the email (and images) will not look out of place. Smartphones typically render at 320px, so 600px will show the email at 50%.

The viewport meta tag is a neat trick for iPhone devices. It allows the width of your message to be viewed at 100% inside the viewport (screen) and force the vertical dimension to render at 320px:

<meta name = “viewport” content = “width = 320”>

Keep in mind, however, that this only works for the vertical view. The landscape view will render the email differently. More information on the viewport meta tags can be found here.

As an alternative, CSS Media Queries are also widely used and more reliable in the mobile world.

@media only screen and (max-device-width: 480px){

This will activate the devices viewport when the screen is any less than 480px.

Considering the items above when you’re developing a new campaign will make it easier for smartphone users to view your campaigns, as well as help you easily track engagement and target subscribers more effectively. While there is no email design standard for smartphones yet, we do see this coming in the near future, and we certainly welcome any more tips and tricks you’ve noticed as well!

Author Cakemail Support

More posts by Cakemail Support