A Preface to Building and Sending an HTML Email for Web Developers

 

If you’ve been building websites for long enough to remember the glory days, you probably built your first websites using tables for layouts. Building HTML Emails today will take you back to those times, although with less use of the <hr> tag.

Email development and design is not so easy, as email client suppliers have not been nearly as progressive as web browser suppliers are in implementing new standards. This article gives some insight into building and sending emails.

If you are into web development, it’s likely that coding emails will be a job a job that you get asked to do at some stage in your career. Coding emails in HTML is however old-fashioned and harks n=back to the days when developers called themselves webmasters using tables, to make up a website.

Email design has not changed much, but has in fact gotten worse. As more mobiles and email clients are introduced, there are more limitations to deal with when having to build HTML emails.

Identify your target audience’s viewing habits:

The step in building a successful HTML email is to know how it will be read. If the subscribers are all going to be reading your email on their company Outlook email, this might point you toward using plain text. 

In most cases, there’ll be a mix of email clients in use, but there are a few ways to find out. Campaign Monitor publishes some overall statistics for email client usage that give a broad overview, with some limitations.

There is no guarantee that these reflect your audience, though. Campaign Monitor and a variety of other email service providers will give you a report for each campaign, listing the email client for each subscriber where available.

When you’re looking for in these reports is lowest common denominator. If you’ve never sent to this before, you might have to test in every client you can find, and make some educated guesses about the kind of audience with which you’re dealing.

Are they likely to be using their mobile phones to read email, or locked-down corporate servers? Whatever you know about your audience, make yourself some notes about what email clients you want to check most every time you send.

It’s worth remembering that over the past few years, the number of recipients reading email on their mobile phones have grown to 50% of the time. In some markets, more than the 70% of emails are read on mobile.

Making sure your emails are responsive will give a better client experience; especially on mobile consumption only continues to rise. 

Building HTML email templates:

Building email templates with Html is a schlep. This has resulted on poorly designed emails being sent out. These are themed, clunky, pointless, verbose and distracting. 

Building your own can however be rewarding and fun, providing you want a unique look and feel, and enjoy a challenge. The followings are to use good email templates from:

1.     Really Simple Responsive HTML Email Template

2.     Litmus Templates

3.     HTML Emails Templates

4.     Postcards Email Builder

Lean on tables—and not just for data:

The most important guidance for HTML emails is the CSS layout just doesn’t alone work. The major email clients either offer no support at all, or mangle it in a state of frustratingly different ways.

Using CSS instead of tables was the battle cry of web standards war, but coding HTML emails means raising the white flag and giving in. Unless you’re building an extremely simple email, or your whole audience is using a more modern email reading tool, it’s back to those all compassing <table> tags.

Gmail, Outlook, Lotus Notes, and no doubt many more all have big issues floated elements, and are even wildly unreliable with margins and padding. We want to set up some structural HTML tables to make sure that we end up with an email that at least holds together well.

Best ways to create HTML emails:

There are some aspects that one should consider when building HTML email templates. Let’s take a look at some of them:

Use simple design: Simplicity always shows the best of you. The web developers are recommended to keep the email design simple and sober. Apply grid-based layers and stay away from elements which include positioning or HTML floats.

Adjust HTML emails to different screen sizes: With many different screens are available for the users in the market, one can see that it is crucial for an email template to display well not only on desktop but also on tablet and smartphones.

To succeed with this task, one can try using scalable, fluid, or responsive design. So let’s dive a bit deeper into each type of design to choose the one which will suit your requirements best.

·    Scalable HTML design: This type of design presumes the presence of a minimum number of structural elements in an email. It usually consists of one text column that can easily scale for all types of device, one image, and a Call to Action (CTA) Button.

·     Fluid HTML design: This design uses percentages to adjust to a recipient’s screen size by filling up all spaces in an email just like fluid would do in an empty container. However, to make sure an email’s content does not cover all the available screen area, it is recommended to configure the table’s maximum width.

·     Responsive HTML design: It allows spending customized HTML email templates that may automatically adjust not only the size but also content depending upon a recipient’s device and screen size. The desktop and mobile version of an email may differ significantly from each other or may be all alike.

Media Queries that have been introduced in CSS # empower responsive design. The top email clients are well aware of what media queries are. However, it is worth keeping in mind that there are still email clients that won’t succeed with their rendering as well.

Remember about mobile users: Working with HTML email design one      should remember the golden rule- mobile design goes first. i.e., a mobile version is checked first to decrease the loading time on small devices. The first condition may be set as “larger than 765 pixels”.

Choose the right fonts: Many email clients won’t be able to render Google Fonts properly. In this case, one should opt for the common fonts that are major email clients interpret as well. Such as Times New Roman, Arial, Georgia, and Verdana.

Take images and email size seriously: Some email clients block images by default, where users may amend their inbox settings and block images as well. Keep in mind the email size. The maximum file size limits for emails are pretty high, but the recommended size of the email body should not exceed 250KB.

HTML Email testing:

Before sending out an HTML email campaign, it is worth checking whether your emails get delivered to recipients, as well as getting some email rendering device. The weird feeling after hitting send and then spotting a typo in the very first heading is terrible. And the bigger the list, the bugger the pit in your stomach.

Once an email has been sent out, it’s impossible to take it back. A website can be updated in a moment, but emails live out their separate lives in a million different inboxes, beyond reach. 

There are quite a few methods and elements to test. Obviously, you’ll have all the copy proofed and rechecked by another person. When it comes to testing, it can be more time consuming.

Each service will take your HTML email and give you back a series of screenshots showing how your email renders in a number of different email clients. You can typically scroll through the whole email, see it with images blocked or images loaded, and gain a fairly good idea if there’s a problem you need to fix.

This process can be quite a long one. But once you’ve gone through robust troubleshooting for your template, it can be reused over and over for future campaigns, and often adapted to suit multiple designs. So the time will be well spent.

Written by – Sakshi Chauhan

Edited by - Umme Amara Shaikh