I'm developing templates for an automation tool, and have an issue scaling retina images in outlook.
I understand that normally you have to use the image attributes, for example: style="max-width: 100px; width: 100%;"
The problem is that if the users, who are going to work in template mode, will replace the images, the tool replaces the whole image tag (and thus my inline css).
I'm wondering if someone knows another solution for the scaling issue in outlook? Putting these styles on surrounding div's, tables, or td's don't work unfortunately.
Thanks in advance!
you can try with this:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#media only screen and (max-width: 479px) {
.deviceWidth {
width:300px !important;
height:auto;
}
}
</style>
</head>
<body>
<table width="600" class="deviceWidth">
<tr>
<td>
Retina Image (600) using media queries.
<img class="deviceWidth" src="http://www.emailonacid.com/images/blog_images/Emailology/2015/Flower_600.jpg" width="600" ><br/>
</td>
</tr>
</table>
According to this article, it should be a valid alternative.
Hope this could help,
L.
Related
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.
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 have defined a table that uses the whole width of the page width="100%" and want to define images inside it that have as maximum the same width of the table max-width="100%".
But it does not work for IE and Firefox!
I have read that if I donot define a width for the table these navigators are not considered the max-width attribute, but, what can I do to get what I need?
OK, I am editing my original question to be more specific:
HTML code (i.e. "paco.html"):
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="myStyles.css"/>
</head>
<body>
<table>
<tr>
<td><img src="myImage.png"></td>
</tr>
</table>
</body>
</html>
Now the CSS code (myStyles.css):
table, td{
width: 100%;
}
table td img{
max-width: 100%;
height: auto;
}
...and this is all.
The max-width attribute is CSS not HTML you have to either put it in your CSS or say:
<img src="#" style="max-width: 666px;>
For more information on Max-width check: MDN
This fantastic article describes how to create responsive tables which scale fabulously to mobile browsers.
Now I'm trying to apply the same technique to html emails but display:block just won't seem to work in html emails.
To reproduce the issue:
Save the following code as an HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#media only screen and (max-width: 760px), screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table, td, tbody, tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px solid red;">1/3</td>
</tr>
<tr>
<td style="border:1px solid red;">2/1</td>
<td style="border:1px solid red;">2/2</td>
<td style="border:1px solid red;">2/3</td>
</tr>
</table>
</body>
</html>
Open the page in Safari
Resize the window to note how the table changes with a smaller window-size
Press CMD+i or File->Mail Contents of this page to create a HTML email
Resize the email window to note how the table still resizes correctly
Send the email to yourself and open it.
Now notice how the email indeed responds to the media query but unsuccessfully restyles the table.
I have yet to find an email client that actually displays the table correctly. Is this a dead-end or do you have ideas of workarounds?
The accepted answer provides some great info but it doesn't address the question directly. I've been experimenting with responsive emails recently and have come up with some good solutions others might find useful. Here we go...
To answer the question, you can use display:block; to make table columns behave as rows on some mobile devices (Android, iOS and Kindle).
Here's an example showing how you would make a 2 column layout stack (left columns on top of right column) on mobile devices.
HTML
<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</p>
</td>
<td width="50%" align="left" class="full">
<img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</td>
</tr>
</table>
CSS
#media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; } T
body[yahoo] .full {
display:block;
width:100%;
}
}
Note: The body[yahoo] selector prevents Yahoo from rendering the media queries. The body element of my email has a yahoo="fix" attribute.
The above CSS says that if the screen is less than 640px in width then the tds with a class of full should display:block with width:100%.
Now, let's get a bit fancier. Sometimes you'll want the column on the left to stack BELOW the column on the right. To do this we can use dir="rtl" on the containing table to flip the order of the columns. The CSS stays the same, here's the new HTML:
HTML
<table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" dir="ltr" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</p>
</td>
<td width="50%" dir="ltr" align="left" class="full">
<img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" />
</td>
</tr>
</table>
By adding the dir="rtl" we're telling it to reverse the order of the columns. The first column (in the flow of the HTML) is being displayed on the right, the second column (in the HTML) on the left. For screens smaller than 640px it displays the first column (the column on the right) first, and the second column (the column on the left) second.
Here's the full HTML and CSS and a screenshots from Gmail and iOS 5 are attached.
I suggest you refer to this: http://www.campaignmonitor.com/css/
While not very up to date, it's a great resource in terms of css support for emails. Unfortunately when building email templates you need to consider not only browsers, but different clients e.g. Outlook and the css support they offer is notoriously poor.
On top of that, mail providers like gmail tend to strip certain parts of your document (e.g. the head tag) so it becomes really difficult to apply any responsive design concepts to an audience (the email clients) that has very poor support for even basic css.
I was able to make it work, here is the result:
https://litmus.com/pub/d9ac198
Here is a code I use to force td to behave like rows:
table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
display: block !important;
width: 100%;
}
Another approach is to work with 2 designs in one e-mail: one for desktop readers, and one for mobile readers, as demosntrated here.
I'm having the exact same issue! I thought it would just work on Mail on iOS devices, but it happens exactly what you're saying - it works until you actually send it.
#Luca, we know support isn't great, but media queries are ignored by most so it's a nice touch to add if you want the email to look a bit better on modern email clients. Outlook and others would still get the 'normal' HTML email, without the media queries/responsive tables.
I have found that using media queries to stack td elements for mobile devices like this
td[class="stack-content"] {display:block !important}
seems to work for most devices with the exception of windows phone 7 which apparently does not support the display: block property.