Mobile email design

emails to go

A lot has already been written and blogged about mobile email design. The technical characteristics of mobile devices are often in the foreground: small display, touchscreen and slow data connection must be taken into account in order to achieve an all-round positive User Experience to ensure. But is that really all?

In fact, mobile devices differ from desktop computers not only because of their technical characteristics — they were also created for completely different communicative purposes. Mobile emails are emails to go. They will On the side opened, In between flown over and en passant examined — on the tram, in a café or on the way to the next appointment. It is precisely in these reception contexts that they must prove themselves — in order to be able to remain in their inbox, at least for later reading. Successful mobile design This therefore means optimally adapting email campaigns — to mobile devices and mobile communication needs. But what options are there anyway to really turn emails into mobile emails?

The dedicated mobile version

Mobile email design can be implemented by creating a dedicated mobile version. The dedicated mobile version is a standalone version of the email, which is provided in addition to the desktop version. It is often linked in the preheader area of the desktop version and is therefore accessible to recipients.

• Technical Expense: The initial technical costs for this solution can vary. In the simplest case, all you have to do is provide a corresponding mobile counterpart for each email template used. However, more complex scenarios can include, for example, the automatic creation of the mobile version from the HTML code of the desktop version. This reduces the ongoing additional effort required to produce individual campaigns.
• Display on mobile devices: Dedicated mobile versions can be optimized so that they are displayed correctly on almost all mobile devices. However, since the appearance of the email does not automatically adapt to the recipient's devices, smartphone users usually still see the desktop version first.
• Ease of use: The biggest handicap of a dedicated mobile version is its low usability. If users of mobile devices do not take the initiative themselves, they will never see the mobile version of a campaign. Smartphone users are repeatedly forced to search for a tiny link in the preheader area of a non-mobile-optimized email. If recipients have the option to set their email preferences to 'mobile' in a user account, they automatically receive the mobile version of all campaigns — but they will also see them when viewing the email again on their desktop computer.

Mobile-oriented HTML

Why should you even go to the trouble of providing different versions for different devices? Wouldn't it be easier to regard the technical limitations of mobile devices as the lowest common denominator? In this way, an HTML version could be created for all devices, which is based on the requirements of mobile devices: Campaigns, for example, are generally designed with one column, the font size is increased, large buttons and smaller graphics are integrated.

• Technical effort: Since only one HTML version has to be created — and the layout is simple due to its mobile-orientation — “mobile-oriented HTML” requires little technical implementation effort — and does not cause any additional effort in campaign production.
• Display on mobile devices: If mobile requirements are taken into account when creating the “mobile-oriented HTML,” the emails are displayed correctly on almost all mobile devices.
• Ease of use: This is ideal for mobile users. However, the restrictions on the mobile-optimized layout prevent ideal desktop optimization. This is the biggest disadvantage of “mobile-oriented HTML” — because the majority of recipients still read their emails (also) on a desktop computer. Viewed on the desktop, however, a mobile-oriented email can quickly appear inappropriate and unattractive — valuable clicks and conversions could thus be given away.

Responsive design

Wouldn't it be nice if the look of our emails could be flexibly adapted to the device? Dynamic technologies make it possible! They ensure that recipients always automatically see the version of an email that has been optimized for their device. From a technical point of view, there are two options here: on the one hand, the server-side adjustment of the email using user agent switches, and on the other hand, the client-side adjustment through responsive design. In responsive design, special adjustments to the email source code ensure that the appearance of the email adapts to the device used. The most important and decisive factor here is the use of CSS3 media queries. With their help, the screen size of the device can be queried and then the optimal style sheet can be used to display the email. This makes it possible to display email elements differently for different types of devices.

• Technical effort: The production of freestyle campaigns is very complex due to the complicated nature of the responsive source code. When producing template-based campaigns, production costs depend primarily on whether an email platform is used that simplifies the use of responsive design for its users.
• Display on mobile devices: The mobile appearance of the email has so far been shown in the native apps on the iPhone and almost all Android versions. When using other apps or the browser, the original desktop display is sometimes still displayed. However, there are signs of a development that the number of clients that support responsive design is constantly growing.
• Ease of use: The biggest advantage of responsive design is that it meets the requirements of both desktop users and mobile users. Smartphone users and desktop users alike are offered an email presentation that meets their user needs — automatically and flexibly.

Mobile email design: Conclusion

Responsive design is undoubtedly the technology of the future when it comes to optimizing email campaigns for various devices. Due to the technical complexity, the usability of responsive design for email marketing depends on the availability of a suitable email platform — and the use of appropriate templates.