Skip to main content

Points to keep in mind while developing Email Templates

I have come to know that in frontend development Email Template designing is a kind of headache for those who don't know how to code the HTML perfectly. There are many things to keep in mind if you're designing an Email template, from the basic difference between a static webpage and an email template or how will email service providers render your template.

So, here are the points you must keep in mind:

1. Use Table instead of div

Most of the email clients are not supporting the div structure on top of the body, the render engine mishandles your style. Instead of that, you must use the table tag, which should be the first element in the body.  So, dived your classic div structured into rows and columns for the email. For the best-case scenario, use one column UI.

2. Use inline-css

Outlook, Gmail and Yahoo remove your HTML & head tag to resolve the conflict between their own tags. So, if you are using external css or internal css then it will be excluded, to overcome this you must specify inline-css or style in tags.

3. Do not use float and position 

Most of the email clients neglect the float and position styles. Instead of using float/position use margin/padding inside the table's td tag.

4. Keep everything within 600px wide

This will help you make a similar UI for mobile and desktops and free your users from horizontal scrolling.

5. Avoid using border/outline

Some of the email clients like Outlook does not support the border/outline.

6. Do not use border-radius

Border-radius property works fine with Gmail or Yahoo but it'll not work at all in Outlook. (Outlook kind of a jerk in email template designing).

7. Avoid images or use alter the text

Most of the email clients blocks images by default. You can use alter text with images. If you are using alter text then be sure you add the size for the image so that email clients do not override the space.

8. Use inbuilt fonts

Use HTML inbuilt fonts like Arial, Verdana, Georgia, Sans Serif and Times New Roman because not every email clients have the custom font-family.

9. Avoid animations and javascript

Sometimes the animations or javascript cannot load properly or blocked by email clients. Use GIFs instead of animations.

10. Keep CSS, simple

Avoid compound style declarations (i.e.: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (i.e.: #000 instead of #000000), CSS layout properties (i.e.: slot, position, clear, visibility, etc.), complex selectors (i.e.: descendant, child or sibling selectors, and pseudo-elements)

11. Avoid body attributes

You may encounter email clients that don't pay attention to body attributes, which means all your hard work is for naught. Instead of that apply the attribute or style to the leading table.

12. Use Absolute Image Paths

Do not use a relative path for images/gifs, the better option is to use URL.

13. make mobile-friendly

To make your email template mobile-friendly, use media queries to make it look pretty. Also, use twice a large size images so the image can be equally crispy as mobile/desktop.

14. Conditional targeting

If you need to make use of elements that we know is not supported by Outlook, make use of conditional targeting and VML to show or hide elements.

15. Annoying paragraph tags

You will notice that Outlook will give much space for the p tags and vice versa for Yahoo. That's because they use different email renderer and it will give paragraphs default margins.

So, That's all for now. If you find an important point or stuck somewhere just reach me in the comment section.

Edit: Recently I was surfing around the web and find out this If you want you can use this instead of taking care of these points.


  1. Your blog contains lots of valuable data.frontend development agency It is a factual and beneficial article for us. Thankful to you for sharing an article like this.

  2. it was a wonderful chance to visit this kind of site and I am happy to know. thank you so much for giving us a chance to have this opportunity.. Email templates google workspace

  3. Connect your email to google sheets Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.

    1. I found this amazing tool - which lets me create email template so much easily and take care of edge cases for multi browser.


Post a Comment

Popular posts from this blog

Live Game Streaming on YouTube

Hello Guys, Today I gonna talk about how to stream your mobile gameplay to YouTube Gaming. Nowadays, PUBG (PlayerUnknown's BattleGround) is the most trending mobile game. Many Pro players upload/stream their gameplay to YouTube and earn money through monetization. Ok. Let's start. First of all Download YouTube Gaming App. After download, open the app and create/choose your google account for your YouTube channel. If you're a new user then you have to wait for 24 hours until you stream your gameplay (YouTube need to activate your account). Now Just click on the first icon(streaming icon) on the top left corner and this screen will appear: Click Next and select Stream if you want to live stream your gameplay or Record if you want to save the video to your phone and upload it later. Select the video format you want to upload/stream. Click next, you'll see a tips screen, read it and click next. Now, Select the game you want to stream or record. Add the st

Dynamic Form and Grid with C# in WPF

Ever wanted to generate the form & grid dynamically and add data from some data source? Here's to help you. Create a WPF project in Visual Studio. Add a UserControl and name it mainUserControl.xaml Now add a stackpanel just like this : <UserControl x:Class="TestApp.mainUserControl" xmlns="" xmlns:x="" xmlns:mc="" xmlns:d="" xmlns:local="clr-namespace:SaiData.TestApp" mc:Ignorable="d" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="5*"/> <ColumnDefinition Width="43*"/> </Grid.ColumnDefinitions>

Automate Build & Deploy React production build with gitlab-ci to Linux base server (AWS)

Right now as everyone wanting to automate literaly everything, this post will show you how you can automate the react build and deployment. I am using create-react-app getting started with react and assuming you have a similar setup. Setup .gitlab-yml file for gitlab auto deploy Here's the whole .gitlab-yml file that you can copy directly to root of your project. Breaking each line: image: node : 10 cache:   paths: - node_modules / This line define the node version that should be used by the docker instance of shared gitlab-runner and the path defines to cache the node_modules dir. before_script: - apt - get update - qq & & apt install - y openssh - client openssh - server - mkdir - p ~ / . ssh - echo - e " $SSH_PRIVATE_KEY " > ~ / deploy . pem - chmod 400 ~ / deploy . pem - '[[ -f /.dockerenv