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.
2.3
billion people are mobile users
The number of smartphone users has increased from 1.57 billion in 2014 to 2.32 billion in 2017. (1)
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.
62% of mobile users are in the age group 18-34(2).
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.
In a day, an average smartphone user check his/her device 221 times(2)
Consulted
221
times per day
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 :
Check weather forecast
Read emails
Consult social networks
Inspect their calendar
Make a to-do list
...
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)
(1) Emarketer: «2 billion consumers worldwide to have a smartphone in 2018» (2014)
(2) Statista: Number of smartphones sold to end users worldwide from 2007 to 2018
The number of smartphone users has been
increasing every year. It was estimated that in
2018, 2.16 billion people will be using smartphones
compared to 1.31 billion in 2013(1).
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).
Mobile operating system market share(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.
Apple - iPhone 6S
Apple – iPhone 7
Apple – iPhone 7+
Apple – iPhone 6S+
Samsung – Galaxy S7 edge
Samsung – Galaxy J3
Oppo – A53
Samsung – Galaxy J5
Samsung – Galaxy S7
Samsung – Galaxy J7
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
88%
in the world
88% of all mobile phone users are using their device every day to read emails(1).
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:
1
The clickable elements must be visually identifiable: unlike a mouse
where you can instantly identify a clickable element thanks to a little
hand icon, we don’t know which elements are clickable when using
a touch screen. That’s why you should make sure that your links are
underlined and your CTA buttons are visible (colored, rectangularshaped
or round edged...). We recommend you to use a size of
minimum 44X44 pixel for your CTA buttons.
2
Make space around your clickable links: it will be hard to distinguish
links if they are all too close to each other. Your contacts may feel
irritated if they happen to click on a link they didn’t want to.
3
Since smartphone screens are smaller in size, it’s unpleasant to
scroll down to check the entire message. Shorten your content to
facilitate email reading.
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:
In a smaller size
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.
In a bigger size
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 :
<meta name=”viewport” content=”width=device-width, initialscale=1”>
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:
style = "width : 80%; max-width : 600px; height : auto;"
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:
@media only screen and (max-device-width : 480px)
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 :
@media(max-device-width : 480px) and (orientation :portrait) {
/* width inferior to 480px and mobile in portrait*/
}
Selection based on the screen resolution or pixel ratio
Example :
@media (min-device-pixel-ratio: 1.5) {
/* screen superior to 144dpi*/
}
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:
Default application on
Android 2.3
Android 5
BlackBerry 9930
iPhone 5S avec iOS 7
iPhone 5S avec iOS 8
iPhone 6 avec iOS 8
iPhone 6 Plus avec iOS 8
Gmail App
Android 5
iOS 7
iOS 8
Yahoo App
iOS8
TouchDown App
Android 5
Safari
Gmail
Yahoo
Outlook.com
Compatibility
Compatibility
Compatibility
Compatibility
Compatibility
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:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<style type="text/css">
@media only screen and (max-device-width : 480px) {
.container{
width: 80% !important;
}
.title-red {
color: #F00 !important;
}
.img-mobile {
width:80%! important;
}
.column{
width:80% !important;
display:block !important;
}
.hide-mobile{
display:none !important;
}
</style>
</head>
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:
<body style="padding:0; margin:0">
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:15px 0">
<p class="title-red" style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:30px"><strong>Responsive design</strong></p>
</td>
</tr>
<tr>
<td style="padding-bottom:20px"><img class="img-mobile" src="image.jpg" width="600" height="150"></td>
</tr>
<tr>
<td>
<table class="container" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="column" style="line-height:20px">
<p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:16px"><strong>title</strong></p>
<p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:12px">
Lorem Ipsum is simply a fake text used in the content and layout before the final version.</p>
</td>
<td width="15px" class="hide-mobile"> </td>
<td class="column" style="line-height:20px">
<p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:16px"><strong>title</strong></p>
<p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px">
Lorem Ipsum is simply a fake text used in the content and layout before the final version.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
EXAMPLES OF ADAPTIVE EMAILS
Mailify Software newsletter
Email marketing created by Mailify agency
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:
Manage your newsletter campaigns locally with the app or online.
Create amazing emails effortlessly.
Automate your marketing just like the major players do.
Showcast your forms with intelligent pop-ins.
See all the performance indicators of your campaigns at a glance.