I strongly believe that Dreamweaver is the best code editor for email development. If you think differently, that’s cool. Just consider all the features below; are you getting their equivalents? If you do use Dreamweaver, make sure you truly know and use the dozen following features.

1. Design View.

It’s the primary reason we use Dreamweaver. No matter how good Sublime Text or Atom becomes, without the visual representation of the table structures, they will never be able to match Dreamweaver. In Email Development field, of course.

Fig.1. Make sure you are not on Live View, but on Design View

Fig.1. Make sure you are not on Live View, but on Design View

Design view gives us:

  • The visual preview. It lets us see TABLEs and TD’s. It lets us navigate the code by clicking around in the Design View. Rule: never type anything in Design View.

  • Widths (both set-ones and the actual-ones) on TABLE and TD tags.

Fig.1.2. Notice how TD widths are not set and show as zeros, but actual widths are also shown. It would be difficult to get those widths using Inspect Tool or Firebug.

Fig.1.2. Notice how TD widths are not set and show as zeros, but actual widths are also shown. It would be difficult to get those widths using Inspect Tool or Firebug.

  • Expanded Tables Mode (see below more about it).

  • Slightly worse rendering engine than browsers, which occasionally might reveal certain code problems.

2. Attribute Suggestion

The attribute suggestion is perfect in Dreamweaver, and it was taken for granted until Sublime Text came out. Even at the time of writing, for example, Sublime Text 3 can’t suggest target= values, but free Atom can!

Fig.2. Simple target=blank test. Dreamweaver suggests values spot-on.

Fig.2. Simple target=blank test. Dreamweaver suggests values spot-on.

Open source Atom actually got this fixed since v.0.199.0. This feature alone is the reason to abandon Sublime Text if you are primarily doing web development. I know few people who switched from Sublime Text to Atom.

Dreamweaver always had reliable attribute suggestion, and it used to stand out against the other code editors. After this Atom update, it is not more unique.

I think it is super-important to have fully functional autocomplete when coding email. Developers do remember the attributes (such as all possible target= values), so it’s not about reminding the attributes. I memorized all the tags, all their possible attributes, and values. It’s about saving time — you don’t need to type the whole attribute. For example, in Dreamweaver it’s enough to type display:b to get display: block. All this saves time.

3. Retrieving Image Dimensions

As long as you have the src= attribute set, Dreamweaver will retrieve the width and height values from the hosted (or local) images. Place the cursor between double apostrophes and click CTRL/CMD + SPACE. When you expect the value to show, but it doesn’t, this means something’s wrong with the image path.

Fig.3. Dreamweaver can fetch the widths and heights of the images, even if they are hosted on external servers.

Fig.3. Dreamweaver can fetch the widths and heights of the images, even if they are hosted on external servers.

4. Collapse Full Tag

One of the most useful features of Dreamweaver (applicable for both web and email development) is Collapse Full Tag.

Fig.4. DW Collapse Full Tag needs to be mapped to keyboard F-key first.

Fig.4. DW Collapse Full Tag needs to be mapped to keyboard F-key first.

Collapse Full Tag is superior to regular code folding because it can be done using a keyboard shortcut. Compare this to code folding that requires moving the hand from the keyboard and using the mouse to click the triangle near the line numbers, and then moving the hand back to a keyboard.

Code folding is an inferior way to collapse the code also because you can’t fold the code when a cursor is placed on the closing tag. You also can’t fold the code if there are multiple tags after it — looks like DW folds the last tag on the line.

The bad news is that Adobe removed the Collapse Full Tag on Dreamweaver 2015 release and replaced it with basic code folding relying on clean markup and user willing to click the mouse to fold the code.

Collapse Full Tag is an essential feature, and I don’t understand why Adobe had to remove it. Triangle near line numbers based code folding could co-exist with Collapse Full Tag. This missing feature alone is enough for me to switch back to older DW versions. No matter what Adobe adds in the future versions, I refuse to live without Collapse Full Tag.

5. Code Linting - Error Highlighting

Before Dreamweaver version 2015, error highlighting was unreliable and neither identified the error nor exactly pinpointed its location. Dreamweaver 2015 finally sorted this and linting results are shown in a separate “Output” panel. Open source Atom’s Linting is way more powerful.

Fig.5. Dreamweaver 2015 Code Linting shows results in the Output panel and alerts near the line numbers.

Fig.5. Dreamweaver 2015 Code Linting shows results in the Output panel and alerts near the line numbers.

6. New HTML File Templates

When you create a new file, DW creates a new file with proper meta tags, headers and footers. It saves time, and you don’t need to memorize the Emmet shortcuts (and you don’t even need Emmet at the first place).

Fig.6. Creating a new file in Dreamweaver.

Fig.6. Creating a new file in Dreamweaver.

7. Font Stack Suggestions

Starting from the Dreamweaver CC, you have to recreate usual font stacks used in email because Adobe decided to shuffle fonts around a bit. However, the feature is nice, and it helps to save time. The most popular font stack in an email is: Arial, Helvetica, sans-serif; and suggestion saves us typing those 29 characters over and over.

Fig.7. The most common font stack in email development is Arial, Helvetica, sans-serif. It's not present by default, and you have to create it yourself.

Fig.7. The most common font stack in email development is Arial, Helvetica, sans-serif. It's not present by default, and you have to create it yourself.

8. Powerful Replace Functionality

Not only you can Find and Replace the code in Dreamweaver, you can also do various advanced operations with HTML tags, their attributes, and values.

Fig.8. This is the functions list and also you can filter out the working tags by multiple levels.

Fig.8. This is the functions list and also you can filter out the working tags by multiple levels.

The best part, regexes can still be used in this mode. Personally I have never seen more powerful Find and Replace functionality than this.

9. Expanded Tables Mode

This mode can be activated in DW Design View by right-clicking on the table structure and choosing menu item at the very bottom. Once activated, it expands the table structures and separates the layers of tables.

Fig.9. Dreamweaver Expanded Tables Mode On and Off compared.

Fig.9. Dreamweaver Expanded Tables Mode On and Off compared.

It gives us a better overview and lets us see the hierarchy of tables. The best part, you can still use the Design View to navigate the code by clicking expanded tables.

10. NBSP and BR shortcuts

On Dreamweaver, you can type key combinations:

SHIFT + ENTER = <br> CMD/CTRL + SHIFT + SPACE = &nbsp;

This feature is not present on Atom or Sublime Text by default, the last time I checked.

11. Code Validator

W3C Validator is a separate panel from “Output” where the Linting results are shown (on DW 2015). Validator is present on all contemporary versions of Dreamweaver, and it saves time going to the Internet and pasting the code there. It also saves time because you can click the results panel rows and jump straight to the particular erroneous line.

Fig.11. Dreamweaver Validator is a built-in feature not present in majority of the other code editors.

Fig.11. Dreamweaver Validator is a built-in feature not present in majority of the other code editors.

To enable the panel go to Window > Results > Validation in the menu and turn in on.

I always keep Validator collapsed, at the bottom of my workspace. It is a best practice to try to have your email newsletter code as valid as possible.

12. Snippets via Keyboard Key Shortcuts

Another Dreamweaver’s strength is the Snippets feature. All code editors have it, but the snippets are triggered by typing the keyword and expanding it (using Tab for example). That’s a very different approach from Dreamweaver, where snippets are mapped to keyboard keys.

Snippets are managed through the Snippets Panel.

Fig.12.1. If you don't see the Snippets Panel in your workspace, turn it on through the menu first.

Fig.12.1. If you don't see the Snippets Panel in your workspace, turn it on through the menu first.

The Snippets Panel allows to create snippets, map them to the keyboard keys and organize them into folders. It’s pity Adobe doesn’t let us export/import Snippets through the interface. You have to go to the system folders and manually export/import snippet files. In coder teams, it is usually a duty of senior developers to help new starters to set the snippets up.

Fig.12.2. Dreamweaver Snippets Panel and some of my code snippets.

Fig.12.2. Dreamweaver Snippets Panel and some of my code snippets.

I am a proponent of Dreamweaver approach of snippets triggered by a key press. Why should I type multiple keys when I can get the same done using a single key? Email development is suitable for this because the variety of attributes and tags is very limited (unlike in web development). My favorite snippet system is based on five F-keys and maybe ten more unmapped snippets available from Snippets panel. I can afford to map snippets to keyboard keys because I use so few of them. That would be impossible in Web development.

Summary

There are way more unique and powerful features of Dreamweaver, but this dozen contains the most important ones. Never think you know your software completely — there is always something new to learn and something new to discover. I hope you found my take on Dreamweaver features interesting and useful for your new upcoming email coding project.