11
Selligent GUIDELINE
2.6.1 MEDIA QUERY SUPPORT
However  not  every  default  email  client  on  mobile  devices  will  support  media 
queries, which means that unless you have a complete device list with the email 
app of your customers you will not be able to create an email that will be responsive 
on every mobile device.
DEFAULT DEVICE EMAIL CLIENTS
Amazon Kindle Fire
Amazone Kindle Fire HD
Android 2.1 Eclair
Android 2.2+
Apple iPhone
Apple iPad
Apple iPod Touch
BlackBerry OS 5
BlackBerry OS 6+
BlackBerry Playbook
Microsoft Windows Mobile 6.1
Microsoft Windows Mobile 7
Microsoft Windows Mobile 7.5
Microsoft Windows Mobile 8
Microsoft Surface
Palm Web OS 4.5
sSamsung Galaxy S3+
CLIENT
MEDIA QUERY SUPPORT
Pdf files thumbnails - Library software component: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 thumbnails - Library software component: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
12
Selligent GUIDELINE
3RD-PARTY EMAIL CLIENTS
GENERAL SUPPORT
Microsoft Outlook Exchange 3rd party app (Android)
Android 4.0 (Gmail)
Gmail mobile app (all platforms)
Android 4.0 (email)
Yahoo! Mail mobile app (all platforms)
BlackBerry OS 6
iOS 6
Windows Phone 7.5
= sort of
CLIENT
OS
MEDIA QUERY SUPPORT
SCALE
ALT TEXT
IMAGES
MEDIA 
QUERIES
PREVIEW
TEXT
2.7 THE IMPORTANCE OF “!IMPORTANT”
Whatever CSS you write within the media tag should end with “!important”. This will 
ensure that any inline style will be overwritten by the CSS in the style tag. This is the 
method we use to create two different layout styles for mobile and desktop users.
However, not every email client is that fond of the style tag, take Gmail for example. 
Gmail will remove any style tag inside of the email regardless of its position (inside 
the header, body).  so in this case you will have to take peace  with the fact  that 
Gmail will always show users the desktop version.
Library software component:C# HTML5 PDF Viewer SDK to view PDF document online in C#.NET
Images. File and Page Process. File: Merge, Append PDF Files. File: Split PDF Document. File: Compress PDF. Page: Create Thumbnails. Page: Insert PDF Pages. Page
www.rasteredge.com
Library software component:C# PDF Convert to Jpeg SDK: Convert PDF to JPEG images in C#.net
Turn multiple pages PDF into single jpg files respectively online. Support of converting from any single one PDF page and multiple pages. Thumbnails can be
www.rasteredge.com
13
Selligent GUIDELINE
2.8 RESET THE BODY
Make sure you  zero out the  padding and margins on the body, if you don’t the 
document will render with a white border around the content in ios mail. You then 
disable automatic text size adjustment on some mobile clients with –webkit-text-
size-adjust and –ms-text-size- adjust, which stops devices from reducing/increasing 
text sizes based on their defaults.
2.9 RESIZE FONTS
Smaller screens can cause the text to become unreadable because they are too 
small to read, the text should transform just like the rest of your design depending 
on the screen resolution. Making sure that users can read your email without any 
effort and  providing  a  user-friendly  email.  Try  to keep  the  proportions  right,  for 
instance a text with the H1 tags should be bigger than a normal P tag text.
You could also do this on the entire body of the email if you don’t like to give every 
P or SPAN tag a specific class.
SIZE MATTERS
Links and buttons should have  a minimum  target  area of 44 x 44 pixels,  as per 
Apple guidelines. nothing is more unusable than clouds of tiny links on touchscreen 
devices. suggested is a font size between 17-21 pixels; the usual font size is about 
19 pixels.
2.10 HYPERLINKS
Just  as  with  text,  a  smaller  screen  can  make  it  difficult  for  users  to  click  on  a 
hyperlink. You don’t want the users to zoom in to be able to click on a hyperlink 
or button. The best practice here is to make the buttons and hyperlinks larger. The 
larger the button, the easier it is to click on it. If possible a full-width button is never 
a bad idea.
The easiest way to do this is by using pure CSS hyperlinks and buttons. When using 
images you will have to do an image swap of some sort for every button to have 
this effect. While a CSS button can be changed fully by changing class on mobile 
devices.
<body bgcolor=”#fffff” topmargin=”0” leftmargin=”0” marginheight=”0” marginwidth=”0” 
style=”height: auto; padding:0; margin:0; -webkit-text-size- adjust:none; -ms-text-size-adjust: 
100%;”>
*[class].transf_tekst{
font-size:17px !important;
line-height:21px !important;
}
Library software component:C# PDF File Compress Library: Compress reduce PDF size in C#.net
TIFF files compression and decompression method and Image files compression and images size reducing can help to reduce PDF file size Embedded page thumbnails.
www.rasteredge.com
Library software component:VB.NET PDF File Merge Library: Merge, append PDF files in vb.net
File: Merge, Append PDF Files. |. Home ›› XDoc.PDF ›› VB.NET PDF: Merge and Append PDF. VB.NET Demo code to Combine and Merge Multiple PDF Files into One.
www.rasteredge.com
14
Selligent GUIDELINE
2.11 LIQUEFY YOUR DESIGN
As mentioned before in this document, there are different methods for creating a 
responsive layout. The easiest method consists of creating a liquid design which will 
adapt to the width of the device it is displayed on. This implies using percentages 
to control your layout.
This method ensures a shorter CSS instead of calculating the amount of pixels for 
each resolution and converting them accordingly. both are acceptable of course, 
and a combination of the two can be handy from time to time.
In the example below you can see the CSS used to liquefy a table from a fixed width 
to a variable width.
OR
By setting the width to 100% you ensure that the layout will cover the whole width 
of the device, no matter the resolution. The height will be proportional to the width 
because it is set to “auto”.
table[class=transf_100],
img[class=transf_100]{
width:100% !important;
height:auto !important;
}
*[class.transf_100{
width:100% !important;
height:auto !important;
}
EXAMPLE
a[class=transf_btn]{
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;width:70%;
text-align:center; color:#111 !important;
text-decoration:none;
text-shadow:#fff 1px 0 0;
}
Library software component:VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.
' Convert PDF file to HTML5 files DocumentConverter.ConvertToHtml5("..\1.pdf", "..output\", RelativeType.SVG). Copyright © <2000-2016> by <RasterEdge.com>.
www.rasteredge.com
Library software component:C# PDF File Split Library: Split, seperate PDF into multiple files
Also able to combine generated split PDF document files with other PDF files to form a new PDF file. Split PDF Document into Multiple PDF Files in C#.
www.rasteredge.com
15
Selligent GUIDELINE
You still have to declare the width of the table for desktop clients. You can do this 
by setting the width attribute of the table. Don’t set it as an extra in the style attribute 
because  this  will  always  overwrite the CSS class in the style tag (unless you are 
using “!important”).
When not using the liquefy method, you are depending on the fixed design method 
which can be done as followed:
The disadvantage of this method is that the table will now remain 320 pixels on 
mobile devices. So even if the screen is smaller the table remains the same.
2.12 SLIM DOWN YOUR CONTENT
Most emails nowadays are filled with tons of information on all sorts of different 
things.  However  not  every  piece  of  information  in  the  email  is  of  the  same 
importance; some are more important than others. When creating your responsive 
design you should keep this in mind and make a selection of the “most important” 
information in the email. Mobile emails tend to look crowded when there is too 
much information.
The main objective of a mobile version should be to ensure it is as easy to scan 
through and as readable as possible. This often means that some of the secondary 
content in your newsletter should be  hidden to keep the focus on  what’s most 
important.
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”transf_100”>
<tr>
<td align=”center”> Custom text goes here </td>
</tr>
</table>
.w320 {
width: 320px !important;
}
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”w320”>
<tr>
<td align=”center”> Custom text goes here </td>
</tr>
</table>
Library software component:C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
How to Use C#.NET Demo Code to Convert PDF Document to HTML5 Files in C#.NET Class. Add necessary references: RasterEdge.Imaging.Basic.dll.
www.rasteredge.com
Library software component:VB.NET PDF File Split Library: Split, seperate PDF into multiple
splitter control provides VB.NET developers an easy to use solution that they can split target multi-page PDF document file to one-page PDF files or they can
www.rasteredge.com
16
Selligent GUIDELINE
By applying a simple hide class to any image, paragraph or entire table that isn’t top 
priority, it is automatically hidden from the mobile version. Here are some of the 
elements that can be considered unworthy for the mobile version:
● Links to the web version and preference center: traditionally you might 
put high priority on things like a link to view the email in a browser for a 
mobile device. But by optimizing the design, the version you’re sending is 
actually the best possible.
● Additional footer content: links to Flickr, Twitter, Facebook, etc.
● Month of edition
● Social sharing links: this is a tough call, but in order to “Like” on Facebook, 
the subscriber would need to be logged to Facebook on his phone (instead 
of just using the Facebook app). Same goes for sharing on Twitter or using 
the “Tell a friend” feature. These are easy on a desktop, but possibly too 
complicated on a mobile device.
● ...
You can hide unwanted content by adding a simple line in your media query.
Or  if  you  would  like  it  to  be  available  for  every  kind  of  tag  you  could  use  the 
following piece of code:
In the HTML of the email you can use this piece of CSS code for the parts you want 
to hide. For instance if you have a table with a custom text that doesn’t have to be 
shown on a mobile device, you can do it like this:
table[class=nok_mobile],
td[class=nok_mobile],
img[class=nok_mobile],
span[class=nok_mobile],
div[class=nok_mobile]{
display:none !important;
}
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”nok_mobile”>
<tr>
<td align=”center”> Custom text goes here </td>
</tr>
</table>
*[class].nok_mobile{
display:none !important;
}
17
Selligent GUIDELINE
2.12.1 THINK IN PACKAGES
When  slimming  down  your  design  for  mobile  users  you  should  stop  thinking 
in  pages  and  start  thinking  in packages. Consider  every  part  of  your email as  a 
package you can select to show or not show. So to give an example, these could 
be packages:
● Header
● Navigation
● Top Article
● ...
Packaging gives  you  more  freedom  in designing your email. However you  also 
have  the possibility to hide  parts inside a package if needed.  Creating  a  content 
hierarchy is a good exercise to select the correct content to show in the responsive 
design version.
LOOSE DESIGN
Normally when creating an email you would put everything in fixed tables and use 
widths and heights as much as possible to make sure that the design remains the 
same in the different email clients. But in the case of responsive designs you want 
the tables to be able to move a bit around when you’re displaying the email on a 
mobile client. You will need to do a combination of fixed width/height but keep the 
tables floating.
Using this method will make  it easier to code your  design into  HTML. Trying to 
convert a fixed design into a responsive design  is  very hard  and (in most  cases) 
won’t work out as desired. So you will create a loose design. Below you can find an 
example of a table structure:
FIXED
<table width=”100%” border=”0” cellspacing=”0” celpadding=”0”>
<tr>
<td>
<table cellpadding=”0” cellspacing=”0” width=”600”>
<tr>
<td width=”600”> Webversion </td>
</tr>
<tr>
<td width=”600”>
<table cellspacing=”0” cellpadding=”0” width=”600”>
<tr>
<td width=”600”> content </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
18
Selligent GUIDELINE
LOOSE
<table width=”100%” border=”0” cellspacing=”0” celpadding=”0”>
<tr>
<td>
<table cellpadding=”0” cellspacing=”0” width=”600” class=”transf_100”>
<tr>
<td width=”600”> Webversion </td>
</tr>
</table>
<table cellspacing=”0” cellpadding=”0” width=”600”>
<tr>
<td width=”600”> content </td>
</tr>
</table>
</td>
</tr>
</table> 
2.13 MULTIPLE COLUMS ON ONE SCREEN
Most emails today consist of more than 1 column. This can cause problems when 
converting the layout to a responsive design. It is always better to have one column 
for the mobile user because every extra column will result in a smaller display.
This does not mean that it is not allowed to have multiple columns in the desktop 
version. But you need to reduce them to one column for the mobile version. Luckily 
mobile clients allow us to use the float technique without any issue. By using this 
technique you can float a table td to the left side of the screen.
Floating the right TD to the left side will create the idea that you are viewing a one-
column email while in fact it can consist of multiple columns. But that’s not the 
only thing: you also need to set the width of this TD to 100% so that it can fill the 
full screen and not keep the pixels from the desktop version.
td[class=transf_2column]{
width:100% !important;
float:left !important;
}
19
Selligent GUIDELINE
In the HTML code you will also have a table with a width set to 100% and a certain 
amount of TDs with the “transf_2column” class.
2.13.1 REMOVING A SPACER TD
Sometimes a TD is used between two content TDs to generate a space between 
them. This is something that is not recommended in the mobile version because 
it will create too much whitespaces between both content TDs that are now one 
below the other. You can solve this issue by removing the spacer TD between the 
content TDs like this:
2.14 RESPONSIVE IMAGES
When working with images on mobile devices, you need to keep in mind that most 
devices will be on  a  connection such as  3G for instance, and not on a wireless 
router of some sort. This causes mobile devices to load certain items slower than 
on a computer with a direct internet connection.
People don’t like to wait for their emails to load, which will be the case when using 
the same image size for the mobile and for the desktop versions. To counter this, 
you can swap the images to a smaller version when the email is received on the 
mobile device.
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”transf_100”>
<tr>
<td class=”transf_2column” width=”330” valign=”top”></td>
<td class=”transf_2column” width=”330” valign=”top”></td>
</tr>
</table>
STYLE
td[class=transf_2column]{
width:100% !important;
float:left !important;
}
*[class].nok_mobile{
display:none !important;
HTML
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”transf_100”>
<tr>
<td class=”transf_2column” width=”310” valign=”top”></td>
<td class=”nok_mobiles” width=”40” valign=”top”></td>
<td class=”transf_2column” width=”310” valign=”top”></td>
</tr>
</table>
20
Selligent GUIDELINE
This means you have to do two things: you need to hide the existing image (desktop 
version) and replace it with a smaller image. There are a couple of different methods 
to do this, but not all of them work on the different clients. The following method 
however is a bit more secure and is very quick to implement.
You need to add a rule to the style tag (inside the media query) to define the content 
of a certain image tag. Which can be done like this:
The HTML code would be something like this:
This  technique is not only used to display a smaller sized  version of the  original 
image  but  can  also  be  used  to  show  a  completely  different  image  on  mobile 
devices. You could target your mobile device users even more by having target-
specific images for these users.
2.15 TEST YOUR RESPONSIVE DESIGN
You can use one of the following tools to test your mobile design:
● mattkersley.com/responsive: this website allows you to enter a URL with 
your responsive design and it will give you a preview of the design in 
different sizes.
● resizemybrowser.com: not all developers have all the different devices to 
test their design on. This website will rescale your browser to the desired 
resolution.
● pxtoem.com: convert your pixel into percentages/ems. This is always better 
when using responsive design.
● www.mrss.com/wp-content/uploads/2012/04/12NTC_Mobile_Email.pdf
PDF providing more information about mobile emails.
img[id:”ID_OF_IMAGE”] {
Content:url(“URL_TO_MOBILE_IMAGE”) !important;
}
<img border=”0” id=”ID_OF_IMAGE” src=”URL_TO_DESKTOP_IMG” alt=”” width=”660” 
height=”197” />
Documents you may be interested
Documents you may be interested