How to Format Email Code and Improve Efficiency

It may be true that so-called spaghetti code works, but it’s just not sustainable in the long run. Properly formatting email code will help make your development process a lot smoother.

Solid code that’s easy for you and others to understand and edit is an important part of email development.

When developing email code, there’re many things to consider. First, start with a solid code foundation, which will display your email correctly on different devices and email clients. And, of course, email testing with a tool like Email on Acid is another crucial step.

Let’s discuss how to properly format your code and some best practices to follow.

Proper formatting makes books and blogs easy to read. The same goes for your HTML code.

Email clients will do pretty much whatever they want with your code when your campaign arrives at the inbox. The reason your format email code is to make your job a little easier. However, it’s also important to minify email code, which gets rid of the extra stuff, reducing the email’s size and avoiding bloat.

Here are three benefits of properly formatting your email code:

1. Increase readability to easily debug code.
2. Add or remove sections with ease.
3. Streamline your team’s workflow.

Let’s dive into each of these below.

When you use a consistent code format, it increases your code’s readability and lets you debug errors in the code efficiently. For example, if you spot a mistake while testing your email, you can go back and find the bug in your code easily. If you haven’t formatted the code correctly, it will take longer to sift through the HTML and find the bug.

See the code below. Can you spot the two mistakes? Which is easier to debug?

Example one:

                            

                                <table cellspacing="0" cellpadding="0" border="0" role="presentation">
	<tr>
		<td align="left" style="font-size:18px;color:#333333; font-family: sans-serif;">
			<p style="font-size:18px;color: #333333; font-family: sans-serif;">
				Sample text here.
				</h2>
	</tr>
</table>
                            
                        

Example two:

                            

                                <table cellspacing="0" cellpadding="0" border="0" role="presentation"><tr><td align="left" style="font-size:18px;color:#333333; font-family: sans-serif;"><p style="font-size:18px;color: #333333; font-family: sans-serif;">Sample text here.</h2></tr></table>
                            
                        

The first example’s formatted properly. See how nice and easy it’s to read? The errors to spot are the misplaced </h2> and the missing </td>.

When you’re creating emails from scratch, you’ll probably find yourself re-using elements across multiple emails. When emails have properly formatted source code, you can easily scan the email and copy sections for other emails.

Formatting code’s essential when you’re working as part of a development team. If everyone on the team is using the same code format, developers will be able to easily jump in and out of it.

Now that we know why it’s crucial to format HTML code properly, here are some best practices to get you started.

1. Add consistency.
2. Indent your code.
3. Use comments, but not too many.
4. Use character encoding.
5. Stick to inline CSS.

Email developers and web developers each have a unique way of writing their code. But, one of the most important parts of writing code is consistency, which means coding in a uniform style across all emails.

Code in a clean, uniform way to make your work recognizable but also easy to understand.

Indenting code is the first and most important step to creating a beautifully formatted HTML email. Look at the example below – it shows how even a simple table structure can look daunting without indentation.

                            

                                <table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td>
<h1>
Newsletter edition one.
</h1>
</td>
</tr>
<tr>
<td height="20">
 
</td>
</tr>
<tr>
<td>
<p>
In this edition we cover why it's so important to format your code properly
</p>
</td>
</tr>
</table>
                            
                        

The same code example with proper indentation looks a lot more approachable as a code block.

                            

                                <table cellpadding="0" cellspacing="0" border="0" role="presentation">
    <tr>
        <td>
            <h1>Newsletter edition one.</h1>
        </td>
    </tr>
    <tr>
        <td height="20">
             
        </td>
    </tr>
    <tr>
        <td>
            <p>In this edition we cover why it's so important to format your code properly</p>
        </td>
    </tr>
</table>
                            
                        

Another development style decision is what size to make the indentation, which comes down to personal preference. Our advice is to do what works for you, but remember: consistency is key.

Many code editors including our Email Editor will automatically indent code, making your code beautiful and easy to read every time.

It’s generally safe to use comments in your code. They help you remember the purpose for specific bits of code and can also mark the end of sections. But, there’re a few things to consider.

• Be aware that CSS comments can cause things to break in Gmail. So be sure to test and preview if you don’t remove them before hitting send.
  
• If you include too many comments in the code, it can drive up the file size. But minifying email code should remove comments.
  
• Gmail will clip messages that exceed 102KB in file size.

Another consideration is that your code isn’t hidden; anyone can access it with just a few clicks. Keep this in mind when writing your code, and make sure your comments won’t offend anyone.

Character encoding allows certain special characters to render correctly in your rich text email. If you’re not sure where to start, check out our guide on character encoding and our character converter. 

CSS enables you to add formatting and styles to your HTML code. But mailbox providers treat CSS differently than web browsers. While there are mailbox providers that support adding CSS styles to the <head>, you are safest sticking to inline styles.

It’s a good practice to format your code by using inline CSS instead of embedding your CSS in the <head> of your email or through a separate style sheet. Inlining your CSS ensures it will render properly.

There are some email developers who do both. They place CSS styles in the <head> as well as inline. The main reason we need to use inline styles is Outlook for Windows.

If you’re starting with a solid code foundation and proper formatting, you’re on your way to a great email. But, testing that email is still a crucial step – even the slightest code change can affect how your email displays.

With Email on Acid, you can test your code across more than 70 clients and devices, so you can have the confidence that you’ll be sending a beautiful email every time. Try us out for free for seven days.