Email Templates In Dreamweaver CC

Dreamweaver started to lead the way as a tool for building with standards-compliant code several years ago, and deprecated layout mode in CS4 that made it easier to work with table-based design—something that needed to finally be banished from the web. One of the downsides to this though was that it meant to produce email templates that you really needed to get mucky with code, and a lot of (non-web) designers—the poor souls that had to produce email templates—didn’t want to go anywhere near that in if they could avoid it.

The good news is that Dreamweaver CC2015 recently introduced starter templates for HTML email, and they’re pretty-well thought out, and easy to use.

Finding The Starter Templates

step_0From the Welcome Screen that should appear when you launch Dreamweaver, you’ll see Starter Templates in the centre column, at the bottom, click there and you’ll be taken through to the new document dialog, with templates preselected—you can also just launch the new document dialog if you already have a file open and select the Starter Templates option from there.

step_1Click on Email templates and then choose a template:

  • Basic—a “mobile first” approach that is easy to implement, using a single column with large text and CTA’s that will look good on screens of all sizes.
  • Fluid—a reflowable approach that is roughly equivalent to what is known as a “liquid layout” in web-speak. Works best perhaps for text-heavy layouts as they don’t have so much control over the relationship between text and imagery.
  • Hybrid
  • Responsive—uses CSS media queries to change the layout of email, adjusting the size of images and text, and sometimes even selectively hiding or swapping content between differing device sizes.

Your document is generated, ready for your modifications. The code itself is commented throughout, so you’ll know get an idea of what it does; if you’re not overly familiar with working with code, you’ll find that very useful.step_2

Working with the Templates

It’s a good idea perhaps to switch to the Design workspace (the workspace switcher should be at the top-right of the interface, in the Application bar) as this will give you ready access to the Properties Inspector—handy for changing things like links, etc. without going into the code.

The text is straightforward—simply replacer the placeholder text with your own. Making links in the text is really easy; simply select the word(s) you’d like to be the link and a widget will appear (if you’re in Live view – otherwise use the Properties Inspector)—click the link icon and enter the target address into the textfielstep8

The image placeholders can be swapped out for your—remotely hosted (see the boxout below if you’re new to HTML email)—images by clicking the “hot dog” menu to the left of the image tag (as shown below) and then entering the url of your images into the textfield, in the pop-up bubble. It’s also where you can enter the alt text for those who read their email with images turned off, which is a best-practice assumption to make in any event.step_3


Quick Sidenote for HTML Email Newbies

Images used in HTML email have to be hosted on a publicly-accessible server, so that when the email is opened by your reader, their device knows where to fetch the image from to display it.  Consider a content-delivery network (CDN) if you’re going to be sending a lot of mails—otherwise your own domain may be an option.


You may still need to copy your code out and run it through an inliner tool—just search on something like “HTML inline tool email” and you’ll find that there are plenty to choose from—to prep your email for clients like gmail, but that is no big deal—maybe if this catches on the DW team will look at including that in the future…

How Long Would It Take You To Draw a Dartboard Layout?

Just in case you’re not familiar with one, this is what a dartboard layout looks like:dartboard
and very recently I had to draw one for a demo. How long did it take? About five minutes, and in this post I’m going to be sharing how.

Note: As with many of these kinds of post, it’s not about what we’re drawing, but how we’re doing it—the skills can be applied to a multitude of things.

Get Drawing!

  1. Start out with the Polar Grid Tool (found nested with the line tool) and alt-click where you’d like the centre of your dartboard to be; the dialog opens and you can enter the dimensions—mine was 150 x 150mm—add 6 concentric dividers and 20 radial dividers then click OK to exit the dialog.step_1
  2. Choose the Group Selection Tool (nested with the Direct Selection Tool) and select the first circle inside the groupstep_2
  3. Tap S to access the Scale Tool and immediately hit RETURN to launch the Scale dialog; enter a uniform value of 145 and hit OK—this will create the outside of the boardstep_3
  4. Select the next circle, that will form the inner-part of the doubles ring. Again, tap S and hit RETURN to access the Scale dialog, and scale this one up by 128%step_4-5
  5. Select the next smallest circle and scale that down by 98% to form the outer-part of the trebles ring then select the next circle and scale that by 112% to make the inner-partstep_6
  6. Our dartboard needs to rotate by 9º, so with the whole thing selected tap R to get the Rotate Tool and hit RETURN then enter 9 in the dialog and click OK to get that sorted
  7. Choose the Shaper Tool (nested with the Pencil Tool) and make an erasing gesture across some of the lines within the centre circle—it may help if you’re zoomed in to do this and also don’t try and do it all at once—two or three passes will work best.step_7-8
  8. This has now become a set of Shaper Groups; you’ll need to merge these and then expand them to continue, so with the whole thing selected click Merge Shaper Groups and then Expand in the Control Stripstep_9
  9. Now we’ll select (with the Group selection Tool) the circle that we have previously ignored (the second smallest) and scale that down to about 25% to form the bulls-eye. Once that’s done select everything and unify the stroke weights using the drop-down in the Control Stripstep_10


We’re going to add colour here using the Live Paint tools; Live Paint has a couple of benefits—firstly it’s fast—and secondly it is flexible. If it becomes necessary to scale any of those rings for example, then the live paint group will just change the shape of the fills to accommodate your modifications.

  1. Select everything and use the shortcut ALT-⌘-X (ALT-CTRL-X on Windows) or from the menus: Object > Live Paint > Make to turn this into a live paint group.
  2. Choose the Live Paint Selection Tool (nested with the Shape Builder Tool and Live Paint Bucket); SHIFT-L is the accelerator for this tool
  3. Drag a marquee around the entire shape (it’ll highlight as shown below on the left) and give it a dark grey fillstepB3
  4. Now select segments—hold down SHIFT to select multiple—and then choose a fill colourstep_11

You should be able to complete the board in just a few moments!


Grab something nice to drink, then sit and watch the whole process in this video:

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑