37
5
Selligent GUIDELINE
2. Email design
So what exactly does responsive design entail? It’s a set of techniques and principles
applied to email design that includes media queries, fluid layouts and images, and
customized copy making for emails suitable for both desktop and mobile devices.
Responsive techniques allow designers to hide, stack, expand/collapse or modify
content to optimize email content display on smaller screens. It also includes
simple considerations to make emails easier for mobile users to consume, such as
large buttons for easy tapping, layouts that follow a hierarchy for content so they
work even without image display enabled...
Creating responsive emails can be done in many ways depending on the final result
you wish to achieve. You could choose for the fixed design option where you’re
transforming all the pixels to the correct size. for example when having a table
width of 600 pixels and you would like to have it fit the 320 pixels screen resolution
of a smartphone you will transform all the 600 pixels to 320 pixels and so on.
The other option is to choose for a liquid design option, which is more flexible
than the fixed design option. Just like in the fixed design, the pixels are going to be
transformed, but this time to percentages. so a 600 pixel design will be transformed
to a 100% design which will fit the screen of the device automatically.
2.1 WRONG APPROACH
2.1.1 SCALING
Scaling allows creating a complete fluid design which will adapt to the screen size.
However, since text size, images, etc. are not adjusted, the email will be exactly the
same as the desktop version - only smaller.
Users will have problems reading the text, clicking the buttons and will probably
close the email before reading it. This method is not user-friendly and is not
recommended. However this method should work on every device because you
are working with a fluid design.
2.1.2 SKINNY DESIGN
Skinny design is basically a design small enough to fit a mobile screen; it will remain
in this state for the desktop users. This will result in a very minimalistic desktop
email, it is a bit user- friendlier than the previous method but it’s still not a real
responsive design.
However in this case the desktop users will be limited and potential important
(extra) information will never be shown to the user because there is simply not
enough space to put this information.
How to C#: Basic SDK Concept of XDoc.PDF for .NET And PDF file text processing like text writing, extracting, searching, etc., are to load a PDF document from file or query data and save the PDF document.
pdf form save with reader; how to extract data from pdf to excel VB.NET PDF: Basic SDK Concept of XDoc.PDF And PDF file text processing like text writing, extracting, searching, etc., are to load a PDF document from file or query data and save the PDF document.
how to save filled out pdf form in reader; save pdf forms in reader
35
6
Selligent GUIDELINE
2.1.3 UNDERSTAND YOUR AUDIENCE
From the two methods above scaling is the least “wrong” but as mentioned still
not a “true” mobile design. However, since this method will work everywhere, you
should still consider this when selecting a strategy. It is important to understand
your audience and which environments are most frequently used to view your
emails. once you have this data you can determine your investment into your
mobile strategy.
However, as a best practice, you should use BOTH. A scalable layout that turns
responsive. The rest of this document is focused on this ideology. We will take the
best of both worlds and try to combine them into a responsive email design.
2.2 EMAIL LAYOUT
When starting from scratch it’s important to keep the responsive part in mind at
all times, especially when you’re still in the design stages. There is nothing more
important than a design that is optimized for desktop and mobile, this will make the
upcoming process a lot easier.
A good way of working is to first think about a mobile design and create the
desktop version based upon this design. Working the other way around will limit
your options for the mobile users. Try to keep your mobile version as sleek and
minimalistic as possible. The more images and special designs you use the harder
it will be to have a decent email for mobile and desktop.
2.2.1 STICK TO A SINGLE COLUMN
To make the process of optimizing your newsletter as painless as possible, you
should opt for a single column design. because you need to rely on nested tables
these days, it makes it very difficult to re-order columns or stack blocks of content
on top of each other. This is relatively easy with Css, but nearly impossible given
the rigidity of HTML tables.
However, this doesn’t mean that the multi-column designs won’t work on mobile
devices; it will just be harder to make them work on desktop and mobile. If you do
go for a two- or three-column design, you still have the option of simply hiding
certain columns altogether. If you’re using a column for secondary content that
isn’t important, this might be a great option for your mobile version anyway.
More information on how you can work with multiple columns can be found
further in this document.
8
7
Selligent GUIDELINE
2.2.2 EXAMPLES OF HOW IT SHOULD BE DONE
DOMINO’S
JOY
THE
STORE
EXPEDIA
36
8
Selligent GUIDELINE
2.3 MOBILE BEST PRACTICE
● Clear and concise content: small screens mean it’s more important than
ever to engage the user as efficiently as possible.
● Single-column layout: simplicity is key, as mentioned above. Layout no
wider than 640px will degrade gracefully. A single column ensures no
content will be completely lost.
● Large call-to-action (CTA): don’t punish fat fingers! Apple’s iOS Human
Interface Guidelines recommend a minimum ‘tappable’ target area of 44x44
points. This will however differ from device to device.
● Generous font sizes: make sure your message can be read easily.
● Pre-header: another key area when it comes to visibility in the inbox. Try to
avoid simply displaying ‘view in browser’ text.
● Left-aligned text: there are a number of reasons for aligning important
elements to the left-hand side of the content area. eye tracking research
suggests that western users focus the majority of their attention on the
left-hand side of email content. This is hardly surprising since we read text
from left to right. Certain operating systems, notably Android, will not scale
content to fit the screen, therefore displaying only the left half of an email.
from an ergonomic perspective, the majority of users will find it easier to
interact with elements in the bottom left/middle of their hand-held screen.
● Vertical hierarchy: reduced screen real estate places more credence than
ever in the idea of ‘the fold’. significant CTAs should be placed as near to the
top as possible; if they are not seen immediately, they will probably not be
seen at all.
● Use images carefully: don’t assume that images will be seen. The iPhone’s
native email app will display images by default but many clients won’t. If your
email doesn’t contain enough text it might also be picked up by a spam filter.
2.4 DOCTYPE
Some email clients are known to strip out the DOCTYPE such as Hotmail and
Gmail. They automatically insert the XHTML 1.0 strict DOCTYPE. It’s not a bad idea
to put it in whilst building your email, to avoid conflicts with Hotmail/Gmail in the
testing phase.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//en” “http://www. w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd”>
54
9
Selligent GUIDELINE
2.5 VIEWPORT RENDERED UNUSABLE
The viewport is a virtual area used by the browser/email rendering engine to
determine how content is scaled and sized when it is initially rendered on the
current screen. The viewport metatag was originally created by Apple; then it was
implemented and continued by others. However for responsive emails the viewport
metatag will only give you the illusion of control, browser support for this metatag
is spotty and email client support is even worse.
Below you can find a list with viewport testing results on different mobile clients:
EXAMPLE
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,” />
Initial-scale seems to block the user from
zooming out. Without the initial-scale, users
can zoom out to approx. 5X. With and without
the meta tag, it scaled up to the same max
dimension (approx. 2X). seems like maximum-
scale isn’t supported.
This device operated the same regardless of
viewport settings. Its maximum zoom is much
higher than on Android (approx. 5X).
Setting the initial-scale and maximum- scale to
1.0 basically disables the zooming functions for
this device. setting the maximum-scale con-
trols the maximum zoom-in and the maximum
zoom-out.
Setting the maximum-scale to 1.0 basically
disables the zooming functions for this device.
setting the maximum-scale controls the maxi-
mum zoom-in and the maximum zoom-out.
This device does not respond to media queries
with the meta tag.
This device operated the same regardless of
viewport settings. Its maximum zoom is much
higher than the Android (approx. 5X).
Emails that are sent with <meta name=
”viewport” content=”...” /> and anything in the
content attribute appear to be blank when
viewed on blackberry.
Android
iPhone
Kindle Fire
Xoom
iPad
BlackBerry
DEVICE
ALLOWS
ZOOM BY
DEFAULT
INITIAL-
SCALE
MAXIMUM-
SCALE
NOTES
35
10
Selligent GUIDELINE
2.6 MEDIA QUERIES
Media queries are the biggest part of responsive design. They will allow you to
transform your email to a slim version on mobile devices. Media queries is a method
also used by web designers to make their website responsive and they can also be
used for email layouts. However, because media queries are a part of the style tag,
not every email client will accept and show them, which will cause your mobile
version to fail (not show).
Different types of mobile devices can have different types of media queries. This
means that you can target different devices depending on their screen resolution.
The following list will provide you with a couple of media query examples:
● Smartphones – Portrait & landscape: @media screen and (min-device-
width : 320px) and (max-device-width : 480px)
● Smartphones - Landscape: @media screen and (min-width : 321px)
● Smartphones - Portrait: @media screen and (max-width : 320px)
● iPads – Portrait & landscape: @media screen and (min-device-width :
768px) and (max-device-width : 1024px)
● iPads – Landscape: @media screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape)
● Smartphones – Portrait: @media screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
● Desktops and laptops: @media screen and (min-width : 1224px)
● Large screens: @media screen and (min-width : 1824px)
● iPhone 4: @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen
and (min-device-pixel- ratio : 1.5)
There are a lot of different media queries that cover a whole lot more mobile
devices than the list above. However creating a responsive design that will work
100% on every device is very hard to do. The best way to avoid setting up a whole
list of media queries is to look at the most popular devices, or even better look at
what the most popular devices are amongst your users. This way you have an idea
on which devices should absolutely be targeted.
NOTE
Some of the new devices have a larger screen than the standard smartphones, which means that they
could slip through the meshes of the net.
Documents you may be interested
Documents you may be interested
