Responsive Email

Consumers and their smartphones

Mobiles were introduced to the market in 1992 by IBM and were largely publicized by Apple in 2007. Now, smartphones are an integral part in people’s lives around the world.

A mobile has become an essential communication tool for everyone. This revolutionary product seduced people right from the beginning. Ever since this phenomena, social activities have taken a new turn. A smartphone is now a personal assistant to half of mobile users.

3 out 4 mobile users use their phones to browse the internet almost every day(3).

(1) Statista: Number of smartphone users worldwide from 2014 to 2020 (in billions), 2017 (2) Go-Gulf statistics about the wordwide use of smartphones, 2012 (3) Mobile marketing barometer published by Mobile Marketing Association in June 2014

By 2018, 36% of world’s population is estimated to use smartphones(1). Thanks to Wifi, 3G and 4G connection, it’s easier to have an internet connection on mobile phones.

A study on the usage of smartphones was led by Tecmark in the UK in September 2014. They found out that smartphones are the most used gadgets in our daily lives.

2000 mobile users were questioned and it was discovered that each one of them checks their phones 221 times daily.

Their usages :

With all the applications available in our smartphones, this device has become very helpful and useful in our daily lives.

(1) Statista: Number of smartphone users worldwide from 2014 to 2020 (in billions), 2017 (2) Source : http://www.tecmark.co.uk/smartphone-usage-data-uk-2014/

Smartphone market

Smartphones are selling more than feature phones: 49.5% of the population prefers to use smartphones(1). The number of smartphones keeps increasing every year: In 2018, 1.5 billion smartphones were sold worldwide compared to 680 million in 2012(2).

NUMBER OF SMARTPHONES SOLD AROUND THE WORLD(2)

OPERATING SYSTEM

Apple was the leading operating system for a long time but it has taken a back seat for the last few years. Since, Android is holding the majority of the mobile operating system market share. It has gained popularity among smartphone users for its various features.

With 64,76% share in the mobile operating system, Android is in the leading position, followed by Apple holding 32,93% of the market(1).

(1) Netmarketshare «Mobile/Tablet Operating System Market Share» (2017)

TOP 10 BESTSELLING SMARTPHONES IN THE WORLD

Since the iPhone 6 was released in September 2014, Apple’s smartphones are the most sold.

Gadgetsnow, World’s 10 highest-selling smartphones revealed (2017) ht tp: //www.gadgetsnow.com/sl ideshows/ 10-highest -sel ling-smar tphones- revealed/photolist/57859671.cms

Mobile email reading

More emails are read on mobile phones. 37% of emails were read on smartphones in 2014 compared to 31% in 2013 and 17% in 2012, showing a growth of 117% in 2 years(1). Now, in 2017, Litmus found that 54% of all emails are read on a mobile device(2).

(1) Study published by Return Path (2)) Litmus ”State of Email” (March 2017)

The type of devices used to check emails(1) :

(1) BlueHornet «Customer views of email marketing 2015»

3 DIFFERENT WAYS TO CHECK EMAILS ON A SMARTPHONE

There are various applications that enable email reading on smartphones:

1. Native email apps

The majority of mobile users use their native email apps to check emails. For iPhone, the app is called Mail and for Android, it is called Email.

The user will only have to configure the email app since it’s already installed on every smartphone. It allows to gather many email addresses in one application, which is convenient when we have different email addresses.

2. Email apps

At present, all email clients have their own app. Even though the features are similar to the native email app, the usability of the app and the content varies for each email client.

Mobile users can download the email app through the appstore and configure it.

Each app and each email client has its own way to interpret the HTML code and to display the content.

3. Web browser

It is possible to access you email inbox from the Safari web browser on iPhones or the internet explorer on Android, these two applications are installed by default.

From the web browser, a mobile user can access his/her inbox

TECHNICAL DETAILS TO KNOW

The navigation on touchscreens is very intuitive. But it’s not always easy to use and it can be irritating at times if the content is not adapted to the device. Fingers can’t be as precise as a computer mouse, so there are a few rules to respect for your email’s and website’s design:

A preheader is the text on top of your email. Most often, it is used for a link to display the message on a web browser. Usually, the sentence is something similar to «Display this email in your browser». Most marketers don’t exploit this space ideally, because they might not know that iPhone and Android email apps display the beginning of the preheader right after the subject line. Use this space to add complementary information in addition to your subject line and convince your recipients to open your message.

To make sure that your email is correctly displayed on smartphones, we recommend to use Verdana or Arial font. These styles are easy to read and they are easy to read on a display. For the visuals you use, we recommend to apply strong contrasts. Light contrasts are not suitable for small screens because it will make the reading difficult. You should also think about recipients who will open your email as soon as they wake up, so the colors should not be too sharp to the eyes. Avoid certain colors such as yellow, which can be unpleasant for reading.

Why it is important to make a responsive email

Depending on the support functionalities of the application used to read emails, a campaign that is non-responsive could display in 2 ways:

The width of a document is resized to the small screen. You will see the whole newsletter at once, which allows you to get a good overview of the placement of the different modules, but it will be quite impossible to read any of the text or clicking on a link without zooming in.

The email’s width does not adapt to the screen width and you see the content in its real size. Words and sentences are legible, but text blocks get shortened or moved around. The hierarchy of the information is not clear, and it will be difficult to guide through the reading of the message.

You will have to zoom out to understand the structure of the message and identify the information.

These constraints are not exclusively linked to email marketing, but rather the characteristics of a mobile web. When you are checking out a web page that is not optimised for a smartphone, you will face the same issues. Who hasn’t faced this painful experience with a menu or survey?

In order to avoid that your readers need to zoom, you can control the display with a meta viewport attribute in the < HEAD > tag of the HTML code. This will ensure that your content adapts automatically to the width of the device used.

Exemple :

width : pixel size of the screen

The goal of responsive design is to optimize a website or an email for all types of devices. This can be done for each device separately or by groups of similar screens.

How to make it responsive?

There are many possible ways. We will explain them in the following chapters.

Fluid email

WHAT IS A FLUID EMAIL?

A fluid email is a layout adapted to small and large screens. The content is automatically resized to the device used without bringing any change to the page structure. If your email is already composed in just one column, you can use a fluid email.

To adapt your email to different types of devices, you should set the dimensions of your elements in percentages.

The code to use:

width : image width in percentage for small screens

max-width : maximum image width for larger screens and computers

height : automated height to maintain image proportion

Beware: max-width and min-width aren’t compatible on Outlook 2007,2010 and 2013.

Responsive emails using media queries

Media queries are instrumental when it comes to adapting your email content for mobile devices. Its CSS3 feature allows you to identify the device width and accordingly apply a different content.

This widely used method consists of targeting the CSS pixel size of the screen:

min-device-width : minimal screen width in CSS pixel

max-device-width : maximal screen width in CSS pixel

Code to use:

In this example, we have set the limit to 480 pixels. This means that emails opened on mobiles with a width inferior to 480 CSS px will display an optimised version.

Media queries offer multiple combinations. Here are 2 possibilities to keep in mind:

Selection based on the orientation of the device (portrait or landscape)

Example :

Selection based on the screen resolution or pixel ratio

Example :

DEFINE THE WIDTH OF A RESPONSIVE EMAIL

Here is an overview of different smartphones in the market (in bold are the most sold mobiles in September 2014):

The smartphone’s width in CSS pixel matches the 3rd column.

WHICH MOBILES AND APPLICATIONS ARE COMPATIBLE?

Media queries have been tested on:

Depending on the type of operating system, certain rules aren’t taken into consideration like media queries. Test your campaign on your mobile to check that everything works well.

CODE FOR RESPONSIVE EMAIL

The media queries must be integrated in the part of the message like the following:

Followed by the part <BODY> showing the email’s content

In media queries, indicate how your email should be displayed with special features:

The CSS «container» class allows you to fix the width of the table in percentage, we have indicated 80% here

The CSS «title-red» class allows you to change the color of the title on mobile version

The CSS «img-mobile» class let you resize the image, in percentage, depending on the screen width, we have indicated here 80%

The CSS «column» allows you to have an email in one column instead of 2 columns

The CSS «hide-mobile» allows you to hide elements from the traditional version in the mobile version

Each CSS class must be introduced in the < BODY > part of the HTML code depending on the elements you want to change. The priority rule !important must be added to the media queries, so the particular style is prioritized to the style indicated in the < BODY >.

Here is an example:

EXAMPLES OF ADAPTIVE EMAILS

The EmailBuilder, a responsive editor

With the Mailify EmailBuilder, you create newsletters in a breeze!

Mailify’s revolutionary graphic editor guides you step by step through the creation of a newsletter. All you have to do is to drag and drop the text and/ or image blocks, and your newsletter layout is created in minutes!

CREATE RESPONSIVE NEWSLETTERS

With the Mailify EmailBuilder, your newsletter is automatically adapted to be correctly displayed on smartphones. The tool optimizes the graphic creation and allows you to visualize your newsletter on a smartphone in real time.

You can either create a newsletter from scratch, or choose a first base to work on:

Layout created by graphists are also proposed:

Whether it is built from scratch or a layout chosen from Mailify’s template library, each creation is automatically adapted for smartphones:

The email content is created and instantly updated to be responsive on mobiles.

The EmailBuilder is available in the Mailify Software. Download and discover the tool. https://www.mailify.com/free-account?lang=EN

Conclusion

Reading emails on smartphones has become a habit and is firmly entrenched among mobile users. If companies ignore to acknowledge this consumer behavior, their communication by email can suffer serious consequences.

Emails can be made responsive for all devices using the methods presented earlier.

By making responsive emails, you are facilitating email reading on mobiles for your contacts.

Presentation of Mailify Sunrise

As a leading email marketing tool in Europe, Mailify helps companies create and manage their digital marketing campaigns.

Since 2001, the software has been continuously evolving to meet the needs and expectations of users, becoming today an all-in-one marketing tool: Email marketing, SMS marketing, marketing automation, predictive sending, antispam analysis, FormBuilder, advanced statistics, retargeting...

All these functionalities make Mailify Sunrise a complete tool, simple to use and leader in the market.

As a real expert in email marketing, Mailify provides you with advice and best practices through its whitepapers, blog articles and webinars.

THE SOFTWARE: MAILIFY SUNRISE

The tool has been completely updated and integrates new features allowing companies to easily manage their email marketing.

Mailify allows you to: