html-email | 易学教程

Responsive emails on Gmail app (Android)

阅读更多关于 Responsive emails on Gmail app (Android)

I have created a responsive email template which works in all web clients, all versions of outlook, apple mail, thunderbird, iOS, HTC's 'Mail' app and nearly everything else minus Lotus notes. Is does not work forthe Gmail app on Android. I am pretty sure this is because gmail strips out all the css in header (which contains the media query) so it to show the standard web version but the window is mobile size, so it shows about 300px half the email. Is there anyway to force it to use the media query? Failing that is there a way to change viewport? What would be the best fall back option?

Gmail removes “position:relative” as inline CSS (Email Temlate)

阅读更多关于 Gmail removes “position:relative” as inline CSS (Email Temlate)

问题 From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work. However, I'm struggling with the CSS positioning property. I want an image to sit on top of a background image so I set the parent div of both to position: relative and the image to absolute. However, for some reason Gmail removes the style attribute that declares the position: relative from the div. It keeps all other inline

Is it possible to use display:block on td in HTML email, to achieve responsive table design?

阅读更多关于 Is it possible to use display:block on td in HTML email, to achieve responsive table design?

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 *

powershell email with html picture showing red x

阅读更多关于 powershell email with html picture showing red x

问题 I have a powershell script that sends out an email with an picture in the HTML but the picture is showing up as a blank square with a red X on it. I can't seem to figure out why its doing that as the examples I saw online are doing the same thing I am (unless I'm missing something pretty obvious which I think I am). Also, the picture is attached as well to the email and that comes out fine. Here is the code: $tool="SQLPLUS" $cmdLine = "user/pass@P1 ``@C:\NetworkThresholdTriggers\PuertoRico

Gmail Responsive Email - Media Queries - Style Tag

阅读更多关于 Gmail Responsive Email - Media Queries - Style Tag

问题 See here: Responsive emails on Gmail app (Android) I'm trying to build a responsive email for use in all email clients. Gmail is stripping my style tags from the head/body and the queries are therefore also stripped. I've tested using Email On Acid and Gmail just displays both versions! What is the solution here: 1) Using a framework? - even these use style/media queries 2) External stylesheet - is there any way to make this work? Has anyone found a permanent solution for this issue. Any

Background images not working in Outlook 2007 and later

阅读更多关于 Background images not working in Outlook 2007 and later

I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem? Here's the HTML for the email: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { padding: 0px; margin: 0px; border: 0px; outline: 0px; } .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p,

GMail is ignoring “display:none”

阅读更多关于 GMail is ignoring “display:none”

I have a query that gmail is ignoring "display:none" - what to do? in email html for hide arow or div Sagar If style="display:none" does not work in gmail, put style="display:none !important;" and it works in gmail. For those reaching here with a similar problem relating to mobile/desktop email development in and Gmail - if you're using media queries and showing/hiding content, the embedded css will be unable to overwrite the inline !important declaration. Instead you can use overflow:hidden, like so : <div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div> In your

What's the best way to center your HTML email content in the browser window (or email client preview pane)?

阅读更多关于 What's the best way to center your HTML email content in the browser window (or email client preview pane)?

I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS. http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for text-align:center on the tbody or something like this to do it? Is there a best practice for this? Align

How to deal with long links in HTML-emails

阅读更多关于 How to deal with long links in HTML-emails

问题 I've searched the web on this and I can find two solutions: Use a URL-shortner. Use brackets < > to allow insertion of whitespace. This only applies to plain-text emails. I'm sending HTML emails that contains sensitive information, like password recovery links and auto-authentication links. These secure links are, by their nature, quite long. Easily longer than 70 characters or whatever arbitrary limit is imposed on e-mail bodies. Obviously I can't use any form of URL-shortning because it

Has anyone gotten HTML emails working with Twitter Bootstrap?

阅读更多关于 Has anyone gotten HTML emails working with Twitter Bootstrap?

I'm using the premailer-rails3 gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap. https://github.com/fphilipe/premailer-rails3 It looks like some styles come in correctly, but not all of them. I'm wondering if anyone has a nice working example of getting their Twitter Bootstrap css (modified or not) into an html email. Thanks! Dan Blows If you mean "Can I use the stylistic presentation of Bootstrap in an email?" then you can, though I don't know anybody that has done it yet. You'll need to recode everything in tables though. If you are after