✔ Update automated emails with HTML templates - PENDING MIGRATION
Completed by Morgan M.
- Assigned to
-
Anil V.
Harsh P.
- Due on
- Notes
-
Please update all the automated emails generated by the user management system with the style guide outlined here: http://tologix-public-stage.s3-website.ca-central-1.amazonaws.com/islg-email-template.html. Further details and background are also available here: email html template.pdf - TOLOGIX - ISLG Maintenance
We have integrated all email templates withe new html design on dev.islg. Please check and confirm.
The email templates are looks good for gmail account. but, For Microsoft Outlook the link button is not display properly.
Folowwing are two screenshots for your refrence.
Please suggest.
Outlook uses microsoft word as a rendering engine so we will have to provide a fallback for the button styling.
We will have to replace the buttons with the following markup:
Add the following snippet to the end of the head:
<!--[if gte mso 9]> <style> .outlook-btn{ font-size:18px!important; line-height:24px!important; display:inline-block!important; font-weight:bold!important; padding:20px 45px!important; border-radius:30px!important; text-decoration:none!important; background:#1c449c!important; color:#ffffff!important; } </style> <![endif]-->Finally simply add the following after the </body>:
<!--[if mso]> <style type="text/css"> body, table, td {font-family: Arial, Helvetica, sans-serif !important;} </style> <![endif]-->These changes should get it looking much closer to the way it should in outlook.
Please let me know how this goes.
I have updated the html as you mentioned above. but, the button problem in outlook is still exists.
I have attached my html for your reference
Would you be able to let us know which version of Outlook you are looking at? It will help us track down the issue.
Thanks
We are using Microsoft Outlook 2016 version.
Just following up to see if we've come up with a solution to the presentation of the emails in Outlook. Note that I'd like to get this task wrapped up today so that
Thanks,
Morgan
I added a comment in the document thread here:
ISLG Email Template.zip - TOLOGIX - ISLG Maintenance
Thanks for this.
Morgan
We have replaced the Account Activation Email Template with New Email Template.
The Button issue has resolved for both outlook and gmail account. But,
For Gmail account, We are not able to see blue header with ISLG logo. Please see below screenshot.
For Outlook, The email is looking good. Please see below screenshot.
Please suggest.
Could you forward the above email to kandrews@industrialagency.ca. We are not able to reproduce the issue you are seeing above using the default template we provided.
I have forwarded the mail from my gmail account (parikhharsh10@gamil.com).
I've had an opportunity to test an view the activation email, and these are the current results:
Once we get this finalized, I'd like the template applied to all the automated emails across the system, which includes the following:
Thanks,
Morgan
We have replaced all email templates with new email templates and its looking good in both gmail and outlook. but, Currently we haven't changed the margins area in email templates.
With the exception of the narrow margin issue, all the emails are looking good to me on both Outlook and Gmail. Note, however, that the new HTML format is not present in the email for force password reset (see screenshot below), but I understand that this may be because the task is still in development.
Thanks,
Morgan
Could you please tell us that how to remove narrow margin form email template ? Above I have attached my email template for your reference.
This is assuming that by "narrow margin" you mean the width of the template.
If you do a search in your template for '600px' you should find a few width/max-width definitions. These can be changed to increase the overall width of the email template. All instances of '600px' should be changed to the same number without variations.
I would suggest doubling it to 1200px.
We have replaced width/max width '600px' to '1200px' in all instances for one email template and it is looking good for gmail account. But, For outlook account, the narrow margin is still remain same.
have you any idea for Outlook account ?
I have attached my email template for your reference.
you will have to replace all cases of '600px'
For example, in the RegistrationEmail.txt there is a conditional comment on line 627, The inline style="width:600px" would also need to be updated to 1200.
I did a find and replace on RegistrationEmail.txt so all cases of 600px should now be 1200px.
Please check and confirm.
Note: We are working on manually reset password 's Email Templates and will update you soon.
The narrow margin is eliminated; however, the email no longer adapts to the size of the window (see screenshot below), forcing the user to scroll from side-to-side to read the email.
Note the same problem doesn't exist with Gmail (or other web application email providers).
Thanks,
Morgan
Most versions of Outlook don't support fluid width email templates. It's generally recommended not to exceed 600px in width (the width the email template was previously) for this reason. The only solution would be to return the template to it's narrow margin in outlook while maintaining the 1200px responsive width in other email clients.
Other emails I receive from other providers have fluid email templates (see Basecamp example below). Can't we do something similar to that?
Morgan
We can attempt a fix by updating the outlook conditional comments to use fluid width but this is almost guaranteed to cause an issue in different versions of outlook.
This chart displays the versions that support the required style to make this happen: https://www.campaignmonitor.com/css/box-model/max-width/
With this change implemented, email clients that do not support max-width will not cap at 1200px and will instead always flow to 100% width.
Morgan