Kevin George — August 1, 2017 — August 1, 2017
Tumisu / Pixabay
Email design and coding is a critical task with different email clients rendering emails differently. Creating the right design and coding it the right way is a challenging chore for developers. Adding space in your HTML emails that render well across all email clients is a difficult thing to do as there is no standard method to do it. What works for one email client, device, browser or screen size may not work for another.
Email developers are always trying to find out solutions and apply their own tricks while adding proper email spacing in HTML emails. Let us take a look at the popular techniques used by developers.
1. Using the Cellpadding Attribute
The cellpadding attribute can be used to create spacing between the cell wall and cell content. It specifies the space in pixels and is used with tables in HTML. This function is widely supported across all email clients.
It can be used in the HTML code as cellpadding=”value”.
Since it is an HTML attribute and not a CSS code, it lacks the ability to override it unlike overriding CSS codes with media queries. This attribute can be used when there is no need to alter the cellpadding for different devices or email clients.
2. Padding in <style>
The padding attribute is widely used in web development. The advantage of using this attribute in HTML email development is its ability to override in the head of the email. With this technique, media queries can be used to switch a 60-pixel padding for desktop to a 20-pixel padding on mobile.
It can be used as style=”padding:valuepx;”.
This method can be used whenever you need dynamic padding and spacing for your emails. When it comes to adding spacing, this is considered to be the most simple and effective method.
3. Empty <tds>
The empty <tds> cells can be used to add spacing around the content. This is generally used to force height between table cells. This method is very rarely used as it doesn’t always work and you need to write an entire table structure for the code. Moreover, these codes do not work when you need to code mobile optimized emails; you need to make new classes to control the height and width of these cells.
4. Margin in <style>
Margin attribute is widely used in web development but is not preferred in email development. While the padding attribute adds padding inside the border, the margin attribute adds padding outside the border.
Margin can be used as style=”margin:valuepx;”.
5. Line Breaks
Using the <br> tag is the simplest way to add space in the email content when coded using HTML. This method can be used only to create spacing between the texts in the copy of an email and hence it is not used much.
<br> tag can be used before and after the content.
Email clients render line breaks differently, and hence, it is difficult to have a pixel-perfect spacing in your email with line breaks.
Email developers use these techniques according to the type of email they are developing. You can consider experimenting with them and determine what works best for your email campaign. And don’t forget to test them for various email clients and screen sizes.
Did we miss something here? Do let us know what method you use to add spacing in your emails.
Digital & Social Articles on Business 2 Community
(104)
