RESPONSIVE EMAIL DESIGN
Pdf files thumbnail preview - software SDK dll:C# PDF Thumbnail Create SDK: Draw thumbnail images for PDF in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
Pdf files thumbnail preview - software SDK dll:VB.NET PDF Thumbnail Create SDK: Draw thumbnail images for PDF in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
2
Selligent GUIDELINE
©
SELLIGENT
The contents of this manual cover material copyrighted by Selligent.
This manual cannot be reproduced, in part or in whole, or distributed or transferred by means electronic 
or mechanical, or photocopied, without the prior written consent of a representative from Selligent.
Glossary
An approach aimed at crafting websites/e-mails to provide an optimal viewing 
experience (easy reading and navigation with a minimum of resizing, panning, and 
scrolling) across a wide range of devices.
An HTML tag that is used to store information about a page but is not displayed in 
the browser.
The viewport is a virtual area used by the browser/e-mail rendering engine to 
determine how content is scaled and sized when it is initially rendered on the 
current screen.
Consists of a media type and at least one expression that limits the style sheets’ 
scope by using media features, such as width, height and color. It lets the 
presentation of content be tailored to a specific range of output devices without 
having to change the content itself.
This property will control the zoom level when the page is first loaded.
This property will control how users are allowed to zoom in or out.
Responsive design
Metatag
Viewport
Media Query
Initial-scale
Maximum- & 
minimum-scale
TERM
DESCRIPTION
software SDK dll:How to C#: Preview Document Content Using XDoc.Word
With the SDK, you can preview the document content according to the preview thumbnail by the ways as following. C# DLLs for Word File Preview. Add references:
www.rasteredge.com
software SDK dll:How to C#: Preview Document Content Using XDoc.PowerPoint
With the SDK, you can preview the document content according to the preview thumbnail by the ways as following. C# DLLs: Preview PowerPoint Document.
www.rasteredge.com
3
Selligent GUIDELINE
Table of contents
1. Purpose    4
2. Email design    5
2.1 WRONG APPROACH    5
2.1.1 SCALING    5
2.1.2 SKINNY DESIGN     5
2.1.3 UNDERSTAND YOUR AUDIENCE     6
2.2 EMAIL LAYOUT    6
2.2.1 STICK TO A SINGLE COLUMN    6
2.2.2 EXAMPLES OF HOW IT SHOULD BE DONE     7
2.3 MOBILE BEST PRACTICE    8
2.4 DOCTYPE    8
2.5 VIEWPORT RENDERED UNUSABLE    9
2.6 MEDIA QUERIES    10
2.6.1 MEDIA QUERY SUPPORT    11
2.7 THE IMPORTANCE OF “!IMPORTANT“    12
2.8 RESET THE BODY    13
2.9 RESIZE FONTS    13
2.10 HYPERLINKS     13
2.11 LIQUEFY YOUR DESIGN     14
2.12 SLIM DOWN YOUR CONTENT     15
2.12.1 THINK IN PACKAGES    17
2.13 MULTIPLE COLUMNS ON ONE SCREEN     18
2.13.1 REMOVING A SPACER TD    19
2.14 RESPONSIVE IMAGES     19
2.15 TEST YOUR RESPONSIVE DESIGN     20
software SDK dll:How to C#: Preview Document Content Using XDoc.excel
document in memory. With the SDK, you can preview the document content according to the preview thumbnail by the ways as following.
www.rasteredge.com
software SDK dll:How to C#: Overview of Using XDoc.PowerPoint
Tell C# users how to: create a new PowerPoint file and load PowerPoint; merge, append, and split PowerPoint files; insert, delete, move, rotate Create Thumbnail.
www.rasteredge.com
4
Selligent GUIDELINE
MOBILE USERS WILL DO ANYTHING AND EVERYTHING DESKTOP USERS DO. 
PROVIDED IT’S PRESENTED IN A USABLE WAY.
software SDK dll:How to C#: Overview of Using XDoc.Word
Tell C# users how to: create a new Word file and load Word from pdf; merge, append, and split Word files; insert, delete, move, rotate Create Thumbnail.
www.rasteredge.com
software SDK dll:How to C#: Set Image Thumbnail in C#.NET
Convert Jpeg to PDF; Merge PDF Files; Split PDF Document; Remove Password from VB.NET How-to, VB.NET PDF, VB.NET Word, VB How to C#: Set Image Thumbnail in C#.NET
www.rasteredge.com
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.
software SDK dll:How to C#: Generate Thumbnail for Excel
Document. Conversion. Convert Excel to PDF. Convert Excel File: Merge Excel Files. File: Split Excel Document. Insert Image. Thumbnail Create. Thumbnail Create. |
www.rasteredge.com
software SDK dll:How to C#: Generate Thumbnail for Word
Images. Convert Word to ODT. Convert PDF to Word. a Word File. File: Merge Word Files. File: Split Text Search. Insert Image. Thumbnail Create. Thumbnail Create.
www.rasteredge.com
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.
software SDK dll:How to C#: Overview of Using XDoc.Excel
Tell C# users how to: create a new Excel file and load Excel; merge, append, and split Excel files; insert, delete, move, rotate, copy and Create Thumbnail.
www.rasteredge.com
software SDK dll:How to C#: Generate Thumbnail for PowerPoint
Conversion. Convert PowerPoint to PDF. Convert PowerPoint to File. File: Merge PowerPoint Files. File: Split PowerPoint. Text Search. Insert Image. Thumbnail Create
www.rasteredge.com
7
Selligent GUIDELINE
2.2.2 EXAMPLES OF HOW IT SHOULD BE DONE
DOMINO’S
JOY
THE
STORE
EXPEDIA
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”>
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
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