Quantcast
Channel: EmailDirect's Hello Inbox Blog » HTML Coding
Viewing all articles
Browse latest Browse all 18

Email Design Tools Roundup: Builders Edition

0
0

From image to HTML converters, to bulletproof backgrounds and buttons and email HTML boilerplates, we’ve been keeping tabs for a while and rounding up tools that have emerged specifically for email design. We’re back with a couple new tools and this is an EXTRA SPECIAL AND EXCITING roundup because this one focuses on email builders!

It has FINALLY happened! The days of designing and coding frustrating and time consuming emails might just be over! During the past few months, the email design community has been bubbling under the surface, beta testing and providing feedback on tools that aim to be a total game changer.

In this post, we’ll be looking at InkBrush & Litmus Builder and checking out some their features, their approaches to creating emails and chime in on which builder might be best for different email needs and situations. Let’s get to it!

In our last roundup, we featured an email design tool called Mailrox – an online service that lets you slice images to create emails. It was perfect for those times when you have a promo image that may need to link to more than one URL. Mailrox has now evolved into InkBrush, using the same slicing methods as before, but now with so many additional features that you can now easily build an entire email from scratch without touching any code!

Inkbrush

Click for larger view

To get started, you would upload an email design comp and InkBrush will automatically discover the colors used – no need to have that list of hexcolors close by! With slicing tools and a REALLY COOL magnifier for pixel perfection, creating the layout of the email is quick and easy. Simply place lines to designate rows and columns while InkBrush builds out the table and it’s within those table cells, the magic starts continues to happen.

Inkbrush

Click for larger view

InkBrush includes options on how to format the cell: you can add text (and have TONS of styling options like font styles, sizing, colors, links, etc.), add your own HTML (handy for pros to insert their own snippets) or leave an image in the cell – whether it’s a blank spacer image or an image extracted from your uploaded design based on how your row and column lines intersect. To create a responsive email, upload your design comp for the mobile version and use the same slicing and formatting cell method and InkBrush will combine the two sets of code into one file to use when you export the HTML for deployment!

Inkbrush

Click for larger view

InkBrush works for both newbies and pros alike, but because of its extremely visual, hands-off the code nature, beginners will find it easy to use while pros may find not having access to the code right inside the builder a little limiting (but there is an export option to download the code).

The ability to create responsive design is super convenient for beginners who don’t want to figure out which coding method works best when they don’t even want to deal with code at all. More experienced users might skip over having to create a separate design comp for mobile and instead, export and tweak the code on their own and add media queries and CSS sets. If you’re in between – that is, you can code email but not responsive email – I recommend creating the extra design comp and using InkBrush to develop the code and use it as a customized learning reference!

Check out InkBrush >

 

 

Like InkBrush, Litmus Builder isn’t completely new to the scene – it started out as a Hack Week project by developer, Jordan MacDonald over at, you guessed it – Litmus!

Litmus Builder was initially used as a responsive email editor to tackle the hassle that comes with coding and testing responsive emails for different devices. It has since morphed into the “first email code editor built for email designers by email designers”, making this tool better equipped for those who are willing and okay with rolling around in code.

This is truly the first email code editor, as we’re left to use Dreamweaver, Coda and the countless other code editors meant for web development. In addition to being specifically for email development, it’s web-based, unlike Dreamweaver, so there’s no downloading software and using hard drive space.

Litmus Builder

Click for larger view

One of my personal favorite features is the Grid View – turning it on allows you to inspect the frame of the email and by clicking rows, columns and cells in the Design panel, you can easily select the corresponding lines of code in the HTML editor. The Grid View is especially useful for seeing and understanding the hidden structure of tables.

Litmus Builder

Click for larger view

Speaking of tables, one of the challenges we face when coding email, whether novice or seasoned, is the sea of HTML tags. Web development is constantly evolving to minimize the amount of code we need to build pages and apps (thank you <div> and jQuery) but when it comes to email, it seems we add MORE to the code as things evolve, new email clients are released and need additional tags and now lots of CSS for responsive. So I was quite appreciative to see, in the HTML, dotted lines that connect closing and ending tags – sometimes an ending </td> might be 300 lines away from its starting tag and when you’re facing a deadline, you’re just not in the mood to go on a scavenger hunt through your code.

Litmus Builder

Click for larger view

Most times when coding and testing responsive email (locally on our computers, not email testing), we have to either install an add-on to our browser to mimic different screen resolutions or manually resize the browser and take our best guess. Litmus Builder eliminates the need for all that with the ability to switch between Desktop view and Mobile view right in the Design panel – this is AWESOME for making updates and seeing them apply in real time to mobile versions!

Templates

Click for a larger view

Just because Litmus Builder focuses more on handling the code, it’s not a requirement to be a master at email coding – they provide an ample amount of templates to use as a starting point and is perfect for mid-skill folks wanting to beef up their experience.

Check out Litmus Builder >

 

The release of these two builders demonstrates the power of the email design community and how the email design profession is growing in popularity and demand. The role of an email designer was once overlooked and misunderstood, often grouped together with website designers and developers and it’s nice to finally see some separation.  For folks like me, who practically live in email code land all day, it’s a big deal because these tools are like Dreamweaver and Photoshop for us and just like Adobe, InkBrush and Litmus Builder will only continue to get better over time to solve new challenges that await us.

After reviewing these two builders, it’s clear there isn’t a “Battle of the Builders” – one isn’t better than the other – but each addresses the needs that plague newbies and pros and they both did a really good job providing features that solves the most common issues for both groups.

Even though these builders are intended to make creating emails easier and regardless of your skill level, you’ll still need some free time and patience (anything new has its own learning curve). You should also be okay with messing up a few times and maybe even starting over a time or two. Once you get the hang of either (or both) builders, you’ll immediately begin to experience the fun and creativity that comes with being an email designer and have a more efficient workflow!

Until next time, happy designing!


Viewing all articles
Browse latest Browse all 18

Latest Images

Trending Articles





Latest Images