Reminder about how to create a Newsletter-template

First of all, you have to keep in mind that a newsletter template is made with tables.

This structure is not as flexible as a website structure can be (with <div> and <span>) and does not allow you to use Web libraries such as : Bootstrap or Jquery.

 

In order to get a good result on every email client (mainly Outlook) you have to do it the "old school" way !

Here is a quick list of 5 important rules :

- No special font.

- No background-images, only background-color.

- No percentage width. Define a width for each <table> and <td>.

- Limit nesting tables (a too complicated HTML is a bad idea for your spam score !)

- Make sure your newsletter is fine without pictures, because many email clients block them automatically (the user has to accept your email to see its pictures). Complete the "alt" tag, think of a background-color underneath your pictures, do not use only one image as a newsletter. You can check you newsletter without pictures in AcyMailing when you preview the newsletter.

 

Define a width for each element

The main idea with the responsive design is to change the width of each HTML element depending on every screen size.

As we just said, a newsletter template is made with tables, so first of all, you have to define a width for each <table> and <td>.

Here is an example :

Show/Hide php code

View source
 
<table width="600">
<tr>
<td width="20"></td>
<td width="560">Main content area</td>
<td width="20"></td>
</tr>
</table>
 

 

Add media queries

You will find these media queries at the end of the CSS style-sheet on each of our responsive templates.

Media Queries are used in CSS style sheet to apply restrictions to your styles. What is interesting in a responsive design is to change the layout depending on the screen width.

For that, just put the Media Query before your css properties, like a condition. Here is an example with the 3 main devices' sizes : 600px (tablet, laptop), 480px (smartphone, horizontal view), 320px (smartphone, vertical view).

Show/Hide php code

View source
 
@media (min-width:10px) {
.my_css_class {width:300px; font-size:14px; ...}
}
 
@media (min-width:480px) {
.my_css_class {width:460px; font-size:14px; ...}
}
 
@media (min-width:600px) {
.my_css_class {width:600px; font-size:14px; ...}
}
 

Insert a specific "class" to each element

In order to apply specific CSS, first you have to define specific "class" to each html element that will move.

Always with the same example, here is the result :

Show/Hide php code

View source
 
<table width="600" class="w600">
<tr>
<td width="20" class="w20"></td>
<td width="560" class="w560">Main content area</td>
<td width="20" class="w20"></td>
</tr>
</table>
 

 

Apply specific CSS to your new "class"

Thanks to media queries you can redefined a width for each <table> <td> but also pictures. Indeed, if you don't limit the size of your pictures they will break your template structure if they are larger than the device screen. Use a "max-width" to limit the size of your pictures and a "height:auto" to keep the right proportions.

 

New CSS with media queries :

Show/Hide php code

View source
 
 
 
@media (min-width:20px) and (max-width:320px) {
.w600 {width:320px !important;}
 .w560 {width:300px !important;}
 .w20 {width:10px !important;}
 
 
.w600 img{max-width:320px !important; height:auto !important}
 
 
.w560 img{max-width:300px !important; height:auto !important}
}
 
 @media (min-width:480px) {
.w600 {width:480px !important;}
 .w560 {width:460px !important;}
 .w20 {width:10px !important;}
 
 
.w600 img{max-width:480px !important; height:auto !important}
.w560 img{max-width:460px !important; height:auto !important}}
 
 
 @media (min-width:600px) {
.w600 {width:600px !important;}
 .w560 {width:560px !important;}
 .w20 {width:20px !important;}
 
 
.w600 img{max-width:600px !important; height:auto !important}
 
 
.w560 img{max-width:560px !important; height:auto !important}
 
 
}
 

Create a two columns' design

We advise you to make a one column design to limit the layout issues

If you want to make a two columns design, with two main content areas, you will have to put each of them in a separate <table> with the property align="left" and "display:block".

Here is an example :

Show/Hide php code

View source
 
<table width="600" class="w600">
<tr>
<td width="600" class="w600">
<table align="left" width="300" style="display:block"><tr><td>Your first content area</td></tr></table>
<table align="left" width="300" style="display:block"><tr><td>Your first content area</td></tr></table>
</td>
</tr>
</table>
 

 

Compatibility

Most of the users will read your newsletter on their mobile devices. Therefore, adopting a responsive design is really the key of success ! However, "responsive design" is a very recent notion concerning e-mails, and you won't be able to get THE perfect result on every devices and every e-mail clients. The result depends on the phone itself, on the e-mail client but also on the application that is used to read emails.

 
App Media queries
Amazon Kindle Fire
Amazon Kindle Fire HD
Android 2.1 Eclair
Android 2.2+
BlackBerry OS 5
BlackBerry OS 6+
BlackBerry Playbook
Gmail App (Android and iOS)
iOS Devices (iPhone, iPod, iPad) only for native app
Mailbox (iOS)
Microsoft Outlook Exchange App (Android)
Microsoft Outlook Exchange App (Iphone)
Microsoft Surface
Microsoft Windows Mobile 6.1
Microsoft Windows Phone 7
Microsoft Windows Phone 7.5 except for Gmail accounts
Microsoft Windows Phone 8
Palm's Open Web OS 4.5
Yahoo! App (Android and iOS)

Follow us :