Skip to main content
Dan Rodney/1 min read

Setting Up

HTML Email Workflow

1

Build with Tables

Nested <table> tags for cross-client compatibility.

2

Inline the CSS

Use Premailer or similar to inline styles automatically.

3

Test in Real Inboxes

Litmus screenshots across 50+ clients.

4

Send via ESP

Mailchimp, SendGrid, Postmark — never raw SMTP for marketing.

Master Web Design at Noble Desktop

Noble Desktop's Web Design Certificate teaches HTML, CSS, and the responsive design patterns behind every modern email and web project.

Discover how to prepare your class files correctly with our comprehensive tutorial that guides you step-by-step, whether you're using a Mac or a Windows computer.

Complete the following setup prior to beginning any exercises.

Topics Covered in This HTML Email Tutorial:

Setting up Your Class Files

Creating Your Own Copy of Class Files

Throughout this workbook you will be editing class files that we have prepared for you. Instead of editing the originals, we’ll have you make a copy just for yourself to edit.

  1. If you have any windows open, minimize or hide them so you can see the Desktop.

  2. Open the Class Files folder.

  3. Follow the appropriate Mac or Windows instructions below:

    Mac:

    • Click once on the HTML Email Class folder to select it.
    • Press Cmd–D to duplicate it.
    • Rename the duplicate folder yourname–HTML Email Class.

    Windows:

    • Click once on the HTML Email Class folder to select it.
    • Press CTRL–C to copy it.
    • Press CTRL–V to paste it.
    • The new copy may be at the bottom of the list of folders. Rename the file yourname-HTML Email Class.

  4. You now have your own set of class files to use throughout the class. Have fun!