The front-end engineering team here at Bronto spends a lot of time hashing through the details of how to make our products as simple and easy to use as possible. When we were tasked with writing a WYSIWYG (what-you-see-is-what-you-get) email message editor, we had a long list of requirements. Above all, it had to be simple and easy to use, but it also had to include support for images, take into account the trends towards mobile email opens, and allow users to include data from other areas of the Bronto Marketing Platform. To flesh out the general interaction model for the editor, we built wireframes and iterated until we were happy with it. Our editor would consist of two main areas: the canvas and the palette. The canvas would contain the content for the message, and the palette would contain the options for configuring more complex items on the canvas. We decided that canvas items would revolve around two types of content: elements and containers. All elements would go inside containers, and each container would have a specific number of set columns. We decided to put whatever a user might create within the editor inside of a grid system to have as much control as possible over the final result. Each container became a row in the grid. This also allowed us to introduce responsive behavior in a way that requires no additional effort from the end user. It's already baked into our editor! We used Zurb Ink's grid, which is an excellent open source grid system designed specifically for use in email. Message editor structureWe dove into the contenteditable HTML attribute and created a palette menu that allows users to configure the styles of selected elements and containers. We structured our code with the help of Backbone.js, creating Backbone collections for elements and containers and splitting the various items in the editor into a number of separate views. Each element has its own view along with another view used for configuration. We're using Less to help keep our CSS manageable, Browserify for bundling JavaScript modules, Mocha for unit tests, and Grunt to automate our workflow. The end result: our code is split up into simpler pieces, making a complex feature easier to use and understand for developers.Editing an element in the message editorIt's important to us that our code be easy to work with so we can adapt and make changes along the way. We conducted user testing sessions while building the editor to guide our decision-making process around interactions and features, and we intentionally kept our elements as simple as possible, adding functionality when required but being careful not to make the UI overwhelming to users. Our editor is currently in beta. Read more about it here.