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.
Design view gives us:
The visual preview. It lets us see
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
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!
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
SPACE. When you expect the value to show, but it doesn’t, this means something’s wrong with the image path.
4. Collapse Full Tag
One of the most useful features of Dreamweaver (applicable for both web and email development) is Collapse Full Tag.
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.
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).
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.
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.
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.
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:
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.
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.
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.
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.
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.