Use HTML email template in Outlook, without Outlook messing up the HTML? - css

I know how to create an HTML email template for Outlook, by copying your HTML file (in Windows) to %AppData%\Microsoft\Stationery. However, if you use the template to send emails Outlook messes around with it first - adding CSS to the head, stripping out things like media queries (from the head), adding its own CSS classes to the HTML etc etc.
Is there a way this can be avoided or minimised?
Thanks,
Toby

Outlook completely rewrites the HTML using the MS Word rendering engine when you send out. Pretty much once Outlook has its claws on your email, it is now a Word doc.
Also, I would recommend saving the code as an HTML file, then using Insert > Document >Insert as Text option when you go to send a new email in Outlook to create your HTML email instead of stationary. This allows much more leniency in HTML/CSS display. (Walkthrough)
Designing for sending from Outlook is extremely tricky and unless you have an experienced HTML/CSS email designer, I would recommend (as much as it pains me to say) that you just create it through Word and saving as HTML file. As long as it is going from Outlook to Outlook, there should be little to no discrepancy in design.
If you are going to send to recipients that do not use Outlook, then you will need another email client to send from or deal with the fact that either these people will get less than optimal email messages or create a super simple design that can display well across all email clients.

Related

Using custom font in email html template

I am trying to use custom font in my Email template, but it seems webmails like gmail remove style tag in email body. Is there any way to load a custom font in email body? Like file URL or base64 encoded data URI?
Custom fonts using #font-face only have limited support on email (no support for Gmail). https://www.caniemail.com/features/css-at-font-face/
The only way around it is to save it as an image. Having said that, many people do use images extensively for that reason.
If you do use an image for writing make sure you:
Use a font-size large enough to be read on the mobile rendition (which will often reduce it to half size)
Use the 'alt' attribute to write the text out for screen readers, smart watches & other smart devices that use a plain text rendition of your email
Test it on a few different email clients
Do not over-do it. Low quality (and spammy) emails tend to be image-heavy, and you don't want to get that sort of reputation.

Outlook - How to use html as a template (with css)

I've been looking at some html templates for Outlook and I've found stuff like Cerberus and Foundation for emails, but none of these tell me how to actually use them. Unless I'm totally blind.
I've tried the obvious steps. Attaching a file in a new message and selecting "attach as text". This adds the html is seems. But the responsive css doesn't seem to be working. I've also tried opening the html file in Word and just copying the whole thing in a new message. Which seems to give the same result.
What am I doing wrong? And why isn't it obvious to me how to actually use these templates?
We went through a similar challenge last year. We are a Mac shop, but I have built sizeable VB addins and feel confident in saying that VBA for Outlook is rubbish.
We have a customer that uses exchange server. We have to send emails on their behalf and we do all of this automatically using a python library called exchangelib. It allows you to define a nice html template, populate it with your variables, and then send things off. It also forms the basis for all of our email parsing activities...although not in scope for this question. I'm happy to share code if the Python option is of interest.
If you aren't into Python, you might consider something like MailChimp or any of those other marketing email providers. We also use them and it's quite easy to get through.
I hope this helps in any form.
Edit again = I was able to successfully import an html file into the body of the outlook email and send it using a macro. The only issue on desktop was with skewed images and that can be fixed with hard-coding your width and height. I am not able to make it responsive and I don't think it's possible to do so sending from outlook.
Sub MakeHTMLMsg()
Set objMsg = Application.CreateItem(olMailItem)
Set fso = CreateObject("Scripting.FileSystemObject")
Set ts = fso.OpenTextFile("C:\filepath\template.html", 1)
strText = ts.ReadAll
objMsg.HTMLBody = strText
objMsg.Display
Set fso = Nothing
Set ts = Nothing
Set objMsg = Nothing
End Sub
My original answer below applies if you're sending to outlook, not from it.
How are you coding your email? Best practices for email HTML is to code it like it's 1999 and outlook is quite the outlier when it comes to using responsive CSS, unless you're using the mac version. Try also putting all your styles inline first or including your source code for us to see. I'm an email dev and marketer by trade.
Here are some links to get you started but we can't help you without seeing the template first:
https://www.emailonacid.com/blog/article/email-development/coding-for-outlook-2016
https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch

Printing receipt ASP.NET

I'm currently making a project where I need to print out a receipt on a receipt printer.
At the moment i'm using the CSS mechanism media=screen , media=print to indicate what to print.
Problem is of course the header and footer which can't be removed, as it is client browser specific.
So i'm wondering if anyone has another suggestion on how to do the printing. Preferbly without using too much IO.
Generally speaking, if you need precise control, your best bet is to have a pdf, or other doocument format that is generated from the server, for your printing. (if the machines printing receipts are controlled, and have word, than .doc (html with an output type) is the easiest method. There are a number of third party controls for generating PDF from server-side code as well. Hope this leads you in a usable direction, since you didn't specify if you controlled the client machines in use.
One benefit to PDF is you can use it as a hard archive, as well as being able to email receipts as an attachment.
The header and footer information (Assuming you're talking about the URL showing up at the bottom of a page) is client-side and there is nothing you can do to change that from server side.
If all of your printing is going to be done from inside your company, you could have a group policy created for Internet Explorer printing to remove these company-wide. You could also just have instructions on your page on how to change these setting manually.
Another option is to print with a 3rd party application, such as PDF, or print it directly from the server if that option is available to you.
Do you mean the page header and footer?
If that's the case, wrap the header and footer in IDs and create CSS tags to target them and give them a much simpler styling, or you can use the CSS element display:none to remove them altogether in the print css.
You could load the content you want to print into an iframe, focus on it, and print that. That way you'll have exact control over what appears on the receipt.
It'd take a small bit of javascript, but I've had success doing similiar things when I wrote a custom contract printer.
It's not an ASP solution, but may help:
http://code.google.com/p/jzebra
It's a java plugin that can bypass the header and footer stuff.

Read rss and show as html

I am using google reader for my RSS, i want to export all my shared or starred rss items to HTML to take this html and put on my website
Do any one have an idea about?
And one important thing as well, can i page through this html? i mean to export as pages not all in one html page to let the user on my site page through my starred feeds.
Thanks,
With XSTL you can transform XML to any format you want, including HTML. You can do the transformation on the server, or with modern browsers like IE6+ and Firefox2+ you can do the transformation on the client side. XSTL isn't very pretty as a programming language, but the concept is pretty neat.
I don't know if you can link directly to the RSS feed XML so that it's always up to date. I think Google requires that you authenticate and have permission to access the feed.
You can read from an RSS with jQuery by selecting and iterating through the tags rather easily. Additionally, you can perform conditional-checks on attributes etc as well.

Parsing PlainText Emails from HTML Content (ASP.NET)

Right, in short we basically already have a system in place where the HTML content for emails is generated. It's not perfect, but it works.
From this, we need to be able to derive a plaintext alternative for the email. I was thinking of instantly jumping on and creating a RegEx to strip the <*> tags from the message - but then I realised this would be no good because we do need some of the formatting information (paragraphs, line breaks, images etc).
NOTE: I am OK with actually sending the mail and setting up alternative views etc, this is only about getting plaintext from HTML.
So, I am pondering some ideas. Will post one as an answer to see what you guys think, but thought I would open it up to the floor. :)
If you need any more clarification then please shout.
Many thanks,
Rob
My Solution
OK, so here it is! I thought up a solution to my problem and it works like a charm!
Now, here are some of the goals I wanted to set out:
All the content for the emails should remain in the ASPX pages (as the HTML content currently does).
I didn't want the client code to do anything more other than say "SendMail("PageX.aspx")".
I didn't want to write too much code.
I wanted to keep the code as semantically correct as possible (no REALLY crazy-ass hacks!).
The Process
So, this is what I ended up doing:
Go to the master page for the email messages. Create an ASP.NET MultiView Control. This control would have two views - HTML and PlainText.
Within each view, I added content placeholders for the actual content.
I then grabbed all the existing ASPX code (such as header and footer) and stuck it in the HTML View. All of it, DocType and everything. This does cause VS to whinge a little bit. Ignore It.
I then of course added new content to the PlainText view to best replicate the HTML view in a PlainText environment.
I then added some code to the Master Page_Load, checking for the QueryString parameter "type" which could be either "html" or "text". It falls over to "text" if none present. Dependant on the value, it switches the view.
I then go to the content pages and add new placeholders for the PlainText equivalents and add text as required.
To make my life easier, I then overloaded my SendMail method to get the response for the required page, passing "type=html" and "type=text" and creating AlternateView's as appropriate.
In Summary
So, in short:
The Views seperate the actual "views" of the content (HTML and Text).
A master page auto switches the view based on a QueryString.
Content pages are responsible for how their views look.
Job done!
If any of this is unclear then please shout. I would like to create blog post on this at some point in more detail.
My Idea
Create a page based on the HTML content and traverse the control tree. You can then pick the text from the controls and handle different controls as required (e.g. use ALT text for images, "_____" for HR etc).
You could ensure the HTML mail is in XHTML format so you can parse it easily using the standard XML tools, then create your own DOM serialiser that outputs plain text. It'd still be a lot of work to cover general XHTML, but for a limited subset you plan to use in e-mail it could work.
Alternatively, if you don't mind shelling out to another program, you could just use the -dump switch to the lynx web browser.

Resources