Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start to code HTML emails, here are a few tips to keep in mind as you code. You want to set margins to the lowest possible level within your HTML tables. For example, you want to set your margins not at the table level; you want to set it at all the TD levels. For example, if you have white space around the paragraph tag or white space around an image, most likely you want to start by putting your margins at the TD level. If that doesn't work in your testing then try it at the paragraph level or the image level.
Also be aware that floats don't work with most email software, and padding doesn't work with some email software. When you design your HTML table layout, use as few HTML tables as possible. The less complexity there is, the less there is to break. All your image tags will need to have these styles: borders set to none and display is set to block. Hotmail, for example, will add a gap below images that don't have display set to block, and Outlook email software often will set borders around images unless you set border to none.
If you see something broken in your testing that is related to cascading style sheets, check your semicolons and check that you have double quotes to start and end your style declarations. If your layout is broken, always use border = 1 in the table tags as you build your HTML email layout. I always set border = 0 and set it to 1 while I create my layout. In addition, and this will sound crazy, you want to alphabetize your CSS definitions.
Color, for example, is defined before font, and the reason is very, very simple: HTML emails become clotted with a massive amount of inline CSS. If you need to go into a particular part of your HTML email to find and correct a CSS style, if is far easier if you know that all of your style definitions are neatly alphabetized. Finally, when you define your Inline CSS, you cannot use shorthand.
These are the most common inline CSS styles that you will use that are often turned into shorthand in web pages, and I encourage you to type out or copy these declarations somewhere in your text editor, so you can quickly copy and paste them into your code and adjust them as needed. For example, fonts needs to be broken out in the font-family, font-size, font-weight, and line-height. And your margins and paddings need to be set to zero for margin top, right, bottom, and left.
Let's get started with our projects.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 64627 Viewers
80 Video lessons · 124266 Viewers
52 Video lessons · 60223 Viewers
59 Video lessons · 46053 Viewers