How can I get my HTML email newsletter to scale on all or most mobile devices?
I’ve deliberately designed my newsletter to be one column (avoiding having to do a responsive design) assuming that I can use the viewport meta tag and set the width to auto. However
The Create Email Action strips out the the viewport meta tag
When I add the viewport meta tag as HTML markup in FW and import the file into Direct Mail, Direct Mail strips it out
When I manually add the viewport meta tag to my source code in Direct Mail and run a Litmus Design Test the newsletter doesn’t scale in most mobile devices.
How do I get the viewport width scaling to work? or how do I get my email newsletter to scale / fit into the viewport of most mobile devices?
I’ve done some more digging. There is a concept of “scalable email design”: one email that scales to suit the device it is on. Google it and you’ll find lots of info. But no one says how to get the email to scale. Which leaves me to think that HTML emails automatically scale to fit mobile devices?
Or it is achieved by using viewport meta tags or proportional table dimensions (is this possible or possible in FW?)?
Email clients are notoriously unsophisticated. Microsoft, in their lilliputian wisdom, decided that a good way to make Outlook more secure was to use the HTML parser from Word 97 instead of the Explorer engine when rendering HTML mail parts. This means that we get to “party like it’s 1999” with tables, font tags, the whole blink tag besotted lot of the last century. Gmail, surprisingly, also does some antiquated things when rendering HTML, ostensibly for security reasons. I suspect that the way you end up making a “responsive” e-mail message is by using blocks of content that are inserted inline and allowed to re-flow in a larger container. This is not the same as traditional responsive layout, since you cannot rely on media queries or JavaScript in a mail client – even a webmail viewer like Gmail.
Walter
On Apr 18, 2013, at 10:40 AM, Mark wrote:
I’ve done some more digging. There is a concept of “scalable email design”: one email that scales to suit the device it is on. Google it and you’ll find lots of info. But no one says how to get the email to scale. Which leaves me to think that HTML emails automatically scale to fit mobile devices?
Or it is achieved by using viewport meta tags or proportional table dimensions (is this possible or possible in FW?)?
iOS does some clever things with font sizes automatically – you don’t need to do anything to get it for free. However, it does mean that you have to design your font sizes carefully. Freeway by default will not set a pixels size for body text, but it will for any header text. If you remove these pixel-scaled sizes, then everything can resize according to the user-agent’s default preferences, which is often just what you need. If you want to force a particular relationship between body text and header text, then you need to specify the font size in percentages. Images that sit within a run of text will not be scaled along with that text, unless you have done something clever like sizing them in ems. (I don’t believe this is currently possible within the Freeway UI, but you can use Extended attributes to set this.)
I believe that a limited subset of a scalable design could be built in Freeway, but what you will need to do is look at an example of scalable code (hand-coded), then compare it with what Freeway generates, and see if you can shim the differences. This may take some post-publish tweaking in a text editor, although it’s surprising how much you can do with the various Extended attributes.
No, you need to design your layout with no width, which means “use all available width”. Any fixed-width contents within that outermost container must be inserted inline and floated left, so they can be forced to wrap when the available container gets too narrow to hold them as a row across the page.