Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.