how to create a simple html email for email marketing

Html email is a very powerful marketing tool. Visuals are always better than text in conveying your message across more effectively. Creating html emails can be very tricky since it has to fit in many email clients. In this tutorial, we'll be creating a simple html email fits in many email clients.

Prerequisite

Basic knowledge of html and css is required to understand the concept in this tutorial.

Intro

When creating html it is advisable to use inline styling for styling html tags and avoid media queries since most email clients do not recognize them. Our html email consist of four parts :

• The Header
• The Banner
• The Text Content
• The Footer

We will look at them one after the other.

Header

<div
  style="max-width:500px; margin: 0 auto; margin-top:15px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#cfecec;"
>
  <div style="width:95%; margin: 0 auto; text-align:center;padding:15px;">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/naishare.appspot.com/o/Sat%20Mar%2014%202020%2015%3A46%3A33%20GMT%2B0100%20(West%20Africa%20Standard%20Time)logo.png?alt=media&token=ec5b6ade-dacf-4919-a77d-d4639b8e9da6"
    />
  </div>
</div>

The header of our email contains the logo and it spans to a max-width of 500px. The width has been carefully chosen to make it fit all screens, if the width is too large it might look scruffy on a mobile device. The styles have also been applied inline to make it compatible with various email clients.

Banner

<div style="max-width:500px; margin: 0 auto;">
  <img
    src="https://firebasestorage.googleapis.com/v0/b/naishare.appspot.com/o/Sat%20Mar%2014%202020%2017%3A47%3A38%20GMT%2B0100%20(West%20Africa%20Standard%20Time)banner2.png?alt=media&token=88325bf4-5bb3-49f2-956c-02ed5cc151f2"
    width="100%"
  />
</div>

The banner is just an image wrapped in div. It also spans to a max-width of 500px just like the header. All images must be uploaded to an online server before it can be used.

Text Content

<div
  style="max-width:500px; margin: 0 auto; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#eeeeee;"
>
  <div style="width:92%; margin: 0 auto; text-align:center;padding:15px 0;">
    <p style="text-align:justify">
      Hi I am a Creative Freelance Web Designer, UI/UX Designer and JavaScript
      Developer. I am insanely passionate about designing beautiful, intuitive
      and functional Websites.
    </p>
  </div>
</div>

The text content section also spans to a max-width of 500px. The p tag is wrapped in a double-layered div to make the left and right padding dynamic on different screen size.

Footer

<div
  style="max-width:500px; margin: 0 auto; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#c7c7c7;"
>
  <div style="width:95%; margin: 0 auto; text-align:center;padding:15px;">
    <center>
      <span>
        <a href="https://web.facebook.com/Naishare-Technology-107149914203124"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/facebook.png?alt=media&token=cb49d08e-9114-4613-bf7a-e9263ee8fcb8"
            width="25px"
        /></a>
      </span>
      <span>
        <a href="https://www.instagram.com/naisharetechnology/"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/twitter.png?alt=media&token=c9e7f455-c7ab-452e-892f-51f1d7bf4af1"
            width="25px"
        /></a>
      </span>
      <span>
        <a href="https://twitter.com/NaishareT"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/instagram.png?alt=media&token=c02a91ff-e6c3-4e6e-95cc-99729247d638"
            width="25px"
        /></a>
      </span>
    </center>
  </div>
</div>

The footer is the final section and it contains the social media icons. You may choose to also add you address and other contact details in this section.

The Complete Html Email

<div
  style="max-width:500px; margin: 0 auto; margin-top:15px; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#cfecec;"
>
  <div style="width:95%; margin: 0 auto; text-align:center;padding:15px;">
    <img
      src="https://firebasestorage.googleapis.com/v0/b/naishare.appspot.com/o/Sat%20Mar%2014%202020%2015%3A46%3A33%20GMT%2B0100%20(West%20Africa%20Standard%20Time)logo.png?alt=media&token=ec5b6ade-dacf-4919-a77d-d4639b8e9da6"
    />
  </div>
</div>

<div style="max-width:500px; margin: 0 auto;">
  <img
    src="https://firebasestorage.googleapis.com/v0/b/naishare.appspot.com/o/Sat%20Mar%2014%202020%2017%3A47%3A38%20GMT%2B0100%20(West%20Africa%20Standard%20Time)banner2.png?alt=media&token=88325bf4-5bb3-49f2-956c-02ed5cc151f2"
    width="100%"
  />
</div>

<div
  style="max-width:500px; margin: 0 auto; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#eeeeee;"
>
  <div style="width:92%; margin: 0 auto; text-align:center;padding:15px 0;">
    <p style="text-align:justify">
      Hi I am a Creative Freelance Web Designer, UI/UX Designer and JavaScript
      Developer. I am insanely passionate about designing beautiful, intuitive
      and functional Websites.
    </p>
  </div>
</div>

<div
  style="max-width:500px; margin: 0 auto; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; background:#c7c7c7;"
>
  <div style="width:95%; margin: 0 auto; text-align:center;padding:15px;">
    <center>
      <span>
        <a href="https://web.facebook.com/Naishare-Technology-107149914203124"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/facebook.png?alt=media&token=cb49d08e-9114-4613-bf7a-e9263ee8fcb8"
            width="25px"
        /></a>
      </span>
      <span>
        <a href="https://www.instagram.com/naisharetechnology/"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/twitter.png?alt=media&token=c9e7f455-c7ab-452e-892f-51f1d7bf4af1"
            width="25px"
        /></a>
      </span>
      <span>
        <a href="https://twitter.com/NaishareT"
          ><img
            src="https://firebasestorage.googleapis.com/v0/b/grocenda-440a1.appspot.com/o/instagram.png?alt=media&token=c02a91ff-e6c3-4e6e-95cc-99729247d638"
            width="25px"
        /></a>
      </span>
    </center>
  </div>
</div>

Conclusion

Creating Html Emails can be pretty easy if you can create html content that fit all screens without media queries. We will also be creating a tutorial on how to send html emails soon.