Why visual email editors suck

Short answer: it comes down to varying degrees of limitations. The long answer is more nuanced, based on the level of design quality you’re going for and how the rendering of email clients affects things.

Flexibility

Email provider visual editors

Visual email builders

Blocks Edit visual editor

Quality

Different types of visual email editors will be limited in how you can adjust your design which in turn also affects the overall quality that you're able to get to.

The spectrum of email editors

Visual email editors typically fall into two categories. Editors based around a predesigned template with limited customization options. These are usually found in email providers that include an editor. And, visual builders that allow building designs from scratch with many more options. Some editors fall somewhere in-between.

This spectrum of options is an indicator of the level of flexibility you have with your design. With editors based around templates having the least flexibility, and design builders having more. The ultimate flexibility, and what also leads to the best quality, is custom coded email designs.

The struggle with email code

Email clients don’t render emails like web browsers, so we have to work around that. Visual email editors and builders have a hard time accounting for the many email clients and their individual versions, many of which are outdated. And because they account for the lowest common denominator, this leads to bad practices that cause accessibility issues and bloated code that requires added testing.

This also makes their tools for design very rigid, which is why even builders fall short on design flexibility and quality. And why custom coding a design allows for the best, most flexible design. Compatibility is important, but it should be based on your specific design needs and audience.

Visually editing from custom code


      <div class="block-section" data-group="header" data-title="Header">

        <h1 class="block-edit" data-block="example-title" style="text-align: left">Title</h1>

        <p class="block-edit" data-block="example-text" style="text-align: left">Content</p>

      </div>

Blocks Edit takes the best of both worlds, utilizing custom code and being able to build an email visually from that code. Editable options are added as tags within your custom template code, so it doesn’t interfere with it as you’re working on it, and makes future updates to it easy to manage.

Blocks Edit screenshot of the visual editor with the team comments in the activity panel

With the visual editor, you can drag and drop custom modules and edit content in a simple interface any team member can use without worrying about messing something up. And the design quality of your emails remains consistent and your code intact. And it’s platform agnostic, so you don’t have to worry about being locked into your email provider.