Mobile email design

Part 1: from email to mobile mail

Your customers sometimes read their mail on a smartphone and sometimes on their PC. So to ensure your message has maximum impact, email campaigns must accommodate a wide variety of display sizes, resolutions, rendering engines and reading habits. We’ll tell you how to accomplish this here – as well as offering a free design test for your campaign.

Emails on the go

Much has already been written and blogged about mobile email design. The focus is usually on the technical properties of mobile devices and how to guarantee the best possible user experience by taking into account small displays, touch screens and slow data connections. But is that all? In reality, mobile devices don’t only differ from desktop PCs in terms of their technical details; they were created for a completely different, communicative purpose. Mobile emails are emails on the go. People check their emails while waiting for the train, scan them for a minute or two over coffee, and/or open them whenever they have a spare moment. That means your messages have to be effective in circumstances like these – to ensure that at the very least they are left in the recipient’s inbox to be read later. Successful mobile email design means carefully tailoring email campaigns to both mobile devices and mobile communication needs. But what options are there for turning emails into genuinely mobile mails?

A dedicated mobile version

A dedicated mobile version is a separate version of an email distributed in addition to a desktop version. It is often provided as a link in the desktop version’s preheader area, making it accessible to recipients.

• Technical effort: the initial technical effort needed for this solution can vary. In the simplest case, it may only be necessary to provide a mobile alternative for each email template used. However, more complex scenarios may involve the automatic generation of a mobile version from the HTML code of the desktop version. This reduces the extra work required to produce each campaign.

• Appearance on mobile devices: dedicated mobile versions can be optimized to ensure they are displayed correctly on practically any mobile device. However, as the appearance of the email is not automatically tailored to the recipients’ devices, smartphone users normally continue to receive the desktop version initially.

• User-friendliness: the biggest drawback of a dedicated mobile version is its lack of user-friendliness. Unless mobile device users take the initiative, they will never get to see the mobile version of a campaign. Smartphone users find themselves forced again and again to look for a tiny link in the preheader area of a non mobile-optimized email. If recipients have the opportunity to set their email preferences to mobile in their user account, they may receive the mobile version of every campaign, but they will also see this version should they look at the mail on their desktop system.

	Dedicated mobile version	Mobile-oriented HTML	Responsive design
Technical effort
Appearance on mobile devices
User-friendliness
Exploitation of the media’s potential

Mobile-oriented HTML

Why make the effort to provide separate versions for different devices? Wouldn’t it be simpler to see the technical limitations of mobile devices in terms of the lowest common denominator? Then an HTML version could be created for all end-user devices that is tailored to the requirements of mobile ones. For example, campaigns would always have a single-column layout, with a larger font size, large buttons and smaller graphics.

• Technical effort: As only a single HTML version has to be produced, and the layout kept simple for mobile users, the mobile-oriented HTML option requires little technical effort – and creates no extra work during campaign production.

• Appearance on mobile devices: If mobile-device requirements are complied with when mobile-oriented HTML is created, the emails will be displayed correctly on practically any mobile device.

• User-friendliness: This is the best option from the mobile user’s point of view. However, restrictions on the mobile-optimized layout prevents the creation of emails that are ideal for desktop users. This is the biggest drawback of mobile-optimized HTML – because most recipients continue to read their mails (at least some of the time) on a desktop computer. When viewed on a desktop, a mobile-oriented email can look inappropriate and unattractive, losing you valuable clicks and conversions.

Responsive design

Wouldn’t it be great if your emails could simply adapt their appearance to the device? Dynamic technologies now make that possible. They ensure that recipients are automatically shown the email version that’s ideal for the device they’re using. Technically speaking, there are two ways of doing this: modify the email at the server end by means of user agent switchers, or at the client end via responsive design. With responsive design, special modifications of the email source code make sure the email’s appearance is adapted to the relevant device. The decisive factor is the use of CSS3 media queries. With their help, it’s possible to query the device’s screen size and then use the most appropriate style sheet for displaying the email. This means sections of the mail can be displayed differently on different device types.

• Technical effort: Producing freestyle campaigns is very time-consuming due to the complex nature of responsive source code. In the case of template-based campaigns, the production effort depends primarily on whether an email platform is deployed that offers user-friendly responsive design capabilities.

• Appearance on mobile devices: Currently, the mail’s mobile version is shown in the native apps on the iPhone and almost all Android versions. In some cases, when a browser or other apps are used, the original desktop version is shown. However, the number of clients that support responsive design is growing steadily.

• User-friendliness: The biggest advantage of responsive design is that it meets the needs of both desktop and mobile users. Smartphone users and PC users alike are automatically shown an email tailored to their requirements – the most flexible solution of all.

Conclusions

Without doubt, responsive design is the technology of the future when it comes to optimizing email campaigns for different devices. In light of its technical complexity, the practical usability of responsive design for email marketing depends on the availability of a suitable email platform – and the use of appropriate templates.

Photo “vater mutter kind”: arzt / photocase.com