The second step was to build out everything that should go inside this outer table:
Next, I built the table that holds the bulleted list, being sure to follow the first step of constructing the skeleton before populating it with content:
The primary reason for this style of building is to increase code base organization and reduce the amount of time spent troubleshooting. Remember, all open tags must be closed at some point in the code base. It only takes one missed tag to break an entire table. Keep in mind that a complicated build may have multiple nested tables constructed over enough lines of code that it becomes borderline impossible to keep track of which tags need to be closed when. Working outside in is a simple way to make sure that doesn’t happen.
What?! No lists?!
There is a reason why the bulleted list is built into its own table: Ordered and unordered lists will not render in most email clients. That means designers can’t rely on the easy-to-use ol, ul and li tags. Each text bullet point needs its own data cell and each corresponding text item needs its own data cell.
A forced non-reliance on usually standard HTML and CSS elements is the main challenge designers face when building emails. It’s why table design needs to be covered in the first place.
On Wednesday, I’ll take a look at a list of commonly used HTML elements at the table and cell level. Stay tuned!