Create Basic Responsive Newsletter Templates with @media Queries
warning All samples and many more templates are included in MailList Controller.
Basic Responsive Templates
Our basic template contains a body wrapper background table (100%) and a
Please take a look at "How to create a HTML Email Newsletter Template" for details.
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.
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)
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
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).
It's recommended to set additional styles for <img>.
See "How to create a HTML Email Newsletter Template" (Reset CSS Styles) for details.