Site in-depth: Letter
GRAEME FULTON KEEPS US POSTED ON HIS EMAIL NEWSLETTER DESIGN TOOL.
TELL US WHAT LETTER DOES.
Letter is a dynamic email tool that redefines the workflow of making a newsletter. It integrates with popular design tools. Start by designing in Adobe XD, Figma or Sketch and then export your artboards straight into Letter as HTML code. Within Letter, there’s a drag-and-drop builder that populates your designs with content at the click of a button. Finally you can send the email using your favourite services.
WHY DID YOU CREATE IT?
I don’t believe humans should be doing mundane, robotic tasks. Creating email newsletters happens to have lots of those. It used to take me up to four hours (or six with a hangover) to create the newsletter for my online design publication, Prototypr.io. Manually inputting content was slow and it was also extremely tricky to change the design of a newsletter. I hated the process so much, I decided to build a product to fix it.
WHAT WERE YOU HOPING TO ACHIEVE?
Making a newsletter should be about the design and creative process. The workflow is currently fragmented and manual. Why should we have to resize images or copy and paste titles and links? Why should someone have to translate a design into code? Humans should focus on the meaningful parts.
I’m hoping to take the pain out of creating newsletters, whilst making a service that’s affordable to individual creators.
WHAT TECHNOLOGIES WERE USED IN BUILDING IT?
There are three parts: content importer, design tool plugins and the Letter editor, all built with JavaScript!
To import data, I use an AI library called AYLIEN that brings the power of natural language processing. Upon sending the URL for an article, the API fetches the content’s title, description, author and a relevant image. That data is plugged into the HTML template using a templating engine called Handlebars.js.
To export artboards from design tools into Letter, plugins are made for each tool. For instance, to import an Adobe XD design, we created a plugin using the XD Plugin API. This gives access to a JSON representation of XD designs, which can be converted to HTML code. The Letter editor is created in React and Redux with a Firebase back-end to handle user accounts.
HOW HAS IT BEEN RECEIVED?
There has been great support from the design and maker communities, with over 800 people signing up for early access via Product Hunt. Letter is also part of the Adobe Fund for Design, which provides great support to progress the project. Importantly, my mother is also excited about it.
WHAT DO YOU THINK YOU’LL DO NEXT WITH IT?
When a product is easy to use, yet very powerful, there are a lot of moving parts, so the next step is to user test the beta version to ensure the product works and makes sense to people. After the beta, the goal is to turn it into a company.