Non-Responsive Email Templates
Viewport META for a Static (Non-Responsive) Design
warning All samples and many more templates are included in MailList Controller.
Template Tutorial Download Free Version
The Viewport META Tag
MailList Controller includes templates using either a responsive or static (non-responsive) design. Responsive templates are great, but not the solution for every situation, e.g. if you need a static (fixed) width or if you want to use older templates, then you should adjust the viewport META tag.
Viewport for Responsive Templates:
<meta content="width=device-width, initial-scale=1.0" name="viewport">
It means the mobile device should use the maximum device width without zooming (initial-scale=1.0).
Viewport for Static (Non-Responsive) Templates:
<meta content="width=600" name="viewport">
Important:
- Don't add "px" (!) to width
- Don't use "initial-scale=1.0" - the mobile mail client needs to scale to display the message
- Always specify the viewport, even if you are targeting mainly desktop users.
Static (Non-Responsive) Templates on Mobiles
Using a static (non-responsive) template does not mean the message cannot be viewed on mobile devices. The mobile device will zoom to render the message within the client-width, so it's recommended to stay below 600px to make sure it's still readable in portrait (zoom around 50%) and landscape mode (zoom around 75%).
Samples:
<meta content="width=480" name="viewport">
<meta
content="width=600" name="viewport">
<meta
content="width=770" name="viewport">
Initial Zoom/Scale:
You can use "initial-scale=1.0" to render the message in the original size (1:1, not zoomed) by default. This means the mail client will not zoom and the user has to scroll/pan to view your complete message. Use it for wide templates, which would become unreadable (text too small) if zoomed.
<meta content="width=1024, initial-scale=1.0; " name="viewport">
Important:
- Don't use "maximum-scale=1.0" to setup a max. scale of 1.0!
- Don't use "user-scalable=no" to disable zooming!