@media Queries
Create Basic Responsive Newsletter Templates with @media Queries
warning All samples and many more templates are included in MailList Controller.
Template Tutorial Download Free Version
Basic Responsive Templates
Our basic template contains a body wrapper background table (100%) and a
container (600px).
Please take a look at "How
to create a HTML Email Newsletter Template" for details.
...
<head>
...
<style type="text/css">
...
/* ADD MEDIA QUERIES HERE */
...
</style>
</head>
...
<!-- background table -->
<table id="bgtable" align="center"
border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table
border="0" cellpadding="0" cellspacing="0" class="container" width="600"
style="...">
<tr>
<td
align="left" style="padding: 16px;">
<p>Hello
World!</p>
<p>Hello
World!</p>
<p>Hello
World!</p>
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
...
Responsive Sample: 100% - max. 600px
The template should have a width of 100% to fill the available space
(for mobiles), but should not extend 600px (on desktop and tablets).
We can achieve this by using 2 media queries:
- The first sets the width to 100% for all devices with a minimum display width of 20px (all).
- The second limits the width to 600px for all devices with a minimum display width of 600px.
/* ADD MEDIA QUERIES TO YOUR STYLES! */
@media
(min-width:20px)
{
table[class="container"] {width: 100%;}
}
@media (min-width:600px)
{
table[class="container"] {width:
600px;}
}
Responsive Sample: 320px - 480px - 600px
This sample works same as the first sample, but the template has always a fixed width, depending on the client (device).
- Mobiles (Portrait): 320px (min-width:20px)
- Mobiles (Landscape): 480px (min-width:480px)
- Tablets and Desktop: 600px (min-width:600px)
/* ADD MEDIA QUERIES TO YOUR STYLES! */
@media
(min-width:20px)
{
table[class="container"] {width: 320px;}
}
@media (min-width:480px)
{
table[class="container"] {width:
480px;}
}
@media (min-width:600px)
{
table[class="container"]
{width: 600px;}
}
Auto-sizing Images
It's a bit tricky to specify the image dimension when the table cells
have no static width.
The solution is to specify the width in percent,
e.g. 50%. It's recommended to include the image the largest size (in our
sample 600px)
- Cell: 480px * 50% = image resized to 240px (width) minus padding
- Cell: 600px * 50% = original image size of 300px (width) minus padding
- Use e.g. 50% if the image should only have half of the cell width, etc.
-
Don't try to overlay an image
with text!
Major web mail and desktop clients don't support CSS positioning, so you cannot overlay an image with a text element. - Use style="width:100%;" if the image should fill the whole parent (table cell).
<img src="image.png" alt="alternate text" border="0" style="width:50%; height:auto;">
It's recommended to set additional styles for <img>.
See "How
to create a HTML Email Newsletter Template" (Reset CSS Styles) for details.