Email Design: 9 Apps and Plugins to Streamline Your Design Process

Saturday, July 01, 2017 Listrak 0 Comments



When it comes to email design, time is extremely important – especially as you ramp up for the holidays. We want to create gorgeous, user-friendly designs, but we don’t want to take forever doing it. That’s where apps and plugins come in handy!

Here at Listrak, our creative services team spends each day crafting beautiful emails for our clients with the aid of our favorite apps and plugins. Not only do they help us design awesome emails, but they also save us time!

Our team is constantly sharing new apps, plugins, or tips to help each other out – and I’m going to let you in on a few of our favorites.


1. Wordmark
http://wordmark.it/
Tool classification: Website
A suggestion from Matt

Similar to a lot of font websites, Wordmark displays how a particular word or phrase looks in different fonts. The key difference here is that instead of displaying different fonts for download, Wordmark shows what your text looks like in the fonts already installed on your computer. Instead of fumbling through a Photoshop menu or scrolling through a font list, you can browse through a simple interface and find that perfect font.



2. CSS Peeper
https://csspeeper.com/
Tool classification: Chrome extension
A suggestion from Michael 


CSS Peeper is a designer-centric CSS viewer that allows you to easily find styles or elements on a site directly in your browser. No more fussing with “Inspect Element”! Instead, view the site colors in a convenient list, examine styles of specific elements by selecting them, or scroll through the available site assets.

This time-saving extension helps your designs stay consistent to the website as you bounce from design software to code editor.



3. Nimbus screenshot
http://nimbus.everhelper.me/screenshot.php
Tool classification: Chrome extension
A suggestion from Alannah

Most designers know the struggle of trying to capture screenshots of websites right in the browser. Sure, snapping a quick section on the screen isn’t too bad. But what about when you want the entire site from header to footer? Then, when you want to share it with some notes, you need to open a new program.

Enter Nimbus screenshot. This simple tool packs a punch, allowing you to snap, edit, notate, and share right in your browser!



4. Cross Browser Testing
https://crossbrowsertesting.com/
Tool classification: Website 
A suggestion from Jared

CrossBrowserTesting allows you to test sites and designs on many of the browsers and devices used by your audience. Of course the design looks beautiful on the latest version of Chrome, but have you seen what it looks like in Internet Explorer 10 on Windows 7 (where 19% of your site's traffic comes from!).

This site makes testing as easy as logging in and choosing what browsers and devices you want to view. There's no need to create a virtual machine for each platform or stock a room full of phones and tablets! CrossBrowserTesting is there to help make rendering and troubleshooting your designs a breeze.


5. The Stocks
http://thestocks.im/
Tool classification: Website 
A suggestion from Michael

Looking for amazing, high-quality stock photography, color palettes, icons, videos, and fonts? The Stocks is a single access point to tons of sites with amazing assets. And it’s all free! The Stocks is perfect for saving time and money without sacrificing beautiful design.



6. Character Entity Reference Chart
https://dev.w3.org/html5/html-author/charref
Tool classification: Website 
A suggestion from Tanya

In our industry, we often need to use special characters like letter accents or copyright symbols. You pick up a few here and there and memorize the codes, but there are so many that it’s hard to remember them all.

This is where Character Entity Reference Chart comes in handy! This site is an extensive compilation of special symbols and their corresponding HTML code. Now your special characters will simply flow within your HTML, maintaining the same font and styles as the rest of the text.


7. Dropmark
https://www.dropmark.com/
Tool classification: Website
A suggestion from Elsie  

Dropmark is an internal portfolio your team can use to reference past projects in a single, organized environment. Whether you want to reference an email’s code or just need some inspiration, Dropmark is there to save the day. The site’s tagging feature makes it easy for the team to collaborate and inspire each other, and the integration with Slack sends notifications when a team member adds new pieces. There’s even the ability to add text files to store intricate or rare coding snippets for future use!

8. Emmet
https://emmet.io/
Tool Classification: Code editor extension
A suggestion from Marshall

Emmet is a web-developer’s toolkit that can greatly improve your HTML and CSS workflow.

Most text editors out there allow you create snippets of code for reuse. While snippets are great, you have to define the snippet first and you can’t extend them in runtime. Emmet takes the snippets idea to a whole new level: simply type a snippet like “a” and hit tab. Emmet then converts “a” to “<a href=””></a>”. Cool right? Check out Emmet’s cheat sheet to see all the crazy functionality built into this little extension.

Are you ready to have your mind really blown? You can create your own custom snippet library for frequently used common code! The Listrak Creative Services team leverages this to make sure the basics like call-to-action buttons are always perfectly coded for optimal user experience. We keep our library updated with all the new inbox fixes and requirements so we can ensure emails are always rendering well.




9. Libraries in Photoshop CC
A suggestion from… ME!



Now that you’ve heard from the rest of the team, I’ll share one of my favorite tools with you, too! Built into Photoshop CC is the “Libraries” pane. It’s actually kind of like Emmet (above) for Photoshop! You can create a library of common elements to add to any document, with a collaborative option to share with your whole team! You can even add color palettes to help easily keep your designs on brand. No more folders of social icons and post-it notes of color codes everywhere! Everything is right there in Photoshop. Adobe has some great tutorials and information on Photoshop Libraries to help you get off the ground.

Do you have any go-to apps or plugins you love? Share some in the comments!




Melissa Lobach
Graphic Designer



0 comments: