Because email HTML doesn’t respect HTML5 and CSS3, it requires a multitude of nested tables to make anything align well and incorporate responsiveness for mobile applications. When you begin building complex email templates with many sources, embedded code, and varying layouts, it’s easy to get lost in your code.
Utilizing email client testing, I could verify that our email newsletter looked good across all desktop and mobile clients. I recently moved our Martech Zone interviews to a new host, which required an updated layout in our newsletter. While making those edits to our core template, I messed up the code and started to see an issue where our email was severed… a portion of it centered, and then the rest was justified.
My code editor of choice was missing one key feature, content folding, that would have let me quickly identify where my nesting issue was. Content folding organizes your structure in the sidebar, where you can expand and jump directly to the section you wish to edit. I downloaded several editors over the last week, looking for a great platform, and landed on Espresso.
Content Folding
Once I opened the email in Espresso, I found the issue and was able to correct it within a few seconds (I had forgotten to close a table). You can see how it works in the screenshot below… the code is on the left, but the content folding navigator is on the right. This is the corrected table, but you can see how I’d be able to quickly identify a nesting or hierarchical issue with my email template structure!
Espresso isn’t just for editing emails; it’s a powerful editor for Apple OSX with the following features:
- Snippets – shortcuts let you combine and expand abbreviations based on tags and custom snippets.
- Toolbar Favorites – Customize your toolbar with contextual actions, snippets, and menus for quick access.
- Re-Indent – Bye bye, messy code. Apply custom spacing by example. Works for HTML, CSS, and JavaScript.
- Templates – For files, folders, or projects. Use a built-in one, or save your reusable bits — a real time-saver.
- Workspace – With the flexibility of tabs while integrating even more smoothly with your project files.
- Open Quickly – Switch between documents without taking your fingers off the keyboard. It’s Go time.
- Solid Basics – Zippy editing. CodeSense. Folding. Indentation guides. Bracket balancing. All there, quietly helping.
- Multi-Edit – Make many changes at once, not one change many times. Multiple selections make renaming things a breeze.
- Navigator – No mere function menu. Effortlessly navigate your code structure with groups, style previews and Quick Filter.
- Language Support – Out of the box: HTML, (S)CSS, LESS, JS, CoffeeScript, PHP, Ruby, Python, Apache, and XML.
- Fantastic Find – Needle and haystack no more. Project Find and Replace, Quick Filter, and colorized regex make searching through files or text a breeze.
- Plug-In Power – Espresso has an extensive plug-in API for actions, syntaxes, formatting, and more.
Espresso has language plugins that support C, Clojure, ConfigParser, ConvertLinebreaks, Erlang, ExtJS, Flash, French Press (JavaScript beautifier), Haskell, HTMLBundle, INI, jQuery, Latex, Lua, Objective-C, Perl, Prefixr, Regex, Smarty, SQL, Textile, and YAML.
I’m happy with Espresso and have already ditched my old code editor! The price of the tool saved me a ton of money on this first issue that I was easily able to diagnose and correct.
-
-
-
-
