badsender logo

Fuckin Amazing Tools for Email Designer / Email Coder - Part 01

27/05/2019

Hey buddy! How are you? How are you? Did you come to the EMDay this year? Maybe you even enjoyed it? And, with a little bit of luck, you might even have attended my workshop on "F*ckin amazing tools" for emailing? And you would love to find all the tools presented? Or maybe you couldn't make it, in which case you're lucky to have avoided my workshop on "F*ckin amazing tools"But you're still curious to see what it's all about? So here's a little recap, let's get the ball rolling!

When I started to prepare this workshop, I didn't expect to end up with more than 40 tools actually... I got a bit carried away. Basically, it's a 45 minutes workshop, so well... The calculation is quickly done, no need to leave Saint-Cyr as my mother would say. So we had to sort it all out, by category! So we'll try to find our way around with some "species" of tools, to make things a little more readable.

Let's agree that this workshop was about tools on the parts Design and Integration If you think you can find tools to test your deliverability, go the other way comrade! Moreover, by tool, I mean "generator". (at least most of the time) not "Resources/articles/blogs". If you want to find this type of information, you make a tour on our blog site (from one, first)or go to the site thebetter.email by Jason Rodriguez (of two. By the way, I don't understand, I'm still not in the list of influencers... I have to make a claim...)

Mockup

Mockup, or model of a user interface. A deliberately simplistic mockup where functionality takes precedence over the aesthetic aspect. The mockup allows above all to think ergonomics and user experience.

Balsamiq

https://balsamiq.com/

The goal: to help the world get rid of bad user interfaces. Focus on structure and content, the first step in the design process: The wireframe (with emphasis). We forget the graphic layout, the aesthetics, the design, we focus only on the structure and content to offer ergonomics, information placement, reading and user comfort.

Placeholder

https://placeholder.com/ or https://betterplaceholder.com/

Generates custom images on the fly by simply entering the size of the image in a url. Possible to insert images in a code directly, via a url. Allows you to think UX and UI first (and peacekeeper). Those who have just attended our training on HTML code for emailing had the opportunity to test it, again, and again, and again...

Design

All the elements that contribute to the visual appearance of a product, in this case, an email.

Pixlr

https://pixlr.com/

Online photo editor, for quick and professional retouching, for free. Crop, resize, cut, remove background, add text... Photoshop in light and free version, like a freedent (ouhhhh this is a good one, I have to note it for my next show in Vezoul).

Vectr

https://vectr.com/

Free online vector design software. Possibility to share creations. Also here, a simple and intuitive version of Illustrator.

Subtle Patterns

https://www.toptal.com/designers/subtlepatterns/

Okay, I see where this is going. I know, I said I was talking about generators, not "resources". But gee! Patterns, do you want some? HERE IT IS!!! Royalty-free, free, for infinitely repeatable textures and patterns (cf Outlook and its f* cking background images)...

Remove Bg

https://www.remove.bg/

The magic tool, like a wand! (This is a fine one) Ch'bim , we remove the background of an image in a blink of an eye. It is well named. It's like Port Salut, it's marked on top... If you're not good at clipping... You'll have to improve! In the meantime, it's made for you !

Resources

Financial means, income. Possibilities of action of someone, intellectual means at his disposal. Material means, products that a country, a region can dispose of in such a field. Means, possibilities that something offers. Yeah, I didn't really know what to put as an intro for this part, I copied and pasted the Wikipedia definition, here it is.

Unsplash

https://unsplash.com/

Beautiful, free photos. That's the literal translation of the tagline. The most generous community of photographers in the world. Millions of photos, very aesthetic, free of rights, in high quality. A gem. Go there right now !!!!!!

Absurd Design

https://absurd.design/

Surreal illustrations on a transparent background that make sense, paradoxically. Let the imagination of your recipients fly... Well, not too much. New illustrations regularly. We don't know yet who created this site, if it was originally an end of year project for an Illustrator trainee or not, but I really like it.

Undraw

https://undraw.co/

A regularly updated collection of thematic illustrations in SVG format. Totally free. Super easy to use. Practical parameters in addition (choice of main shade). In short, happiness, it feels like love!

Love email animated gif

Streamline

https://app.streamlineicons.com

More than 30 000 icons, self-proclaimed the largest icon library in the world. Only that. 53 categories, 720 sub-categories... The icon as a new means of communication, I say it loud and clear.

Icomoon

https://icomoon.io/

"You'll give me the little sister!"
"The same then?"
"Yes, you'll give me the little sister," I said.

Animated gif

The animated gif is a gif file comprising several images that allow to obtain an animation with successive displays in loop. The number of repetition of the loop can be limited to avoid a phenomenon of irritation of the Internet user. The animated gif in an email is your friend. Well, in small doses, but still, it can be your friend!

Ezgif

https://ezgif.com/

You don't understand anything about animated gifs... You don't know how it works, how it's done, how it's cut... Take a video and let ezgif do it (with the northern accent, there was "Bienvenue chez les Ch'tis" last night on TF1)He takes care of everything...

Code

Emails are coded in HTML and incorporate CSS, just like any other web page. But coding an HTML email is not the same as coding a web page. It's more complex. Well, not necessarily with the tools we present, but in general... Oh well, I say what I want!

Backgrounds.cm

https://backgrounds.cm/

A nice tool to automatically generate a VML code to display background images correctly on this damned Outlook (without any Brandbashing). Be careful, there are things to know... For that, there is a nice little FAQ a little lower on the site, go have a look, you will find happiness as Chico said.

Buttons.cm

https://buttons.cm/

"You'll give me the little so... " Oh no, I've already done that one. Be careful my friend, it is not always compatible with the code generated on backgrounds.cm. And that is the little extra of the Periglio house!

Howtotarget.email

https://howtotarget.email/

How to target an email client? No it's not a question, it's the translation of the url in fact... Hacks found by Mark Robbins, Jay Oram... A gem, I can't say otherwise. Gentlemen, I worship you!

Detergent.io

https://detergent.io/

"Because I know what color white is... It's white... Less white than white I guess... It must be light gray... But more white than white... ". To clean/format/encode your HTML codes. And you'll inevitably need it too, you know!

Nu Html Checker

https://validator.w3.org/nu/

A tool to check and validate your HTML code, with settings to ignore certain coding methods specific to emailing. I admit, at the beginning it's a bit of a hassle, but very quickly, you won't be able to do without it!

Pea of the images

How to optimize the weight of images, not only for a faster sending time, but also for a maximized deliverability, an optimized reception time, and a reduced carbon footprint.

Squoosh

https://squoosh.app/

The instrument to have at handto squoosh your images with a simple drag and squoosh, reduce their squoosh, and improve the final squoosh of your squoosh folder...

Rick and Morty fuckin amazing email tools

Tiny JPG & Tiny PNG

https://tinyjpg.com/ & https://tinypng.com/

All the same, but not in detail. That is to say, we go in with a shovel, we bury the whole thing (all your images) and we get the optimized images directly. This is the main advantage: batch processing. It goes fast, it goes very fast! On the other hand, no preview of the rendering change. But somehow, I feel like saying, who cares...

Here we are... So, happy? And if you think it's over, there's more, but it'll be in a second article... Yep, I'm feeling like a screenwriter who would like to create some suspense. And next time, come directly to EMDay! You won't have to read my lame jokes and cheap movie references, and you'll meet a lot of nice people over a cold beer and a game of pétanque! And if you want to keep up with the latest tools for any email designer or integrator, you should know that we have created a dedicated channel on the slack emailgeeks. One more reason to join us!

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

Leave a Reply

Your email address will not be published.