I am writing a template for html email (God have mercy on my soul). The design looks simple enough — there is this centrally aligned block with some text and images:
Nothing too fancy, no multi-column layout or anything, and yet, I am stuck. Here’s what's giving me problems:
On desktop screens, the central block should be 480px wide.
On mobile phones, in portrait orientation (that's less than 480px), the central block should take the whole width of the screen
So my approach to this problem (borrowed from / inspired by other templates) was to create a table with 100% width, with another table inside, also 100% width, and a max-width of 480px, like so:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;">
<tr>
<td>
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
It works on mobile. It works in browser clients. It works in Thunderbird. It works in Apple Mail. It makes me smile. But of course, Outlook can't do max-width, so it blows up the central block to 100% width.
So how could I modify my code to make this design also work correctly in that abomination that is Outlook?
EDIT: This is what I was getting on mobile phone screens in portrait orientation when I just set the width of the internal table to 480px:
Perhaps you can use this trick from elidickinson:
<!--[if mso]>
<center>
<table><tr><td width="480">
<![endif]-->
<div style="max-width:480px; margin:0 auto;">
...
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
May I suggest you do like this
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f00" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="480">
Some blah
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I'm currenly working on an email in Mailchimp. I wanted an email that looked like this on mobile. Mailchimp's default behaviour is to stack images on mobile, so I had to get a custom code snippet to make this work.
It works on most devices, but on some (like Iphone 6s) I get the following behaviour.
Any ideas why this happens or how to fix it?
Here's the code that I used:
<table border="0" cellpadding="20" cellspacing="0" position="center" style="width:100%; max-width: 100px;" width="100%">
<tbody>
<tr>
<td width="70%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
<td width="0%"><a href="https://testlink.com" border="0" src="testimage.png"/></a></td>
</tr>
</tbody>
</table>
I'm working on html mail, but the width of last column is too small, my code is :
<td width='250' style="width: 250px !important;">
开发
</td>
and result is:
enter image description here
but when the word change to English not Chinese, the width works well:
enter image description here,
and when using web outlook it works well, but when use outlook client the width is too small.
Try setting the width and height also in your Table.
<table border="0" cellpadding="0" cellspacing="0" width="250" height="80">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0" height="80" width="250">
</td>
</tr>
</tbody>
</table>
I've done a newsletter with mjml framework.
I have to change the header image on mobile devices, but how?
The framework is very helpful for doing bulletproof newletters, but doesn't support different images for different viewport.
This is the header code:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:900px;background:#29c5f8;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
<![endif]-->
<div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
<tbody>
<tr>
<td style="width:900px;">
<a href="http://www.link.com" target="_blank">
<img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
Thanks for your support
I would say there are three options here:
Have the two images in your HTML and display only the right one depending on the device used, using media queries (relying especially on the display property, plus conditional comments for Outlook)
Wrap your desktop image tag img in a span. On mobile, you'll use media queries to hide this desktop image and add a background image to the span tag with the background-url property, which will "replace" the desktop image you're hiding
Have only one image tag in your HTML, pointing to an image hosted on a server and send back the right image depending on the device on which the email is opened (using the User-Agent)
Unfortunately, there are drawbacks with all of those:
While displaying mobile content on mobile devices only is totally feasible, hiding content is way trickier and might not work, so you could end up with both images displayed. Also, media queries are not supported everywhere.
Background images are not supported by all email clients, so it won't work everywhere. Again, media queries are not supported everywhere.
You need to work on a script. However, this shouldn't be too hard using a package such as https://www.npmjs.com/package/ua-parser
In terms of compatibility, the third option is definitely the best one. Is it an option for you?
MJML documentation allows for changing an image based on the viewport for mj-images using the attribute srcset.
srcset url & width enables to set a different image source based on the viewport
however in my tests i've been unable to get them to work.
I'd suggest using media queries and a css-class.
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
I'm working on optimizing HTML emails for mobile devices. I have been tasked with finding a universal solution for creating a 2 column to 1 column responsive layout. I found an article written by Campaign Monitor - http://www.campaignmonitor.com/guides/mobile/responsive/. I've tried their markup and it works on most clients and browsers with the exception of Outlook 2007, 2010, and 2013. I've provided a jsfiddle link with my markup for reference. Is there a way to make this work in these version of Outlook?
EDIT: I'm not trying to make the responsive part of the email work in Outlook. I want the 2 tables ( Left & Right in the jsfiddle example) to display next to each other rather than stacked on top of one another. This works in Gmail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari), Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. My concern is only with Outlook 2007 and later when the rendering engine changed.
<html>
<head>
<style>
#media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
http://jsfiddle.net/bxdUp/
Have you tried adding align="left" and align="right" to the stacking tables?
See updated fiddle: http://jsfiddle.net/bxdUp/1/
You currently have the right table with align="left", but I have had success with Outlook table alignment manipulating the align value.
For anyone that comes across this SO and is looking for a solution to the above problem where the responsive 2-column content is ALSO centered I found that using conditionals to define columns only for Outlook made my world 1^300 easier. Of course it is no longer responsive in Outlook, but really... F Outlook.
<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="100%" style="text-align:center; background-color:white">
<!-- define a fixed width table using a class for responsive. I found that defining an arbitary height seemed to be important ~ silly Outlook -->
<!-- align center -->
<table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
<tbody>
<tr>
<td>
<!-- align left (this renders as float:left in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
<!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
<!--[if mso]></td><td><![endif]-->
<!-- Brilliant. -->
<!-- align right (this renders as float:right in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
</td>
</tr>
</table>
... close outer tables etc.
I've found that reductions in table widths by a few pixels work in the case for Outlook, which I can only assume is Outlook rendering pixel widths differently than other email clients.
Not ideal, but it has worked for me.
I don't think that it is gonna work on Outlook versions. Because first of all Outlook doesn't understand media queries. Outlook version 2007 is based on the rendering Engine of IE, while as Outlook version 2010 and version 2013 use Word as the rendering engine for displaying html emails. So I believe there is no way to get them to work in Outlook.
One more point is that when this code is executed in Outlook, it will ignore everything that is inside style tags. You should give style as inline for Outlook emails.