
Letter
Create customisable newsletters from HTML email templates
When I started building Letter, it was to automate the mundane parts of newsletter making, and let people focus on the fun and creative parts.
So when I added AI, it's not so much a feature, but an extension of how it already works, keeping the the human in control. Most apps will eventually replace 'dumb' code with AI-driven queries, so you can look at AI as another technology, like a database, rather than a feature.
That's the approach I take..but while it's still hype, I'll keep using it as marketing!
I've been playing with generating different tones of voice with AI, and it's funny that OpenAI knows bro culture and how to speak like a bro really well:
I've found when building with AI, it's much better if the product is built with AI at the core, rather than tacking it on as a gimmick, or it just doesn't work as well...
1 Like
Comment
It's Adobe MAX conference this week, and they gifted me a sponsor page so I can run a giveaway.
I partnered with Adobe to create a Letter + Adobe Express integration. The integration is available, but kindof untested. I think this again shows that you can just go ahead and put a signup form out.
If there's anything broken, deal with it with a support chat, like crisp.chat
2 Likes
Comment
Editing a Gif isn't the same as editing an image. You have to apply all the transforms to every single frame, rather than just 1 image, so it's a bit more involved.
I actually wrote about making the Letter image editor here, finishing by saying that despite GIFs being pretty essential for newsletters, they would be out of the scope until next month!
What's a newsletter without a GIF?
But obviously I just really wanted them because, what's a newsletter without a GIF (maybe ProductHunt newsletter can relate π)? I already had a good image editor, so surely it could work for GIFs?
Anyway, it took me about 3-4 days and the result is really good:
It turns out there's a tonne of libraries that can help with GIF cropping - Imagemagick, Graphicsmagick, and Gifsicle! I use a combination of those. The hardest part was the maths to zoom and crop the image in the right place.
1 Like
Comment
I've been moving a bit too fast to post updates recently, but one of the last things I shipped were awesome changes to text editing in Letter - it's now more flexible, like a Google Doc or Pages.
Text sections now support a combination of formats: headers, lists, and paragraphs. You can see the changes here on the release page.
Sharing progress makes it easier... to write change logs
When I was making these changes, I decided to tweet it as I was doing it:
For each mini milestone, I took a little video and posted it. I hadn't done this for a while, as I thought such changes were a bit dull.
In the end, I found that even if the updates aren't too interesting for people, they're awesome to build change logs from!
Keeping a changelog of even boring updates lets people see the product is developing, and it's really nice to look back on personally too.
So I'm going to try and do this more as I work, and recommend doing a change log if you don't have one already ππ½
4 Likes
Comment
I've just got images in Letter to automatically scale and adapt to any size. No more time wasted cropping and stretching.
All you have to do is drag from the image resize handles, and the image will fill out the available space!
βΆοΈ See the video of what's new here.
Good to be a bit stupid
Despite it being really nice and easy to use, there was quite a lot of complexity to deal with behind the scenes to make it simple for the end user.
Email clients like Microsoft Outlook 2013 don't support a wide range of CSS properties, which means the images need to be resized in the background .
Had I known all of this before I started, I probably would have built something else. But that's probably why it's good to be a bit stupid β you don't get put off by how difficult things will be. I think being excited to solve the problem lets me push through where a lot of people would probably give up.
What's new:
Here's what's changed when resizing and working with images:
-
Adaptive Images: By default, images now adapt and fill the available space when inserted or resized. This works when resizing images, and when new images are inserted or imported.
-
Preserve Aspect Ratio: Hold shift while dragging to maintain the image aspect ratio whilst resizing.
-
Double click for Image Editor: Now you can double click images to open the image editor for cropping and filters.
-
Crop to Aspect Ratio: The default crop shape of the Image Editor is now set to the same aspect ratio as the image you open. This lets you preview exactly how your image will look on the card during the crop, ensuring you get a perfect fit.
Export templates from Letter to Sendgrid!
Adding this plugin was a lot easier having added Hubspot Export the previous week. I just had to add an extra option to the existing modal.
However, there was a bit of extra work regarding the flow. For Hubspot export, pressing the export button triggered a popup window, where the user logged in and authenticated Hubspot.
Working on the flow
SendGrid authentication is different - instead of Oauth, I needed the user to add their API key. I thought of a few options:
- Add an extra step to the modal? (that would be weird since Modals usually have 1 action)
- Create a similar popup to the hubspot version?
Then Ann suggested sliding it down in the current modal, just under the selected SendGrid option, and it worked really well!
You only need to add the key for the first export, so it's only ever shown once.
Next time
Next time I add a bunch of similar integrations, I'll check how they all differ before deciding on the flow!
1 Like
Comment
Letter to Hubspot is here π, the first of the Letter export plugins.
This lets you export email templates directly from Letter to Hubspot in one click. See the video for an overview:
πΉ β― https://www.youtube.com/watch?v=XXNK2Spk_qI
Letter already has code exports such as CodePen export, and copy to clipboard. This was sufficient for me, as I just paste the code into Email Octopus, but a few people I spoke to were asking about integrations.
Why Hubspot ?
It's a bit of a surprise for me that I'd be adding Hubspot first. It's because one of the Pro members already use Hubspot, and another company was asking about it. Now that the first one is added, the rest should be a bit easier...
If you have any questions on it, give me a shout.
1 Like
Comment
After sharing a preview last week, today I just shipped the the upgraded Inspector for Letter.
Now you can edit margins, padding, line height, colours, and fonts for any element in any newsletter. Select an element from the canvas, and the Inspector panel will change to show editable properties for that element.
1 Like
Comment
Since the last update, I've added loads of awesome new features. In all though, I learned that the parts nobody will ever see seem to be the hardest work, but those are the bits that make all the cool stuff possible.
For example, of these 3 updates, the last one took the biggest effort, and noone really notices it:
π Element Inspector β see the structure of your designs with margin/padding guides
πΌ Image Libraries - host all your pics in your own collection
π Faster performance and bug fixes
Since I was so focused on the app itself, I left the checkout until the end, and totally underestimated the work involved.
Adding Stripe checkout was also like making another app completely. I did look at using Paddle and other alternatives, but with Letter being a SaaS with monthly subscriptions, and not a one off purchase, they all seem to require a chunk of work to integrate. For the next app, I'd probably look to use a platform with subscriptions baked in already - does that exist?
Something like a SaaS starter would be good!
Anyway, I'm happy now to focus on the editor again, and thinking about sales with Black Friday coming up.
2 Likes
Comment
About
Editing HTML templates can be a real nightmare! I got sick of putting aside half a day (or an entire day with a hangover πΊ) for creating the weekly newsletter for prototypr.io. So I made an app that fits my needs!


Comment