It’s very common requirement to have enterprise software to send out emails, which should be rendered within the application.
Usually this email is to have contact details of the recipient at the beginning as the content then probably continued with some domain related information, such as order details, status of a request or summary of a particular process. Also there could be number of emails will be send out from the system under different types of notifications.
During my consultation I have noted the developers have done quite a lot of work to render the emails based on custom templates. The common design which I have noted is to use inline CSS styling to hide the unappropriated content on the template. I see this option as a good one but also some serious issues around that.
Let me first list down the overall implementation of how usually this module are being developed. Later will be discussing on how to fix the functionally.
An Email template: The html file located under a define folder. This makes the possibility of updating the template content or styling of the emails externally without deployments. This template may also have place holder fields for the system to populate data and very importantly the section selection logic. Also some warping tags with CSS style like display:**displayKeyForSecion**.
An email rendering function: This code piece is used to load the template and inject the field data provided on to the place holder described earlier. So value for displayKeyForSecion should be ‘none’ or ‘block’.
Actually the issue is at the recipient end where the display:none part get ripped off by the email client application, this includes online email services such as gmail.
I have faced questions like, “How that html getting rendered it’s up to the recipient email client application, as the system generates valid html output for email, why do we need to rework this code to as suggested above?”.
I strongly suggest here that there have to be rework or fix for this issue, as it’s not about just creating ‘valid’ html and sending out from your end. It’s also developer’s responsibility to make sure the things get presented properly at the other end. Say if you have a condition placed on an email for “Congratulation, Your account is successfully created” and the other message as “Sorry, we are unable to create your account now”. The recipient will see both messages which are totally opposite in context.
I will be describing the good alternative way to fix this problem in my upcoming posts. Stay tuned.