Article

12 Essential tools for HTML email development

Adam Schlitt

3 minute read

In the ever-changing world of HTML email development it’s important to keep abreast of the incredibly valuable tools and resources available to you. Trendline Interactive has compiled a list of 12 essential tools to ensure you create the highest calibre emails for you and your clients. The right tool at the right place in your development process will save you from wasting time and energy.

The tools listed below (websites, browser add-ons, text editor add-ons, applications, and more) are used by our team of developers regularly, and ones that will ensure the emails that you are sending are the best they can be. Whether you work with large scale enterprise accounts, or smaller scale send, these tools will optimize your efforts.

Just like a highly-skilled carpenter has their preferred tools in their toolbox, so too should a developer have their own toolbox when it comes to email development. 

Text Editor and Packages

Using a code editor that you are comfortable and efficient with is key. Be sure to check out add-ons, themes and updates to stay at the top of your game. Everyone has different preferences and settings, don’t be afraid to try new things out. A couple of code editors worth noting are:

Some add-ons to keep in mind are:

  • Minifyer
  • Beautifier
  • Color Highlight
  • Image Preview

Browser Add-ons

Litmus Scope

Helps pull code from Gmail to help debug any potential issues for Gmail Desktop. 

Accessibility Checker
AODA now requires you to keep certain standards, and it is very important to keep up with these standards.

Password Manager/Protector

Security is extremely important. You need a way to share passwords and protect them. They can often be passwords that protect client information. This can also come in the form of an Application(KeyPass or MacPass)

Ruler

Page Ruler is for measuring objects on web pages. Measuring its width and height in pixels. A popular app for measuring elements on web pages. 

Color Picker/Eyedropper

A zoomed eyedropper & color chooser tool that allows you to select color values from web pages and more.

UI vision

Automating browser interaction. For automating tasks such as form entry, record lookup, page testing, etc.

Graphics and Creative Development

Photoshop/Image Editor

https://www.sketch.com/

Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoffs.

https://www.adobe.com/ca/products/photoshop.html
You often need to cut or adjust some images with white space, for background images, resizing, and shrinking down the file size. Having an image editor saves on back and forth handoffs between teams. 

Code Testing

Diff Checker 

https://www.diffchecker.com/diff 

Sometimes when code is updated, it can break in other areas, so having a diff checker can be very helpful to see where the changes were made/what’s causing the issue. 

Compatibility Checker

https://www.caniemail.com/
See if your code is going to work across all environments or if you will need fallbacks before you get started. 

Tag Checker

http://jonaquino.blogspot.com/2013/05/unclosed-tag-finder.html 

Tag checkers, much like validators, are important to help keep best practices up and code clean. A missing tag can often be a culprit for issues with Outlook and other potential issues. 

Validators
https://validator.w3.org/ , https://www.freeformatter.com/html-validator.html
Making sure you have no errors in your code saves a lot of hassle in the long run. Small things like, CSS cannot start with numbers for example can end up ruining your emails display. HTML, CSS and JS(for landing pages) are ideal to have at your fingertips.

Code Formatting

HTML Formatter 

https://beautifytools.com/html-beautifier.php 

Often when you pull code from platforms, the formatting is off and you need to make it readable and usable.

Email Render Checking

Render Checker

https://www.emailonacid.com/ , https://www.litmus.com/ 

When developing emails, you need to worry about many environments/screen sizes and will need a way to view them, especially when debugging issues. Email on Acid or Litmus are among the most popular and offer up to 65 different email clients and mobile devices. 

PutsMail

https://putsmail.com/ 

If you do not have access to the Platform to send tests PutsMail can be a huge help to send tests to your Render Checking Tests or your personal email/device.

Vital Learning

Clean Code Book

https://enos.itcollege.ee/~jpoial/oop/naited/Clean%20Code.pdf 

This book helps explain why following best practices and naming conventions for consistency is so important. This is a critical read for your entire team and will support consistency among the members, as well as from client to client.

Finding Special Characters

AmpWhat

http://www.amp-what.com/ 

Thousands of common characters to be used in HTML. Some email clients don’t read the character and need to be encoded. Lots of everyday use characters, along with some fun stuff as well. 

Emojipedia

https://emojipedia.org/ 

Great for picking emoji in subject lines. Be sure to test across devices as support for each can vary.

It is important to be comfortable in the environment you work in, and to keep in mind that what might work for a fellow developer that recommends a tool, may not work for you and your individual circumstances. Test out a variety of tools to find the ones that best suit you. Are there any tools you would add to this list? Let us know!

Trendline Interactive

Ready to send better messages?

About the Author(s)

Adam Schlitt

Let's Take This to the Inbox

Sign up for our news, resources and updates. The inbox is our favorite place after all. We’ll make sure it’s worth it. (You can unsubscribe at any time, but you probably already knew that.)