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

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 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 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

Recommended Articles