I have a PowerShell script that creates a single HTML file, email.html, with inline CSS and embedded base64 images.. then sends it daily to me (my website reports).
I want all (text/images) that are in the body of the email to resize automatically based on the width of the email client viewable area. Admittedly, I have limited experience in HTML/CSS. What am I doing wrong in my example below? Note: I truncated the base64 text in the example below so it doesn't take up too much space in my example.
Code:
<!doctype html>
<html>
<head>
<style type="text/css">
#media screen and (max-device-width:640px),
screen and (max-width:640px) {
.responsivetext {font-size: 2vw !important;width:auto;height:auto;vertical-align:middle}
}
</style>
</head>
<body>
<td style="font-family: Arial;" class="responsivetext">I have tried everything. Why wont this text resize when resizing Outlook 2016?</td>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAIEAIAAADwyk6cAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0T...." />
</body>
</html>
I've been dealing with this situation too. It is very difficult to achieve success in all options.
Outlook does not really have any solid support for media queries unfortunately and is often 'left out' when it comes to mobile responsive emails.
Can media queries be used in Outlook
I suggest to you here you can create responsive html design and examine it.
Related
I built an HTML page to display it as an iframe and on desktop everything works fine. Now I would like to make it responsive and transform the layout of the content via media queries. I don't know what is going on but the HTML element keeps a width of 960px.
I used Atom and it gave me a HTML structure that I used for a simple test.
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Viewport Test</title>
<style media="screen">
body {
text-align: center;
}
</style>
</head>
<body>
<span>TEST</span>
</body>
</html>
I use the dev tools of Chrome to test the responsive layout and I set the width of the window to 360px but the HTML document keeps at 960px.
I cant understand what's going on here.
Please help me and thank you.
I don't know if this is related anywhere to your question. Refer this once if it helps.
Discussed issue here.
thx #sao for spending your time to editing my post at first.
But does realy noone had any thoughts in this Case?
I have an HTML banner that is being applied to emails that come in to our environment from an external sender. After testing, it was revealed that the banner blocks a person from previewing a received email on the mobile device. I have zero knowledge of HTML or CSS. What I have is from piecing together from bits here and there. The current articles I am reading are telling me to use the following code:
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
I've altered my HTML to this:
<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>
</tbody></table><h1></h1>
<br />
<mc type="body">
</div></body></html>
Can someone point out what I am doing wrong?
One thing I can see is a typo in your style attribute:
<div class="”mobileHide”">
...has two double-quotes. It should be this:
<div class="mobileHide">
Some desktop email clients also show email preview text, so any solution that removes the header only on mobile clients will leave desktop clients with the same problem you are trying to solve. Instead of targeting mobile clients, it makes more sense to work with the preview text directly.
To get custom preview text on your email, it has to be the first text that appears in your email's body section, even before your header.
From litmus.com:
Preview text is pulled from the first few lines of text found within an email.
So what's happening is that the email client is reading the first few lines of your email to determine what to show as the preview text, but since your header is first, the email's preview text is the gibberish from the header section instead of the marketing speak that you want it to be. The parsing of the email preview as far as I can tell is unaffected by CSS styling such as display: none, though I could be wrong about that.
What Litmus recommends you do is to add an extra, hidden element before your email header (right after the opening body tag) that contains the preview text that you want to show in the email client. You'll want to use this code:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
It's not pretty, but email HTML itself is not pretty. What this does is it makes a hidden element at the top of your email that the client will show as preview text, but that won't actually show to the end user when they open up the email.
In your situation, you might want to pull this preview text programmatically from the incoming email, then apply this element before applying the header.
Does this constitute spam or misleading behavior? Does it hurt your deliverability? Litmus says that it's fine in their experience:
Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.
I'm creating an email template and I am trying to make it responsive now I've run into a problem, I have been looking into using the "#media" tags but emails don't really like <style> so I'm really not sure how to do it.
<body>
<table>
<table>
<tr>
<td>
text blah blah
</td>
</tr>
</table>
<!-- This is the one I was responsive (The one below) -->
<table>
<tr>
<td>
Make this table responsive <3
</td>
</tr>
</table>
</table>
</body>
P.S, I don't need the top to be responsive so how can I link the second one to the CSS
I have all my tables and the Desktop design look perfecto' E.G the divs and tables are '%' not 'px' and I have 2 divs next to each other when it get scaled down to mobile they are still at 50% of the browser screen (50% of the mobile and desktop) but when they get scaled down I want them to be 100% of the mobile screen
<head>
<style>
#media only screen and (max-width: 771px) {
/*add your class and code here*/
}
</style>
</head>
<style> tag would go into the <head> tag.
But be careful what you use some platform have abysmal email CSS support, also see this.
I would limit my use of CSS3/HTML5 in emails.
But honestly I wouldn't bother with building it from scratch, it's just too tedious of a task; you have to get it working on different platforms.
I would use an email HTML builder (most are free) like:
stamplia
campaignmonitor
litmus
inkbrush
*Note: Conventionally with HTML emails you would lay everything out with tables, not grids.
There are two approaches to using media queries - mobile first or desktop first.
The way that has the most support and is likely the easiest for someone just entering into HTML CSS is desktop first approach. In this you will inline all the styles for your desktop rendering. You then add media queries for the different breakpoints to make the email fit the device screen. This is easiest and has most support as the only mobile email clients that do not really support media queries are ones like the Gmail App (which are usually a small percentage of your mobile audience). The issue is that, using the Gmail App as an example, depending on how you styled your email, this may cause it to break on Gmail app - causing display issues.
This is where the mobile first approach comes in. Mobile first builds the email with inline styles to display correctly in gmail app and then uses media queries and mso conditional statements to make it flesh out and fill correctly on a desktop display. This requires much more knowledge of CSS and email client 'quirks and hacks' but can create emails that display beautifully across all clients. This can sometimes require much more styling and much more code to accomplish due to the complexity of the different processors in email clients.
For initial forays I would recommend building as always desktop first and then use media queries for mobile as it is simple and is much more widely supported, so requires much less hacks.
For help with supported CSS, please reference - http://www.campaignmonitor.com/css
Hope this info helped.
References:
Litmus - https://litmus.com/blog/understanding-media-queries-in-html-email
Email on Acid - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails
CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
In HTML emails, you have two ways to do all of your styling, since you can't have a seperate stylesheet.
The first is a <style> tag.
Your email will have a structure of <html>-><head>-><body>.
<style> tags can only be placed in the head so your set up should look something like this.
<html>
<head>
<style>
#media screen only (max-width:767px){
/* Your CSS goes here */
}
</style>
</head>
<body>
/*HTML Code goes here */
</body>
</html>
The other option you have will only work if you just want to change width, and that would be using percents in your element's inline styling, like this:
<div class="header-block" style="width:100%;"></div>
You can find more on using media queries in emails on litmus.com.
If you already have it made up with extra CSS in your style tag, the Inline styler tool might be able to help you convert embedded styles to inline.
already done and use and try it
Its not using in Media inside a table structure
<table width="600px" max-width="100%" align="center">
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
</table>
I'm having an issue in Google Chrome on Windows only (tried IE11, FF, Opera, Safari) with printing. The issue only occurs when using the system print dialog. Using the Chrome Print Preview renders expected results, but it's just when using the system print dialog that I get the issue.
The first image below is the expected result (printed using the normal Chrome Print Preview window):
And this one is what I get (using the system print dialog):
I think it's pretty self explanatory what the issue is - all the text has a white highlight.
The other possibly related issue is that none of my fonts are correct - the PDF is rendering using Arial, instead of the correct fonts I've declared.
These were printed to a PDF printer, however the results are exactly the same when printed on paper, and I've tried two different manufacturers of printers.
I would post CSS (as I suspect that's the issue) but I'm not really sure what to post.
I've tried changing heaps of different CSS values from various elements (too many to name), but I've tried the obvious ones: background-colors and backgrounds, tried removing opacities etc.
Any ideas would be greatly appreciated!
Edit: A live URL with an example is at: iNewsletter
Edit: Just wrote a simple test case which also fails:
<!DOCTYPE html>
<html>
<head>
<style>
#bg {width: 500px; height: 500px;}
#text {margin-top: -500px;}
</style>
</head>
<body>
<div id="bg"><img src="http://inws-cache-dev.s3.amazonaws.com/3-resize-1024-768.jpg" width="500" height="500" /></div>
<div id="text">This text will have a white highlight</div>
</body>
</html>
Which leads me to think it's a Chrome bug
The problem is in your CSS like you guessed. Search for #media print in your CSS, that controls the printing style. The live site you provided, doesn't allow any print at all so you get a totally white document as it sets the print style display:none.
I'm wondering because I have seen a lot of different answers. Ultimately I would think 500-600px would be fine. Especially if you are building to match standards for Hotmail, Gmail, Outlook, Mail.app, etc.
But I would like to hear others' opinion on the matter. Is there a set size perfect for developing e-mail newsletters? This is talking about building the template with HTML tables.
IMO you shouldn't set the width. I, like many others, tend to view my email on my phone. The population of users with smartphones is growing; so is the population of users that also use their phone to check email.
You never know what resolution a user is at. If you want them to actually read your info, and not just delete it since it causes annoying horizontal scrolling, it would be a good idea to avoid a set width if at all possible.
For viewing purposes, change your Windows resolution (or Mac resolution) to the smallest possible. And see what it looks like. Although, I'd stick with the website baseline resolution, which is 800x600. I would assume this would also apply to email sent in an HTML format.
If you are wanting to make your newsletter printable (to a physical printer) in HTML, I would use different style sheets for different browsers when the page prints and flip the media attribute to "print". Then it will look differently depending on when the style is applied and whether the end-user is printing the page to a physical printer or viewing it in HTML. Test thoroughly with different browsers. I've seen strange behaviors in the Print Preview print scale change in different browsers. Sometimes the scale doesn't persist. Google Chrome is the worst for making the print scale accurate. They are good for performance and styles working consistently, but are poor when it comes to sending to printers. In IE 9, the print scale default doesn't persist. In some versions of Mozilla, you need to force the scale to 125% (or anything other than 100% really) then to 100% before it actually becomes 100%. I won't get into details, but this snippet of code will get you started on how to use the media attribute. The print scale "Shrink To Fit" is your worst enemy. If the browser supports CSS3, then you have more options and can better control how your newsletter prints!
Example:
<style type="text/css" media="all">
.printPage { height:100%; width:100%; position:relative; }
</style>
<style type="text/css" media="print">
.printPage { height:8.5in; width:100%; position:relative; }
</style>
Here's a good code snippet if you want headers/footers in your page:
<html>
<head>
<style type="text/css" media="all">
thead { display: table-header-group; vertical-align:top; }
tfoot { display: table-footer-group; vertical-align:bottom; }
.printPage { height:11.5in; }
</style>
<style type="text/css" media="print">
.printHeader { display: table-header-group; vertical-align:top; }
.printFooter { display: table-footer-group; vertical-align:bottom; }
.printPage { height:100%; }
</style>
</head>
<body>
<table class="printPage">
<thead class="printHeader"><tr><td>Your header goes here</td></tr></thead>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
<tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
</html>