HTML/RICH emails dynamically sent from Python - html

I have what I thought was a simple task to do, that has now snow balled into something else. I wrote a simple python script that would generate simple customer notification over email in plain text using smtplib pretty simple.
Now when trying to make a more rich email, like those that Paypal,Amazon etc send, I run into some problems. Having read a question here and coupled with what I thought was a universal template I got from here I felt armed to complete my task.
However I keep reading about fragmentation and how various email clients don't support all sorts of tags and when I open it on my Hotmail client on Android it looks perfect but when I open the same email on chrome (WIN) on Hotmail it misses some buttons styling. Let me not even get started how it looks on Yahoo mails Android client (I know you are now wondering who cares who still uses Yahoo or Hotmail but a lot of people still do).
Where as Amazon and Paypal emails look consistent in styling across all platforms,clients and email providers. I can't find a simple resource that clearly describes away to make a truly robust way of serving html content on email.
Can someone share a resource of how to do this with python?

Please see if this is helpful to you.
http://mailchimp.com/resources/email-design-guide/

Related

How Do Professionals Send HTML Emails?

Happy New Year!
So I've been teaching myself HTML5 and CSS3 by watching YouTube videos and coding in VS Code. I am now capable of creating responsive web pages using media queries.
What I would like to know is..
How do professionals send HTML emails? I would like to try doing this for the first time.
I've seen YouTube videos where they use Google Chrome's developer tool to inspect some placeholder text and then copy and paste their code in to the developer tool editor but this seems really amateurish to me? Like a hack rather than a long term tool.
Is there a commonly used application or program that is most popular among professional HTML Email Developers? If so what is it please?
I will just add that I do have some server space to store my images for the email. I just want to know how to send the HTML/CSS code as an email. I'm planning on doing it regularly so can justify using a professional app or program.
Thanks very much for your help and happy new year! :)
If I want to send multiple HTML emails, I typically use nodemailer, an npm package to use with nodeJS. This requires some JavaScript background and having nodeJS installed on your computer. Before I knew JavaScript, I used to just send HTML messages using Developer Tools and then using a template saver like this one by SendPulse. If I find anything new, I'll update you.

Link not working as popup in html email

Really simple here but i am trying to generate a link within an email that popups a page but its not working it also is througing a security exception in outlook 365 how does one properly open a popup from email with correct height and width of window.
here
Using scripts is totally unsupported in emails.
"Scripting in Emails
The short answer is that scripting is unsupported in emails. This is hardly surprising, given the obvious security risks involved with a script running inside an application that has all that personal information stored in it.
Webmail clients are mostly running the interface in JavaScript and are not keen on your email interfering with that, and desktop client filters often consider JavaScript to be an indicator of spam or phishing emails.
Even in the cases where it might run, there really is little benefit to scripting in emails. Keep your emails as straight HTML and CSS, and avoid the hassle."
Source: https://www.campaignmonitor.com/dev-resources/guides/coding/
You can use target="_blank" instead.
You have to use the a tag this way:
Open page in new window
Hope it helps.

HTML - Mails don't look right after they got send (thunderbird)

I'm currently making an E-Mail for Christmas Greetings. When I send the Mail or put it in "Drafts" he doesnt show the Mail correct.
How it should look
How it looks in reality
I am using WYSIWYG Web Builder 9
You can find the HTML code in the comments.
You'll just have to tweak and test the HTML until it works the way you want it to in Thunderbird.
I'd highly suggest using an email testing tool, such as Email On Acid or Mandrill to test your HTML in less common and dated clients.
HTML emails are painful to code, but it is getting better slowly :)
First off, I would suggest not using div's in email.
Stick with table's, tr's and td's.
Background images in email aren't well supported on desktop email clients like Outlook. Mobile support is great however!
You will need to use this site: http://backgrounds.cm/ to give you a hack to get support in almost all email clients...
Try to remember html email is like coding websites in 1999. It's old school and a pain!
If you get stuck, let me know.
I'm an email developer by trade, and would be happy to give you a reasonable quote to fix this up.

Media Queries in Email [Gmail]?

I'm just trying to send a little Christmas e-message around my friends/family, I've built it to be fully responsive etc the way I always do. However as it's just for friends I'm not going to send it via MailChimp which usually sends everything for me no problem.
The way I'm trying to send it is by opening the index.html file, selecting all, copying, then pasting into Gmail. This has always worked fine for me in the past, and does work. However this is my first responsive email that I'm trying to send this way, and it seems the media queries don't get brought across this way, at least not in the gmail -> hotmail test that I just did (Resizing window etc does nothing, just shows the desktop version).
Is there a better way of sending an already built HTML email, rather than just copying/pasting in Gmail?
Unfortunately, Gmail does not support the <style> tag. Media queries can only be called in the <style> tag, and not inline, therefore Gmail doesn't support them.
Here is the support chart.
I would suggest you stick to an ESP like Mailchimp for sending html email. But while you are playing around in Gmail, here is a tool that may help you debug issues with your email code.
The selected answer is not actually correct! Gmail strips IDs and classes from the email body itself, but the style tag IS retained.
You can use the following:
*[summary~='fakeclassname'] {
styles: here;
}
"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:
http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/
There are helpful links on that page that get deeper into Gmail-specific targeting.
Note: the Gmail app does strip the style tag, and with a rising market share (Android no longer has a native app and pushes people to use the Gmail app) should be considered a starting point for mobile-first email development.

What technologies should I use to build gmail extensions

I'm looking for some advice on what I "should" research for a particular project I've been asked to keep in mind. I've been doing so for roughly 3 days by exploring various Google technologies, but none of them seems quite right.
I need to put together something for gmail that's roughly equivalent to something I've put together for Windows Outlook. I'll explain in brief therefor what I've done for Outlook users, to give you a feel for what I'm looking for. I put together an Outlook C# AddIn that when loaded by Outlook on startup adds a number of clickable tabs, buttons, and other assorted interface elements to the Outlook interface. When you click them the C# code in my Add-In is invoked in various ways to carry out various activities, like archiving the email message that's currently selected in a remote database managed by one of our web applications. It does this by calling a variety of Outlook C# APIs that are available to any loaded AddIn, to extract or manipulate various Outlook "objects". Another thing it does on a button click is bring up a web browser the AddIn creates from a .Net class "webbrowser control" instance, essentially adding chrome to the IE "engine". It also adds what it needs to to the DOM of that web browser to make a large number of Add-In C# functions callable by javascript code that might be running in pages of that browser, essentially giving our web applications a way to "ask" my AddIn to create Outlook contacts, tasks, messages etc on behalf of that application. The gist of it is that the UI I add to the Outlook application can be used to make various web service calls to our applications (based on the state of various Outlook "objects" made visible/manageable by way of the Outlook C# API), and the state of the Outlook application can be manipulated by javascript code running in web application pages that happen to be loaded in the web browser it creates.
I need to support "similar" functionality with respect to the altogether different gmail beast (rather than a Windows application a browser based web app). I feel a bit like I've been spinning in circles the last few days, while investigating. I began by researching gmail Sidebar and Contextual gadgets, to add some roughly equivalent UI of my own to gmail, but found fairly quickly that I can't really get to any gmail APIs using them, only try to shoehorn what I've got into a set of triggered gmail "behaviors" supported by contextual gadgets, which I came to realize isn't really sufficient to support what I want. Eventually I navigated my way to the set of developer pages describing Google Apps Script supported functionally, which seemed for a time like "the way to go" to provide me with hooks into gmail APIs. I played a bit with them, making a web app script to collect the subject lines of all my gmail messages and dump them into a UI also built by the script, just to get an experimental quick feel for how things fit together. The script works, but it seems pretty slow, taking roughly a minute to collect and display just 57 email subject lines. And I can't really figure out how to get any script built UI into the gmail user interface. I tried building a side bar gadget with the URL of my app script referenced (with no HTML or javascript in the content tag body at all). An area is allocated to the gadget ok, but my script UI never appears in it. After playing a bit unsuccessfully to get my script to run in an iframe in a completely different context, just experimenting again to see what I might be able to do, I'm beginning to get the impression that some security related caveat prevents it from building/displaying its interface in either an iframe or a gmail side bar gadget, though perhaps I'm just missing some essential piece of information.
My question is a bit big I know, but "should" I be looking to other Google technologies to build the sort of thing I have in mind, or am I "roughly" following a tenable track. I'm looking for some rough architectural advice I guess, some hints about what maybe I should further explore.
With Google Apps Script you cannot add anything to the Gmail interface. Putting it simply, it will not do what you want.
Now back to your problem, if sidebar and contextual gadgets are not enough for you. The only solution I see where you can really manipulate the page is via an add-on/extension/script installed on the users browser.
This approach is powerful, in the way that you can change the page as you like, but has its shortcomings as well. First, and more obvious, it's somewhat browser dependent and installed locally on a browser. Meaning that if the user switch computers or browsers, he'll need to re-install your add-on.
Also, you're somewhat dependent on gmail's "internal" structure. I say "somewhat" because that depends on how you coded your app. But they may make a change and break your app instantly, without any notice, since gmail's html-css structure is not a "published API".
Well, that's my 2 cents. I hope it helps.
Use JSF and rich faces. this can give u a google gmail like looks and development with this is very easy and fast.
Happy Coding