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.
Related
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 am displaying the images with different size in html using img tag. One of the image is 267x168 while the other is 1068x672. Both of images are same but different size. Suppose the smaller image will be aliased as it has been displayed in 50% width. But both of them just look the same. Are the images has been proprocessed before displaying? If yes, how to disable it?
<!DOCTYPE html>
<html>
<body>
<h1>Result Comparison</h1>
<style>
img {
width:100%;
}
td{
border: 1px solid black;
padding:1%;
}
</style>
<table style="width:100%">
<col width="50%">
<tr>
<td align="center"><img src="original.png" width=50%/>Original (size)</td>
<td align ="center"><img src="bicubic.png"/>Bicubic (size)</td>
</tr>
<tr>
<td align="center"><img src="average.png"/>Average (size)</td>
<td align ="center"><img src="median.png"/>Median (size)</td>
</table>
</body>
</html>
When you resize an image, some processing must happen. The software doing the resizing (be that an image-editing program or a browser) must work out some way to remove pixels or add them. It does this using an image filter algorithm. Some common ones are point, linear/bilinear and cubic/bicubic.
In most image editing programs you can choose which type of filter to use, but browsers decide for you. Luckily it looks like you can have some control; based on the information on this page, it looks like you could add a CSS rule to get a pixelated look, like so:
img {
image-rendering: pixelated;
}
However, it's worth noting that to get the pixelated look you have to use a different rule for certain browsers, according to this page. In Chrome, pixelated works, but not crisp-edges. It's the opposite for Firefox.
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.
Okay so I've bought a theme for mailchimp and need to modify it slightly for my own personal use. The html is written in tables.
What i am aiming for, is the background image in the header of the page (top table), to resize when the browser shrinks down to mobile size.
So far i have been able to achieve the shrinking of the image (through the use of setting width to 100% and not setting a height), although, when the browser is shrunk down to mobile size, the purple body behind the image overflows underneath the image (like this http://i.imgur.com/DfLv29v.png), when do not want to see any background at all. Along with this, on shrinking, I am trying to get the title, text, and read more button to scale down with the image, and have the logo and all top links hidden.
I have tried playing around with max-height and max-width, setting overflow to hidden, and trying to re-do the whole thing using a div container instead of a table, but it got way too complicated. I have no knowledge of javascript or jquery so a html/css solution is preferred.
Here is the code for the main section that i'm trying to shrink -
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" class="container800">
<tr>
<td align="center" style="background-image: url(http://pickedmail.com/mira/img/main-bg.png); background-size: 100%; background-position: top center; background-repeat: repeat;" background="http://pickedmail.com/mira/img/main-bg.png">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bodybg_color">
<tr><td height="30" style="font-size: 30px; line-height: 30px;"> </td></tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td height="5" style="font-size: 5px; line-height: 5px;"> </td></tr>
<tr>
here is the full thing in jsfiddle - https://jsfiddle.net/jackgenesin/2zzkrqzf/
Any help appreciated, feel free to tell me its way too complicated to do purely in html/css haha, thanks
The purple body has nothing to do with the image. That's coming from the bgcolor="8a5a8d"in the first <table> tag in your fiddle. You could eliminate that and the color would go away.
With the code you've posted, you've got explicit pixel widths declared in the first two <table> tags. This tells a browser that these shouldn't be resized. You need to use a relative dimension (e.g. 100%) to make this work. Better still add this css: `style="max-width=800px;" so the table doesn't get too big on desktops.
Since you've got nested tables to make this layout (something that still is required for many email clients), to really stop the header image from spilling over into the message body, you'd have to create two sets of nested tables one after the other. If that's too much work, change the background-size: parameter to cover. That will stretch the image to fill the background, cropping edges if needed to make everything fit.
Finally, to really achieve everything you want, with the auto-hiding logos and shrinking menus, you need to make your template responsive. Take a look at the free mailchimp templates for code you might be able to reuse for this.
And you will have to do all this in HTML/CSS, since you can't rely on an email client allowing javascript.
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.