Trying to create an Email newsletter that displays correctly in mobile apps, but Google Inbox's auto-resizing feature breaks the layout.
I tried using min-width inline each element (a trick that works with the gmail app), but sadly it had no effect in Inbox. Also, unlike in the Gmail App, there is no option to disable auto-resizing in the message.
Any suggestions?
I ran into the same thing. It turns out if you use the !important declaration, it works. For example:
<div style="width: 100% !important; min-width: 100% !important;"></div>
This worked for me on the Gmail app and the Inbox app.
Have noticed the same thing. What has been working for me on some email templates is to remove min-width and add an inline style of margin:0 auto; to each table, this will at least align content down the center. Please see an example below:
<table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="left">
<tr>
<td style="width:300px;">
</td>
</tr>
</table>
<table ${cell_reset} style="${table_reset} width: 300px; margin:0 auto;" width="300" class="container" align="right">
<tr>
<td style="width:300px;">
</td>
</tr>
</table>
It looks like you're going for responsive web design.
I'd start with the main container width:100% and your viewport set in the header:
<meta name="viewport" content="user-scalable=yes,width=device-width,initial-scale=1,maximum-scale=1">
Then align the rest of your divs or containers as block or inline blocks with % widths
Unless you specifically want a pixel width for a div.
Related
I am aware this type of question has been asked before, but the solutions given there are not giving the resolution for me.
I want the <td> to have 70% width, but the inserted image is pushing the widths for received emails in outlook (I use MS Outlook Pro 2013). I do not want to use unit px because that doesn't work to cover all screen widths. A solution could be to use <div> instead of <td>, but I was told that <div> isn't supported correctly everywhere. Please advise.
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>
My Attempts
I wrapped the <img> with a <p> tag
I added display: inline-block for <td>
I added attributes width and height for the <td> and <img>
I added width: 100% and height: auto for <img>
The good news is that Outlook doesn't support #media queries so you can override any set values you need to use in email.
Outlook tends to ignore inline styles for image width. Assuming you want 600px-wide email and your image is 400px, code the width like this:
<img src="example.jpg" width="400" style="width: 70%; height: auto;" />
Some other things you should be aware of is that box-sizing doesn't work in most email clients. border-radius does not work with Outlook.
https://www.campaignmonitor.com/css/box-model/box-sizing/
https://www.campaignmonitor.com/css/box-model/border-radius/
Good luck.
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
I'm currently working on some custom responsive email templates that will be used in my clients Mailchimp. (yes, the struggle is real..) The passed week I've been trying to figure out why Outlook shows my images at their original sizes.
As you can see in my code snippet below I've set a width to my img, td and tr. Also tried to add it to the table, didn't make any difference. So even I've set a fixed with to it, in Outlook the images still shows at their original size which causes the layout to go to sh*t.
<body bgcolor="#e8ebee">
<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee">
<tr>
<td>
<!-- content1 -->
<table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td bgcolor="#FFFFFF">
<table>
<tr width="650" style="width:650px;">
<td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650">
<img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end content1 -->
</td>
</tr>
</table>
<!-- end wrapper table -->
</body>
I also have a Litmus account which shows no errors concerning the images when I use the previews.
If I were to use images with the size I define in the attribute and the style, there would no problem. But since this is for a client who will use Mailchimp I want to make sure that even when he uploads a bigger image, everything is still as it's supposed to be.
A second problem is that I use some images as icons, which are double the size for retina screens. Here is the full code for the email at jsfiddle And on top of that it should also be responsive. So the images should scale nicely for each device/screen.
Does anyone has an idea or solution that gives me back the power over my images in Outlook? I'm also willing to forget about the fluid email, and have just 2 widths one for mobile and one for desktop.
Oh and last but not least, Yes, I did google it and I think I've been through almost every blog/article about responsive email design the past week.
Thanks in advance for any help!
The solution for this is to use HTML height and width attributes without pixels.
So
<img src="..." height="200" width="600" />
Then for mobile you can use a media query. This will mean you can use retina images or anything else you want. I would recommend you use srcset for retina images as Outlook etc will simply ignore them and download your email without downloading loads of extra images.
You can find more info here:
https://litmus.com/community/discussions/1007-outlook-image-sizes
This will solve your issue:
<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />
Without display: block; sometimes it happens that there will be a 1px gap below your images.
max-width: 100%; prevents your image to be larger than your container.
The width: 100% is useful, because the image will get your container's width.
You should set the width attribute to the exact width in pixels.
I observed that if I use the width attribute together with max-width: 100%; then it will be rendered correctly on Word based Outlooks. Without max-width, the original width will be applied. (On Word based Outlooks.)
Outlook uses the MS Word rendering engine, so it's going to give you problems. Im Mailchimp you have the option of not only doing inline styles, but you can create a header css sheet as well, complete with #media-screen responsive rules.
As far as Outlook is concerned, you should add two things to the html email template:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
this tells the email that "Hey, use the MS Office Schema where necessary.
then all of this in your header CSS:
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
img{
display:block;
}
The ExternalClass will help show Outlook that you mean to reference use the Microsoft rendering engine. There is a really nice guide from Mailchimp regarding this very subject available here.
Good luck!
edit: many things are going to break in your template. I started a basic Mailchimp Template for you and fixed a few things. Check the snippet.
Codepen
Note that this is still not responsive. Because you have not included any code to make it so. You want to add full body styles to your tables, TD widths and images.
I expect each table row to fill to a maximum of 600px, but a table row to be 100% of the screen width when the viewport is less than 600px. There seems to be no response in Chrome Developer Tools given a small viewport. Why?
<style>
#media only screen and (max-width: 600px) {
table,tr,td {
width:100%;
margin:0 0;
}
}
</style>
<table style="max-width:600px;margin:0 auto;width:100%" align="center">
<tr class="test">
<td style="background-color:red;text-align:center" class="test">
To view this email as a web page, click here.
</td>
</tr>
<tr class="test">
<td style="background-color:blue;text-align:left" class="test">
test2
</td>
</tr>
<tr class="test">
<td class="test">
<div>
<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_twitter.jpg" align="right">
<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_facebook.gif" align="right">
</div>
</td>
</tr>
</table>
--Update--
The code above works on Outlook Mobile, works when resizing Chrome window to less than 600px, works in FireFox on resize and in developer mode, works in IE on resize, but does not work in Chrome Developer Console with an emulated device less than 600px wide, and does not work on my Android Nexus 6.
Adding tag
<meta name="viewport" content="width=device-width, initial-scale=1">
resolves this issue.
When you're using inline styles like:
<table style="max-width:600px;margin:0 auto;width:100%" align="center">
In your HTML you're going to have to override it by adding !important to your css.
Here's your code working in JSfiddle. The only thing that I changed was adding that !important tag to your css!
https://jsfiddle.net/pLtb28a1/
Keep in mind that the only way to override a tag with the !important flag on it is to use another !important flag on your override. They can make things a little tricky if you forget you are using them.
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.