How Old School Coding Helps with Emails
Most web developers nowadays use plugins, frameworks, CDN's, and more to develop a unique and interesting website. If you think back when those didn't exist, how did developers consistently use a grid system or keep everything aligned? The answer is tables. The reason why email coding today still follows the same basic HTML designs like table structures, inline styles, and attributes are because of the many regulations different webmail clients have.
The Basic Structure
The cornerstone for an HTML document is a good skeleton with each of the required elements. Below are the basic elements needed for a fool-proof HTML document. Each are described and shown below:
|
Element
|
Description
|
|---|---|
| <!DOCTYPE html> |
A declaration that defines this document to be HTML5 |
| <html> | The root element of an HTML page which encapsulates everything |
| <head> | Contains meta information about the document |
|
<title> |
Specifies a title for the document and window page |
| <body> | Contains the visible page content where you will be editing |
Notes:
- HTML tags normally come in pairs like <head> and </head>
- The first tag in a pair is the start tag, the second tag is the end tag
- The end tag is written like the start tag, but with a forward slash inserted before the tag name
<!DOCTYPE html>
<html>
<head>
<title>Critical Impact Coding</title>
</head>
<body>
[CONTENT]
</body>
</html>
This skeleton should be your boilerplate for any and all HTML coding. Now we can move on to filling in the body.
Table Manners
Table elements have their own skeleton as well which includes nested inner tags. It starts off with the outer tags and work their way into the content of each table cell. The easiest way to picture a table is to visualize an excel spreadsheet. For HTML tables you go inward to a cell by going to a specific row and then to a specific column. The definition of a row is defined through the <tr> tag and the definition of a column within a specific row (otherwise known as a cell) is defined through the <td> tag.
A better visualization of an HTML table is below:
<table style="border: 3px dotted green;"> <!-- Outer Table -->
<tbody>
<tr> <!-- Outer Row -->
<td> <!-- Outer Row First Cell -->
<table style="border: 1px solid red;"> <!-- Inner LEFT Table -->
<tbody>
<tr>
<td>
[LEFT CONTENT]
</td>
</tr>
</tbody>
</table>
</td>
<td> <!-- Outer Row Second Cell -->
<table style="border: 1px solid blue;"> <!-- Inner RIGHT Table -->
<tbody>
<tr>
<td>
[RIGHT CONTENT]
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
One of the most important concepts when coding in HTML, whether for a table or any other element, is not to forget the end tags. The good news is that the built in Critical Impact WYSIWYG editor automatically finds missing end tags and creates them. Another default setting for the editor is the tbody tag which basically encapsulates all the rows within the table. The tbody tag is a required element within tables.
Now that you've seen how tables are structured and where each content is found, you can use it to make stunning emails compatible with all webmail clients. The table structure allows you to make any design you choose. For example, when previously you would use div tags and marginal or other styling properties to align and set your content, now you can make an email-proof table with the desired rows and column setup. A table template to design development is shown below:
First we code up a basic table with a few rows and columns:
<table width="600" cellspacing="0" cellpadding="0" border="1" align="center">
<tbody>
<tr>
<td style="text-align:center" valign="top" align="left" colspan="2">Content1</td>
</tr>
<tr>
<td style="text-align:center" valign="top" align="left" colspan="2">Content2</td>
</tr>
<tr>
<td style="text-align:center" width="50%" valign="top" align="left">Content3</td>
<td style="text-align:center" width="50%" valign="top" align="left">Content4</td>
</tr>
</tbody>
</table>
Note that the table width is set to 600 pixels which is within standard range for an email. Also note that there are inline styles and some attributes added to the elements. This is shown to help illustrate the structure of the table as well as to highlight some of the common attributes used for tables within emails. (These include cellspacing, cellpadding, and border) Below is the rendering of the HTML followed by the same HTML code but with content filled in.
| Content1 | |
| Content2 | |
| Content3 | Content4 |
Inline your Design
Most, if not all developers today use CSS or some form of styling with their HTML. If you look at most HTML code, their CSS styles are either grouped within a style tag or linked to an external file. In order to make the styling within your emails consistent throughout all webmail clients, you must use inline styles and attributes. This is due to some webmail clients completely ignoring or stripping the header declaration of style tags.
There are a few attributes and inline style fields that are widely supported, and other styles that are not supported in all email clients. These fields are described below.
|
Attribute (Widely Supported)
|
Description
|
|---|---|
| border | Specifies the width of the border of an element |
|
bgcolor |
Specifies the background color of an element |
| cellpadding | Specifies the space, in pixels, between the cell wall and the cell content |
| cellspacing | Specifies the space, in pixels, between cells |
| align | Specifies the alignment according to surrounding elements |
| valign | Specifies the vertical alignment of the content in a cell |
| style | Specifies an inline style for an element |
|
Styling (Not Widely Supported)
|
Reasoning
|
Solution
|
|---|---|---|
| margin, margin-left, margin-right, margin-top, margin-bottom | Outlook webmail does not support this | Table structure, align attribute, and padding. |
| float | Outlook does not support this | Table structure and align attribute |
| Header Styling | Gmail does not support this | Inline styling |
Since there are different handling procedures for styling with CSS in HTML across webmail clients, if an attribute also has a inline styling pair, it is good to reiterate the declaration. For example if you were to give a background color to a cell within your table you could use the attribute bgcolor. To give a background color to an element there is also an inline style background-color that could be added. It's good practice to use both background color styles, as this only ensures that the background color will appear in any webmail client. The list of attributes and inline styles listed above are just a few out of the many that are available. If you wanted to give a certain font style or color to your text for example, you would use inline styling to ensure correctness. Styling on individual paragraphs or links work better if a span tag was added within the element. There will be certain cases where elements such as links or tags will have different displays or action results between webmail clients. If this is the case, then the best way to fix it is by understanding the compatibility between certain elements and if there are any wrappers to unify the content. The best way to test this is through the Critical Impact inbox preview test to preview the email on over 60 webmail clients and devices.
Below is an example of inline styling combined with attributes for a table element. We see that the width of the element is specified in order to be consistent among screen sizes. If you were going to make an email responsive across different devices, you could use a class which resizes the elements within the HTML or use the already responsive Drag and Drop Editor within Critical Impact.
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="background-color:#fff; padding-top:30px; padding-bottom:20px;" width="630"></table>
Here is an example of an H3 tag with a span element added for styling:
<h3><span style="color:#990099;"><font face="verdana, geneva, sans-serif"><b>Additional Sale Resources</b></font></span></h3>
Below is the combination of the two previous examples with some extra styling. This uses an outer table structure with two tables within just as we previously learned.
|
Get Coding
Coding HTML emails can get a little rough, but mastering tables and inline styling is key. When struggling with different appearances between webmail clients, always check to see whether the attributes or styling you are using is compatible across the board. If there are any styles that are not widely supported, try to find a replacement. Now that you've got the hang of creating a basic HTML email, you can begin to add images, buttons, icons, links, and more.
Comments
0 comments
Please sign in to leave a comment.