Because email HTML doesn’t respect HTML5 and CSS3 in its entirety, it requires a multitude of nested tables to make anything align well and to incorporate responsiveness for mobile applications. When you begin building complex email templates with a multitude of sources, embedded code, and varying layouts, it’s easy to get lost in your code.
Utilizing 250ok‘s design tests, I could verify that our email newsletter looked good across all desktop and mobile clients. I recently moved our Martech podcasts to a new host which required editing of the newsletter. Additionally, I updated the newsletter with our marketing whitepapers. While I was 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 left justified.
My code editor of choice was missing one key feature, content folding, that would have let me easily 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 quite a few editors over the last week looking for a great platform and landed on Espresso.
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.
- Templates – For files, folders or projects. Use a built-in one, or save your reusable bits. A real time-saver.
- Workspace – Now 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 comes with an extensive plug-in API for actions, syntaxes, formatting, and more.
I’m incredibly happy with Espresso and have already ditched my old code editor for it! The price of the tool saved me a ton of money on this first issue that I was easily able to diagnose and correct.