Page 26 - index
P. 26
COMPANIES & CAMPAIGNS
Each screen is
different, thus, use
responsive design
for your emails
On which device do you read your emails? Desktop, lap- Media Queries detect the screen size of the device,
top, tablet, smartphone? regardless of the brand and the software version, and
fall back on the pre-defined rules for each screen. They
Create your emails using responsive design to reach all can be used, for example, to change the layout of the
users and don’t forget to consider your small daily com- mailings to adjust the size of text, images and buttons
panion when designing a newsletter template. Unfortu- and even hide content in some cases or exchange be-
nately, newsletters that you can read excellently on your tween desktop and mobile devices.
desktop are often becoming unreadable on a small
screen: small font sizes, narrow line spacing and unfortu- A flexible grid, which consists of fixed breakpoints, en-
nate breaks in the layout are annoying to the readers. sures the adaptation of the layout, which are set in the
CSS code. If you define, for instance, the width to 550
A study of Bluehornet showed that 71.2% of respondents pixels, an appropriate style sheet could load as soon as
delete emails that are not shown properly on their mobile the viewport width is less than 550 pixels. Photos and
phone or tablet and 16.3% said they would even unsub- videos must be responsive as well. The defined break-
scribe.
points then ensure that they are loaded in an alternate
Increase the usability of your templates size.
No one likes dealing with a confusing email in which it is However, not all CSS and HTML5 codes work in con-
a challenge to click a link or button. In order to increase junction with responsive design. Tough breaks in the
the usability of the mailings, email campaigns and land- layout are limited and multi-column layouts and certain
ing pages must be planned mobile compliant. For in- provider settings may cause display problems as well.
stance, 600 pixels is the default layout of a newsletter. Therefore, it is important to test the template extensive-
ly prior to the sending.
In order to load quickly on a smartphone, the pixel width
of a template must be adjusted to 80% of the original Take a look at the brief checklist for mobile optimiza-
layout size. However, the characteristics of the different tion:
types of devices and operating systems should be kept
in mind. Template width: 320 to 550 pixels or 80% of the
original width
Therefore, make sure you plan and structure your tem-
plates clearly and that you keep the design of the news- Call-to-action: Eye-catching placement that is
letter as simple as possible. Use e.g. images instead of "clickable" (at least 44 x 44 pixels.)
long texts. In addition, buttons should be increased to
enable simple clicking. On a mobile device, you have two Layout: Clear structure, designed as single-column
preview lines available, the so-called pre-header. Use
them as an extension of the subject line to pique the Pre-header: Using the two preview lines as an ex-
readers’ curiosity. Limit yourself to the basics and short- tension of the subject line to pique the reader’s cu-
en the desktop version of your template. riosity
One design for all devices Usability: bigger fonts, adjust line spacing and
empty space, make buttons big enough
One approach to optimize emails for different devices is
responsive design. The technical basis for responsive Intensive testing: Test the representation of the
templates is HTML5 and the necessary media queries, template on most popular devices prior to sending
added in CSS3, that let the presentation of content be out. ◊
tailored to a specific range of output devices without hav-
ing to change the content itself.
Source: Silver Media Direkt Marketing GmbH
26 Asian eMarketing November 2014 - Cross-, Multi-, Omni-Channel & Everywhere Commerce
Each screen is
different, thus, use
responsive design
for your emails
On which device do you read your emails? Desktop, lap- Media Queries detect the screen size of the device,
top, tablet, smartphone? regardless of the brand and the software version, and
fall back on the pre-defined rules for each screen. They
Create your emails using responsive design to reach all can be used, for example, to change the layout of the
users and don’t forget to consider your small daily com- mailings to adjust the size of text, images and buttons
panion when designing a newsletter template. Unfortu- and even hide content in some cases or exchange be-
nately, newsletters that you can read excellently on your tween desktop and mobile devices.
desktop are often becoming unreadable on a small
screen: small font sizes, narrow line spacing and unfortu- A flexible grid, which consists of fixed breakpoints, en-
nate breaks in the layout are annoying to the readers. sures the adaptation of the layout, which are set in the
CSS code. If you define, for instance, the width to 550
A study of Bluehornet showed that 71.2% of respondents pixels, an appropriate style sheet could load as soon as
delete emails that are not shown properly on their mobile the viewport width is less than 550 pixels. Photos and
phone or tablet and 16.3% said they would even unsub- videos must be responsive as well. The defined break-
scribe.
points then ensure that they are loaded in an alternate
Increase the usability of your templates size.
No one likes dealing with a confusing email in which it is However, not all CSS and HTML5 codes work in con-
a challenge to click a link or button. In order to increase junction with responsive design. Tough breaks in the
the usability of the mailings, email campaigns and land- layout are limited and multi-column layouts and certain
ing pages must be planned mobile compliant. For in- provider settings may cause display problems as well.
stance, 600 pixels is the default layout of a newsletter. Therefore, it is important to test the template extensive-
ly prior to the sending.
In order to load quickly on a smartphone, the pixel width
of a template must be adjusted to 80% of the original Take a look at the brief checklist for mobile optimiza-
layout size. However, the characteristics of the different tion:
types of devices and operating systems should be kept
in mind. Template width: 320 to 550 pixels or 80% of the
original width
Therefore, make sure you plan and structure your tem-
plates clearly and that you keep the design of the news- Call-to-action: Eye-catching placement that is
letter as simple as possible. Use e.g. images instead of "clickable" (at least 44 x 44 pixels.)
long texts. In addition, buttons should be increased to
enable simple clicking. On a mobile device, you have two Layout: Clear structure, designed as single-column
preview lines available, the so-called pre-header. Use
them as an extension of the subject line to pique the Pre-header: Using the two preview lines as an ex-
readers’ curiosity. Limit yourself to the basics and short- tension of the subject line to pique the reader’s cu-
en the desktop version of your template. riosity
One design for all devices Usability: bigger fonts, adjust line spacing and
empty space, make buttons big enough
One approach to optimize emails for different devices is
responsive design. The technical basis for responsive Intensive testing: Test the representation of the
templates is HTML5 and the necessary media queries, template on most popular devices prior to sending
added in CSS3, that let the presentation of content be out. ◊
tailored to a specific range of output devices without hav-
ing to change the content itself.
Source: Silver Media Direkt Marketing GmbH
26 Asian eMarketing November 2014 - Cross-, Multi-, Omni-Channel & Everywhere Commerce
