Join Tim Slavin for an in-depth discussion in this video Understanding the ideal coding process, part of Effective HTML Email and Newsletters.
- View Offline
Before we start creating emails, let's look at the ideal process to create emails. This process will minimize errors and make it much easier for you to create emails. The first step is to plan your HTML email layout. This involves converting your design into a grid, identifying what colors are in the design, for example background colors, and sizing the widths and the heights that you'll need to replicate in your HTML tables. The second step is to code your layout in HTML tables, then you add content to your HTML table layout, then you add inline styles. And you can add inline styles either by hand, which is my preferred method because I like total control, or you can create CSS styles within your file and use Premailer.
Premailer is an online service that takes CSS styles and puts them inside of paragraph tags, table data tags, and so forth. It converts your class and ID declarations into actual inline CSS. My preference, however, is to do inline styles by hand, so that I have complete control. I can organize my styles alphabetically, for example. In this course, all styles will be added inline by hand. Let's look at this email-creation process in detail.
The first step is to plan your layout. Essentially, you take your design and you turn it into a grid. This grid then is converted into an HTML table. For example, this is the table layout code for one of the projects we'll do shortly. Once you have your table layout, then you add content, for example, your navigation links with basic HTML tags. After that, you add the inline styles, again by hand or with Premailer--it's your choice. In this course, all inline styles will be done by hand. That's it.
That's the process that we will follow in each of our projects. Now, let's get ready to create some emails.
- Understanding MIME types
- Reducing spam potential in an email or email list
- Creating content for email campaigns
- Understanding the design constraints of HTML emails
- Building email address lists
- Understanding the ideal coding process
- Designing a plain text email from an HTML email
- Deciding how and when to test an email
- Sending email with canned templates
- Troubleshooting layout, spacing, and image issues
- Adding video to email