A 70kft Development How-To

Five Steps to Building an HTML Email

Industry , Email Marketing

Building an HTML email marketing campaign info graphic by Dallas Integrated Marketing Agency 70kft

An HTML email may appear simple, but don’t be fooled by what you see in your inbox. The process of building an HTML email is actually similar to building a landing page or a single-page website. Now, what makes this process challenging is the fact that you are forced to build the page as if you were developing it back in 2006. The majority of email platforms/providers do not support HTML5 elements or CSS3, which remains the standard for today’s mobile-ready interactive communications. 70kft experts are building the most conversion optimized and responsive email campaigns. The HTML email building process directly coincides with digital marketing, particularly in its development stage, which is explained in Digital Marketing Director Danny Oncina’s blog: Successful Campaigns &  Conversion Optimization. The following HTML guidelines and procedures are designed to make this practice both seamless and efficient.

Designing an Email:

1) Design an email with a width of 600px.

This rule is crucial to ensure your email fits almost every client’s view box. Although some clients, such as MailChimp, suggest 800px, emails of this width run into trouble in Yahoo! Mail. Yahoo! sets its own standard and 600px is the magic number - at least until Yahoo! decides to accept wider emails.

2) Design a modularized email.

If you are a programmer like myself, you may realize you basically put the pieces together using tables. Keep in mind, a well-organized layout design can make the coding job much easier and less risky during testing time. Our methods follow conversion optimization best practices.

3) Design an email that is brief and includes highlights.

In most cases an HTML email is distributed for business and marketing purposes. Trust me, your target audience will not be thrilled reading a verbose and dull product or service description. It takes effort to broadcast the brief idea and highlight the emphasis to lead readers to the next action – a link click, a phone call, submitting a form, etc. Make your email marketing campaign interactive. Don’t let your viewers merely read your email.

4) Design an email that shines.

Adding some shining points to the email design will encourage your audience to keep and forward the email. Pictures and animations will do the trick. Remember an HTML5 SVG or canvas is not accepted by all email platforms, but using a .gif file will be a safe option. Always ensure the first frame of the .gif is friendly. If not, many email providers will not go the extra step to ensure the animation is visible.

5) Design a responsive email.

65 percent of all emails are opened first on a mobile device. With that said, you must seriously consider how your email will appear on a phone and tablet. Here are some quick tips to enhance your mobile HTML email:

  • Increase font size
  • Use wider buttons instead of small links
  • Put important contact or link information at the top to prevent it from being missed if readers are too lazy to scroll

Whether the email is responsive or just well-designed, it should always be mobile friendly. It’s now essential to treat mobile email equally to desktop.

Design a responsive HTML emailBuilding a responsive HTML email

Choose an Email Marketing Service:

There are many email marketing services to choose from nowadays that can provide the following services:

1) Email template creation

Default templates may be bundled with your service and can be slightly modified or customized by switching the blocks, changing the background color and images. For a fee, you can also sign up for a custom template design. These features can help you create emails if you’d rather not design or develop your own. Otherwise, you can use this service to host your own templates and images.

2) Contact management

Content management is essential, especailly if you are targeting a large audience. Email marketing services allow you to import contact lists, unsubscribe contacts, add subscribe filters.

3) Email sending

This service is used to create email campaigns, focusing specifically on the template’s sending lists. Some email marketing services also provide code checking and spam testing.

4) Email tracking and analysis

Just because the email is sent does not mean the job is complete! Tracking the open rate, forwarded rate, bounce rate, click-thru rate and unsubscribed contacts are needed to help analyze the data and manage your brand marketing strategy.

Template Coding:

Now pretend you have traveled back to 2006, when there was no sign of HTML5 or CSS3. Do you recall that feeling when you tested your website for the first time in IE 8? You will have similar feelings in Outlook 2003 and Outlook 2007 when developing email. Realistically, Outlook is still being used by the majority of business professionals. In May 2014, it was reported that 12 percent of users are using Outlook (Desktop) while five percent go through outlook.com So instead of tinkering at the edges, let’s develop an email bringing Outlook into the picture at the beginning of your email marketing campaign.

1) Using inline

Many email clients, such as Gmail, do not support external CSS links or CSS in <style> tags. To guarantee your email performs correctly on any email platform, the first coding habit you need to change is to coding CSS inline. Keep in mind, there are still some great tools allow you to code the email as a regular website and inline the CSS styles (http://premailer.dialect.ca/).

2) Build an email using <table> tags

The <div> tag would all show as one column in outlook2007. In order to keep the email in the correct layout, building it with tables is a better option.

3) Web Font

Simply just don’t use it. Most email clients other than Apple email despise this. If you need to use a web font for brand marketing purposes, you may cut it as an image. There are still ways to use web fonts if you're in the market to target Apple mail users (http://www.campaignmonitor.com/resources/will-it-work/webfonts/).

4) Padding vs. Margin

Just like margin doesn’t function on IE compatibility mode, Outlook 2003 is not a big fan of margin either. In this instance, it’s a better to use padding for positioning the elements if necessary, but always a good idea to use it on mobile email, this way Outlook desktop doesn’t ignore it.

5) Image styling

It’s best practice to wrap the image into individual table cells. It will fix any headache you might encounter while styling an image.

  • Width: Even when you set the width to the image, it still stretches in Outlook 2003, the quick fix is to set the same width on the table.
  • Center: As you may know, margin doesn’t work so well for Outlook, meaning you cannot center an image by “margin: 0 auto;.” Wrapping the images inside the table will help here, you can center the wrapper table using <center>…</center> for Outlook.
  • Image gap: During this phase, you may find the need to cut the images into different parts and place them together as a complete image. You probably will detect some gaps between them on windows mail. Adding “display: block;” to the images is key
  • Images not loading: Many email clients block the images from downloading until the reader agrees. Making your email marketing campaign look good without images is necessary, especially if your marketing messages are placed in forms of images due to web font issues. If you want these important messages to show up, don’t forget to add Alt text, and make it meaningful. You may also style the alt text and image background.
  • How to style you HTML emailFix the design on your HTML email

6) Responsive

Some email marketing services such as MailChimp provide responsive default templates. There are other great frameworks out there as well (http://zurb.com/ink/). Keep in mind, Outlook is never friendly with responsive emails and the Gmail app doesn’t support media queries.

Testing:

Testing your email marketing campaign is the most time consuming part in the whole process. If it’s your first time building an HTML email, leave yourself twice the time of development for testing. There are several testing providers such as Email on Acid, Litmus etc. These allow the user to upload templates and test across all platforms. At 70kft integrated Marketing Agency, it’s best practice to conduct a test phase by sending out real emails. If you start with addressing the email on Outlook 2003 first, the majority of difficult issues will disappear. Don’t forget to make it perfect on Outlook’s older versions.

Deployment:

At this time, all the components should have been combined into a campaign. You and your digital marketing team should consider your subject line, sending time, and a testing phase as necessary aspects before completion. 

1) Subject Line

No matter how savvy your email looks, your target audience will not get the opportunity to see your masterpiece unless they actually open the email. Your subject line must be attractive enough to grab the audience’s attention and entice them to physically open your email. Be mindful of specific wording and phrasing, the mix of your content and sending IP address, these factors may cause the email to go directly to spam.

2) Sending Time

The most common mistake encountered is timing. Timing is crucial since the sending day and time is directly related to the open rate of your email marketing campaign. Consider who your audience is and what time they usually check their mailbox.

3) Always Test

Remember to send yourself a copy at the time of deployment. Even if your email passes all the tests and looks great, there may be something wrong at deployment time.

This is how you build an amazing HTML email campaign template for deployment. Each email marketing campaign is unique and requires a plethora of time to ensure the highest quality and prime audience reach. That is why 70kft works with its integrated team of web developers, graphic designers and digital marketers to deliver the best product through and through.

comments powered by Disqus