HTML Email? Dreamweaver CC Delivers!

HTML Email? Dreamweaver CC Delivers!
Adobe Products Featured

A recent industry study named Dreamweaver CC the overwhelming favorite HTML editor for designing and developing HTML emails. And not by a little: Dreamweaver was preferred by greater than twice as the nearest competitor.

Why is this venerable web development tool the number one choice for designing HTML emails? It’s precisely because Dreamweaver has been around so long and mastered Web technology at every stage: from the early days of table-based layouts to the modern, responsive era with media queries. The state of HTML emails today demands exactly such a wide-spread grasp and implementation of the languages and protocols that Dreamweaver offers.

Jumpstart with Dreamweaver CC’s Email Starter Templates

If I had to pick one word to describe the entire HTML email ecosystem, it would be arcane. With the wide variety of email programs—many stemming from the earliest days of the Internet—the technology applied is pretty much a hot mess and very troublesome for today’s web designers to get their collective heads around. To simplify all our lives, Dreamweaver CC includes four really great HTML email templates as starting points, all easy to adapt and customize.

To access these wonderful jumping-off points, follow these steps:

  1. Choose File > New to open the New Document dialog.
  2. Select the Starter Templates category.
  3. From the Sample Folder column, choose Email Templates.
  4. Select the desired template.
  5. Click Create.

Email2

Use the starter template that best suits your design needs:

  • Basic – Layout includes single and two column design, with media queries for both devices with a width of 600 and 480 pixels, coded so that multiple columns are linearized.
  • Fluid – Similar to Basic, except no media queries are used although percentages are applied. Multiple columns persist on devices with narrower widths.

    Email3

  • Hybrid – Offers the widest initial display with a single media query for screens with a maximum width of 480px. Layout includes 2 and 3 column areas as well as float left and float right.
  • Responsive – Similar to the Hybrid layout, but incorporating a media query for devices with a maximum width of 600px.

Not only are these very solid initial designs that will work for many email layouts, they are just chockfull of helpful email-specific coding, all lovingly commented. I’ll point out some of the more useful snippets as we go. As a testament to their worth, I used the Responsive email starter template as the basis for the example HTML email shown throughout this post.

Email responsively with media queries

One of the first things you’ll learn when developing an HTML email is that you have to go back to the stone age for your email to display properly across the board: table-based layouts, no external CSS, no JavaScript or PHP. A recent post by Karol K on effective HTML newsletter design summarized these challenges. But, surprise, surprise! Numerous email clients now support media queries, at the very heart of responsive design. And, as you probably well know, Dreamweaver CC offers full media query support as well, from development to depiction. This ability comes in very handy when adding a new media query to an existing design:

  1. In Live view, make sure the Visual Media Queries bar is open and available.
    Click the Show/Hide Visual Media Queries bar button to toggle its display.
  2. Drag the scrubber handle to resize the document window to the desired width for your media query.
    I wanted to supplement the 600px max-width media query included in the Responsive starter template with one for smaller screened iPhones, so I moved the scrubber to 480px.
  3. Click Add New Media Query (the plus symbol inside the inverted triangle on the ruler).
  4. In the pop-up, choose max-width as the parameter with the desired value to set the media query code.
  5. Embed the code within the page by either choosing an existing <style> tag, if available, or selecting Define in Page from the placement options.

Email4

Now, you can use CSS Designer and all the other built-in Dreamweaver tools to create your media query specific CSS rules. One very big caveat, however. It’s vital that all declarations include an !important keyword to override the corresponding inline CSS—because, as we’ll see in the next section, most CSS is inline for HTML emails.

Email5

Inline CSS rules!

As mentioned, inline CSS is pretty much the mandatory method for styling HTML emails.  That’s not to say that you can’t use embedded styles during your development process; I’ll show an easy way to get the best of both worlds.

Dreamweaver offers a number of tools for handling inline styles. If an inline style is already applied (one key advantage for customizing a Dreamweaver email starter template, where many are), you can easily adjust it through the CSS Designer panel.

  1. Choose the page element you want to style in the Live view document window; if you prefer, you can go the Tag Selector or DOM panel route.
  2. From the CSS Designer panel, enter Current mode.
  3. From the Selector panel, choose the < inline style > entry.
  4. Modify any existing properties or add new ones in the Properties pane.

Email6

The fastest way to insert an inline style for the first time into a tag is through the Quick Tag Editor. With the element selected, press Ctrl-T/Command-T and enter a style parameter, like this style=”padding:20px;”.  If you don’t want to specify a property by hand, you can just insert style=”” into the tag and the < inline style > entry will be available in the CSS Designer panel.

Email7

Of course, incorporating the same style over and over again can be mind-numbingly tedious. An alternative approach is to specify embed your general styles in a <style> tag in the <head> of your HTML page and then use a CSS inliner utility, like the one available from MailChimp to propogate your styles correctly. As a bonus, such tools typically recognize media queries and leave them as-is.

Tabling your layouts

Remember all those hours you spent struggling as you tried to wrap your head around the intricacies of clearing CSS floats? As we say in Brooklyn, “Fuhgetaboutit!” Table-based layout is the one true path to HTML email bliss. Lucky for you, Dreamweaver is a true table Zen master.

An HTML email layout typically uses nested tables throughout. A common strategy is to use one outer table (which serves as the page background) with a single cell. Within that cell is another table used as wrapper for the email content. Additional tables are nested to create side-by-side columns or emulate float effects. Just select any content in a well-formed HTML email and take a gander at the Tag Selector: you’ll see table after table referenced.

Email8

Not only are tables used for structural layout, table attributes—long-since converted to CSS for standard web pages—are commonly brought into play. For example, let’s say you want to change the background color of the overall page. In an HTML email, you’ll search in vain for a CSS rule like body { background-color: #000; }. Nope, the culprit is the outermost table’s bgcolor attribute, which you can change either through the CSS Designer panel or the Quick Tag Editor as described above.

Table editing is fully operational in Live view. Naturally, because HTML emails are nested table heaven, you can insert a table in any selected table cell. From the Insert panel’s HTML category, drag a Table object onto the desired <td> tag and opt for the Nested option from the Position Assist dialog. Need to add a row or column? Not an issue. Just choose the desired <table> element, such as a <tr> tag and choose Modify > Table > Insert Rows or Columns. You can add as many as you want, exactly where you want them.

Email9

Connecting content properly

So far we’ve covered style and structure—but what about the content itself? Are there special HTML email considerations when working with text, images and form elements? You bet!

The general rule that applies to all content is to make sure everything is in a table cell, either <td> or <th>. Beyond that placement, here are a few particulars you should keep in mind:

  • Text
    • For the final HTML output sent to your email lists, all CSS must be inline. If the text is not in a <p> tag or heading element, the style attribute should be on the <td> or <th>
    • Make sure you include all text styles to completely control appearance: text-align, font-size, font-family, color, line-height, and padding, among others.
    • Consider incorporating a special property for Microsoft Outlook users, mso-height-rule: exactly, to avoid unwanted style variations in that email client.
  • Images
    • All src attributes must use fully formed absolutely URLs to display images. Naturally, all such images have to be available online.
    • For maximum flexibility, graphics should be sized at their maximum width and height for desktop email client.
    • The width and height attributes omitted from the <img> tag—easily handled through the Quick Tag Editor.
    • Alt text is a must as not all messages display graphics initially and some, not at all.
  • Links
    • Like images, all <a> tags should point to absolute URLs with their href
  • Form elements
    • Aside from buttons, form elements are useless in emails. Basically, no forms need apply in these scenarios.
    • Buttons can be used but only as heavily stylized links. The Dreamweaver starter templates include a nice progressive enhancements that employs the CSS transition property to smoothly show hover colors.

      Email10

Handling email-only niceties and requirements

Although by-and-large, HTML web pages translate smoothly to emails (once you’ve mastered the arcanery), there are a few email-specific elements and methods you can add to your uncanny arsenal. First, we’re all familiar with how your mobile email app displays the subject line, sender and first couple lines of text in a list format for the inbox and other folders. With a wee bit of styling, you can include exactly the text you want to appear and not leave it to chance—or have it show up in your HTML email. What the magic?  Let me show you how Dreamweaver the Magnificent performs the trick, as revealed in its HTML email starters:

<div style=”display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;”>Open this email right away!</div>

These styles not only hide the content in the div generally with the display:none declaration, it also includes a Microsoft Outlook only parameter and other styles to minimize impact on your design. Abracadabra!

Speaking of Outlook, you might also want to switch over to Dreamweaver’s Code view so you can bring in some Microsoft specific conditional comments, necessary to replicate certain CSS properties, like a background-image.

Email11

Dreamweaver’s prowess as an HTML email editor is second to none, and gives you—the web professional—another important power tool for meeting your client’s online needs quickly and efficiently.

Recommended Articles