The Mail Signature: A Story

This is not a typical technical blog but really interesting incident happened with me.

Something interesting happened to me some days back. I was asked to create a template for emails that are email signatures for the organization. It will be added to every mail that is being sent automatically through our system or manually by marketing or sales teams.

I thought it would be so boring to work to do that I have been given a Figma file and I was asked to re-create it with HTML and CSS.

But the real problem arose when I completed my code and try to paste the HTML directly copying from the browser to the inside of an email. Because that’s what I was asked to do too. As soon as I copy the design from the browser and paste it into the Gmail editor, the style went crazy. Everything messed up. It was so irritating. I try to send dummy emails by using the same template and it was not working.

I went to some of my colleagues but nobody has an idea about what is going wrong. Then I decided to look at some of the templates available online and how they were built.

So, First I saw that everything in those templates is the image. Like a small part of the image and everything is combined and created a layout. I thought I got an idea and I will be doing the same.

I asked my graphic designer to send me images of every single part and then I put those images in a layout that I have to build with CSS and then I created the same thing again but this time nothing is text or other things .. but only images.

Off… I opened the mail and paste the HTML layout.. 😥😥 Nothing worked. I was exhausted. I have written the entire CSS again but it didn’t seem to be worked. Now, I thought it was time to ask some seniors. Unfortunately, my manager was working from home. And I don’t have the patience to slack him and wait for what would be his opinion. Although I know the conversation much last long as expected.. he said, “Vijay, you’ve to figure out yourself.”

I want someone to have conversations with me at that point and I knew that the solution must be pretty simple, but was my bad day. I see my CTO seating there. I went to him and told him the problem. He smiled at me and said, have you hosted the images somewhere? Like on the drive or somewhere which is required. I have of course done that. I said I put them on GitHub.
Then he asked me to look at the CSS part and informed me that in the case of the Mail template we should right, ‘inline css’. I was hopeless. Till this time I was writing CSS in a style tag and which was not working. I thought that I needed a conversation. But sometimes small conversation gives us great talk and we need to learn from their experience. And exactly at this moment, I thought, ‘inline CSS’ should save me.

And then I went to the desk and converted my entire CSS into inline CSS. I got the expected output, then I copied from rendered HTML and paste it on mail and it pasted correctly, but as soon as I click on the send button and when mail gets sent state, template layout gets mismatched and the receiver gets some random designed output. As I said, it was my bad day. I went to the marketing team.. explained to them the problem that we cannot copy the HTML layout directly from the browser and put that into the mail. And also requested them, to create a mail template using some mail template creator tools.

After spending some more time on style and CSS and researching more about templates then I saw one more thing. Mail templates that are created using HTML and CSS are not as we regularly code. It’s different. It won’t support modern CSS. And I was shocked. And when I did more research about it, I got to know, that we cannot, I repeat, we cannot use CSS flexbox while creating mail templates. I stopped for a moment to drink some water and then I recreated the entire template without flexbox and internal CSS. After rendering it on HTML and I copied it and then paste it into mail and it WORKED.

I confirmed once again, whether it is working or not. It was working. I send some emails and reconfirmed from the marketing team too. And it was working. The mail template is being copied as it is and it can be sent directly by mail. We can put the things in the mail signature too.

When I analyzed why it is so? Why mail templates don’t support flexbox and most modern styling tools? It’s because, the mail is not only limited to Gmail, some other service also uses the mail like Yahoo or outlook. Their definition of styling might be different. So, supporting modern stylings may conflict with proper mail content which is above the template and which is also more important than your footer or signature.

Another reason would be, that mail is specifically meant to text or something message form, where we sending stylish styling stuff is contradictory and those styling may affect on proper mail main subject.

So, I understand, that some things about creating mail templates and signatures using HTML and CSS are that.

1. Mostly using images will help you with a headache. Take care that those images are stored somewhere like, a drive or GitHub
2. Always use inline CSS. External or internal writing doesn’t help.
3. Don’t use modern CSS like flexbox, web kits, or grids(i am not sure about grids).
4. Try using semantic HTML and try creating all formatting and layout with HTML only, like by using tables and div.

The moral of this story is, that whenever you are in any problem, talking with someone is key to overcoming your previous thinking and coming up with a new idea. Doesn’t matter what you are talking about if you explain to them your problem they might not understand it but for you, it will be a second way to think about the same problem.

Thank you.

Connect with me on Twitter and LinkedIn for more exciting stories.