CW13
What software do you use to design email?
For the past couple of years I've been using Adobe Fireworks and Dreamweaver to design and develop email campaigns. Since Adobe has recently decided to abandon Fireworks (and I can no longer live with the bugs) I was wondering what software is popular with email designers?
Do you use Photoshop, Illustrator, Pixelmator or Sketch to design templates?
For HTML/CSS do you use Dreamweaver, Coda or Sublime Text?
Believe it or not even though Sublime and others are wonderful code editors, for emails I use Dreamweaver. The preview pane typically (not always) mirrors what Outlook will display which I find really useful considering they tend to be the most finicky clients.
Ditto That
+1
DW FTW!
Totally agree with the Outlook comment!
I love a good discussion on tools. I actually wrote about this a while back on my personal site, so that gives a good overview of my thoughts on the subject.
I know a lot of people start in Photoshop before moving into code, but I generally like working with the code first and using either Photoshop or, increasingly, Sketch for building out assets for a design.
When it comes to coding, I love Sublime Text. It's typically my go-to editor, but that could change in the future. I've been messing around with Brackets, which has a great live preview feature, allowing me to see changes to my email in Chrome as I code them. It's cool, but still a bit buggy to actually use all of the time. I can get the same results using a number of tools in tandem with Sublime Text. If I need to just trouble shoot a module of code or something, I sometimes use Codepen.
I downloaded the beta of Github's new Atom editor, too. I'm going to try to test it out in the next month or so, see if it has anything to offer.
Just read the piece on your personal site and totally agree with basically everything you wrote. I, too, use Sublime Text to code. However, will use Dreamweaver when I'm stuck on something for the preview pane (I hate myself about that more than anyone could).
Anyway, wanted to share something on your note about using Firefox vs Chrome in combination with Sublime Text. I prefer to use Chrome and in case there are any other Chrome diehards out there. To combat the lack of responsive design view in Chrome, visit: http://responsive.victorcoulon.fr/ and click and drag the link right smack dab center of the page to your bookmarks.
Personally, Dreamweaver's preview pane, while it was cutting edge 5 years ago, is so far from what is true to life now it's a joke.
I like Code Edge's Live Preview ability. You can check out Code Edge for free, it's also called Brackets(ok, it's not QUITE the same thing, but it's 99% the same thing).
I've been using Responsinator (http://www.responsinator.com/), but I like your link better since it has dynamic resizing and custom resolutions. The keyboard feature is a nice touch as well!
Ok but are those previews of responsive layouts in browser and not email client? Big difference.
I'm a web developer first and foremost, so I'm always happy to collect good development tools, even if they're not specific for email design.
Chrome Developer Tools built into Chrome provides responsive views, including presets for popular iphone and android devices. Not sure what you mean by lack of responsive views.
Big fan of Brackets too. Found it's pretty good at finding the random unclosed/opened <td> or something similar, when the nesting gets a bit too much. And there are a tonne of add-ons I'm still trying to wade through.
Have downloaded Sublime, but think I need to read up on how to set it up for me - out of the box, it's a little bit bland!
Thanks for your e-mail.
I am currently out of the office and will be back on Monday 1st September.
If your query is urgent you can forward it to shawkes@serif.com - if it is not, I will reply when I am back.
Thank you,
Joe Jackson
LOL
I design/code all the emails here at Litmus.
I use Sublime Text to code all of our emails. I use Photoshop to make all of the image assets. I rarely design an email first in Photoshop as we have a pretty well-templated style for our emails. I usually go straight to code & design as needed.
Coming from an agency background—I know that game, Clinton. We started educating clients to expect code as the mockups. We just dumped them on a protected server and sent them a URL with a login, which worked well. The ability to work in code from the outset definitely sped up development time, and it gave them a more accurate view of what the final product would look/feel like.
This would work well for in-house projects but my clients expect to see mockups.
Once designs are approved then I usually jump into Dreamweaver and start development.
I keep it simple, Photoshop & Dreamweaver :)
I work at a nonprofit with PCs, so cost and platform are big limitations for me. I've also been training some colleagues to work within templates, and have found that teaching them HTML and CSS was better than setting them up with any tools. It might sound crazy, but Notepad++ and/or Kompozer are the two coding tools I've installed on everyone's machine and built all of my documentation and screenshots around.
For images, I have Photoshop (CS5...) on my computer, but my colleagues mostly don't, so they're using Lightbox Image Editor.
Great suggestions for non-profit organizations and those with limited resources.
Code editor of choice: Sublime Text
Design program of choice: Photoshop
Build Tools: Grunt/Gulp
I love using Sublime Text because of all the useful plugins it has to offer and how fast it is. I mainly use Photoshop for my designs but, I'm interested in messing around with Sketch. I also sometimes just design in the browser. When I'm working with complicated charts that I have no time to figure out how many colspans and rowspans are needed, I'll bust open Dreamweaver and build the basic structure.
I use build tools such Grunt or Gulp to automate tasks such as linting, inlining, testing, and minifying my code whenever I saved my html file. I also use the livereload plugin that you can download for either system which refreshes the html page every time you save your document. This allows me to just focus on my code and not worry about all those extra steps needed for the final production code.
I have used the LESS Grunt plugin, which is pretty similar to Sass, and it worked fine. I was only using it to see if it would improve my workflow and concluded that it didn't for the type of emails I was building. That doesn't mean I won't look into it again in the future, but for now, I just work out of one document keeping the styles embedded in the
<head>. Then every time I save it, Grunt creates a separate production ready file.I'm moving away from Grunt and onto Gulp. I have found Gulp to be a lot faster than Grunt for what I do. I work multiple emails a day so I needed a way to handle all of the monotonous tasks like validating, minifying, inlining, testing, and screenshotting and do all of them fast.
All of the emails I work on are contained within one directory which Grunt/Gulp watches for changes. Specifically they watch for changes to a
template.htmlfile that I work out of as my development code. Then, whenever I make changes to one of them and save, Grunt/Gulp kicks in and creates an 'email.html' file that has the production ready code.Here's a list of plugins I use w/ Grunt:
I would love to hear how you use Grunt or Gulp in your email processing. Do you use Sass/Compass as well?
Ok... I'm going to troll for a bit here and please don't take offense as its all in fun. Why all the pre-processors and plugins? We're developing emails that stick to late 90s HTML. What's the sell on this workflow?
Personally, I agree.
Even in a pure web development environment, I don't see the advantage of SASS or LESS. I've actually found I code better/faster versus people that use those pre-processors.
I do get why they are cool, and I do like how they can amend css into a type of shorthand. I get it, I do. If I wasn't stuck in my current way of writing code, I might actually convert to it. But I don't see the value.
Speaking specifically for SASS, I don't even bother with it for emails. As Benjamin said, there are so many steps to compile it, then post it inline, it seems I could code it faster on my own.
However, it is AMAZING to work with. I started building with it in my last web project and I can't tell you how much of a time saver it is, even just to use the nested rules. And I know I'm not using it to its full potential (I haven't even started digging in to the functions).
LESS/SASS for email dev seems like it would slow you down. And for building sites I don't usually use it for small projects, but I've worked on large projects with multiple developers and LESS/SASS really helps. The organizational aspect of it was the key for me. To have one style sheet with thousands of lines of code is so hard to navigate. And, I did not have a choice in the matter, so I was forced to use it, but glad I did.
I've not started using grunt yet but looking to get it set up pretty soon. Here's why...
Most of our basic communications emails have the same header and footer on them. If I want to make a change I have to open each HTML file individually. With grunt I could do an include as we do with web development.
We send a lot of solus emails through our third party partners. Each one needs to be put in a template and have a tracking code added. With grunt I believe we could automate this process. We could even automate zipping up the files and emailing them over to our partners.
Some email clients truncate emails over a certain file size. Minifying can help with this. Again, this can be automated with grunt.
I've not played around with SASS or HAML yet but can see once you're used to coding with it, it'll speed up the production process. Simply because there are less lines of code to type. You do need to compile it but if you're running grunt for the above includes then you just add it to the task list and it'll all be done together when you run grunt.
Potentially I think you could also remove unused styles from a CSS boilerplate if you use one. I don't at the moment because of the code bloat but if this is possible I'll build one (probably with SASS)
As I said, I've not started this yet it's just a plan for speeding up our workflow. If it works really well I'll have a bit of time to write up my findings in more detail.
I've always been a firm believer in automating any repetitive task and have put myself out of a job a few times in the process - swiftly replaced by another job in the same company.
Design: Fireworks/Photoshop
I prefer Fireworks for designing as it combines all the tools I could use from Photoshop and Illustrator, but it's more simple than any of them. Also, it works great for slicing and optimizing images for email. When I have to do more image work (photographic retouching) I go with Photoshop.
Code: Sublime Text/Dreamweaver
I love Sublime Text but I end up opening Dream Weaver for complex emails. I don't like much wysiwyg editors, but I use this WYSIWIG tool to quickly locate the piece of code I need to edit.
I'm old school, still rocking the original version of TextMate. I love its simplicity, and I have a ton of custom bundles created just for email—for example I can type img and hit tab, and I've got all the makings of a bulletproof image tag for email:
I'll jump into Photoshop now and again to create images, but truth be told, I haven't created a full email mockup since my agency days. Plus, I prefer to maximize live HTML text and use as few images as possible.
I've actually been using Coda 2 a bit for playing around with development at night and so far I think it's a great editor. I've been trying to forego using Sublime Text (my usual editor) so that Coda gets a fair trial, and so far, I've been very happy. For web projects, the projects and FTP setup is beautiful. Admittedly, though, I haven't done much with emails in Coda yet. I did set up code clips for some email template stuff based on our Salted template, though, which should make creating new emails a breeze. Similar to Dreamweaver snippets, but without the bloat of Dreamweaver itself, which I like. The major downfall is that there aren't as many plugins as Sublime Text, and customizing the interface is limited to simple stuff like your syntax highlighting theme.
I am using Coda 2 for Email Development. I find it is powerful. I get a lot done with it. I too have code clips set up for many of the modular elements I use to keep the tasks from turning stale.
I like Illustrator for designing elements for email, mainly because I think that forces some nice flatUI thinking.... I use Code Edge for coding
?Coda?
I also Sublime Text 90% of the time. I've heard good things about Sketch but I rarely open up Photoshop when designing or putting together emails (I'm also on a PC =P ).
As a self taught 'newbie' to coding, my company refused to spend any money on software for me until it was proven it would be worthwhile, crazy logic but I don't control the purse strings, so currently I'm rocking Microsoft SharePoint, it's far from ideal but it gets the job done.
I'm at the point now where I think I could convince them to spend some money, but its working out what I want it spending on, what suits me best.
I prefer to code emails in Dreamweaver. The preview pane, multiscreen previews, and easy pop out to browser option make life easier as long as you take them with a pinch of salt. I prefer to build with a bit of a visual rather than straight into code but this is just a personal preference. Once I reach a good working design I throw it through Litmus and a couple of test accounts and iron out any issues.
Image creation and editing is done predominantly in Photoshop purely due to familiarity but takes a back seat to the code during the design process.
Code: Dreamweaver
Graphics: Illustrator for shape/gradient elements, Photoshop for everything else
Although I haven't done it in a while, I liked Fireworks for full mockups because it was pretty easy to build elements and, since I like to move elements around on the page before committing, easy to manipulate the layout. I only did that for potential clients though; no need to waste time on code if they weren't going to use it!
Some of these are good examples though (I've used Notepad++, but Sublime Text looks like a nice replacement) and I'll have to try some of these other programs mentioned!
If you liked Fireworks and happen to use a Mac, you may want to check out [Sketch}(http://bohemiancoding.com/sketch/). Definitely geared towards interface design, similar to how Fireworks is, and makes mockups pretty effortless. I find that I'm typically way faster doing things in Sketch as opposed to Photoshop, but still use Photoshop for heavy image editing.
Unfortunately, we're all running Windows. And I love my home PC too much to give it up for a Mac! Sketch does look like a very nice tool though, after looking through their features.
PS and DW, also use Virual Studio Code (have tried most of the other editors mentioned here) but find DW's live view makes editing links so simple (just click on the live view and it's highlighted in the code). I also reallllllly like the error checking feature in DW. Shows me any open tags and more.
I also LOVE git for quick uploading to test servers
Maybe a noob question here. Why don't more of you code directly in Litmus builder? I typically build in Dreamweaver and am new to Litmus, so I'm just wondering what your perspective is on workflow.
A good Adobe alternative both tool and price wise is Affinity Designer. Many go to Sketch but AD has Sketch qualities with an Adobe familiarity(Think of it like Illustrator with a touch of Photoshop). It can be a one-stop illustration tool too! As far as coding however, I just never made the switch from DW. I like the preview pane. I like having some visual version while working at the same time but I don't rely on it. Coffee Cup has a good alternative to DW in their HTML editor and the price is great.
I use Affinity Designer a lot lately for design (sometimes Affinity Photo). I agree completely with you, Paul. I'm trying to ween myself away from Adobe because I hate their pricing plans - BUT I do love Brackets. I think it is so much easier for front end dev than Atom. The editor is also so much better than DW, in my opinion.
I've tried quite a few IDEs, but seem to go back to DreamWeaver. I'm sure everything I do in DW can be done in the others (Notepad++, Sublime, etc.). My old reason was that DW's design view was pretty good, but now with everything being responsive, the DW design view is pretty useless.
I almost always design in PhotoShop. I like to use FireWorks for slicing though. I really like the way it handles slices over PS, but I guess I'll need to go back to using PS for that if FW does away.
Photoshop and Brackets.io
Photoshop / BBedit, tried other text editors and always come back to BBedit.
Adobe Brackets with plugins
Adobe Photoshop
And sometimes Dreamweaver for replacing image and text
I always like to use Sublime Text to design. It is the best best tool to HTML markup and CSS design.
Coding: DreamWeaver
Design: Illustrator/Photoshop - although I favor AI a little more :)
For bugs I've used Mozilla's Firebug feature to catch some code mishaps. Other than that, I try testing on different browsers and email clients to get a better look at the email layout across the board and troubleshoot any other bugs that might persist.
Hi Clinton!
I use link text Coda to code the site. I love it because I can organize my files very easily, organize folders quickly, drag and drop content into the program and more. I tried migrating to Dreamweaver but connecting to the ftp site was not as clear cut. When I use Coda, I can organize my clients into different databases and have access to all of them up front, without jumping from site to site. Also, there code error checker has saved me hours of perusing through code to find a break or missed snippet.
For design, I always use Photoshop. It is just easier to export web-friendly images using the slice tool and Export to Web.
Good luck in all your email endeavors!
Hi All,
I see that this post is 3 years old. But I am curious to know what software is most preferred by email designers. There have been a lot of updates in the last 3 years, so what do you like to use now? Thanks!
I'm personally a huge fan of Atom for the sheer number of community packages that make it endlessly configurable and customizable. (Plus it looks amazing). It's a trailblazer for “hackable” desktop apps built with web technologies (Electron).
Litmus Builder is also fantastic (of course)! How could you go wrong with an editor designed specifically for developing emails? The instant previews is a killer feature. I'm almost all-in with using Builder start-to-finish. There are just a few handful of features I have in Atom that aren't in Builder yet.
I'm interested whether Dreamweaver is still as popular as it was 3 years ago – does the web preview still render like Outlook?
I use Sublime Text because I love how the Snippets we have created make initial building so fast. I still use Dreamweaver because as a visual designer, it's faster for me to select an element in the design window and edit the highlighted text in the code window than it is for me to read through lines of code looking for the right element. I also rely quite a bit on the Expanded Tables view to troubleshoot display/nesting issues. Also, if there's anything blatantly wrong with the table code like missing closing </td> tags and stuff of that nature, DreamWeaver will display a blank design window, which tells me right away that something is amiss and I need to check my table structure.
Our staff has varying levels of knowledge of HTML/CSS, so we do most of our work in Dreamweaver because the preview pane makes editing easier for those with less development knowledge. For more complex work, we're transitioning to Zurb's Foundations for Email 2 and Sublime to build templates that can then be edited for content by our Dreamweaver users.
Sketch has been something that the senior designer and I have started to adopt to design our emails. We are long-time Fireworks users and we have no desire to us Photoshop for screen design. Sketch isn't quite there yet, but it's slowly getting to the point where it will replace Fireworks for us.
For HTML/CSS, since I'm a visual guy, I always use Dreamweaver just because of the preview pane.
There's an amazing Twitter thread happening on this very topic here.
For emails, I still use Dreamweaver.
The preview pane and the code hinting helps tremendously and considerably shorten my development time.
I use Dreamweaver as my main editor at work, but recently I have been using an App on my Android tablet called DroidEdit for coding at home and tweaking campaigns when I am out of the office.
I started with the free one and once happy that it worked on a 7" screen paid for the full app
Will check out Notepad++ though after a few mentions in this thread.
DroidEdit is fantastic, you won't find a better coding app on iOS or Android. But without a keyboard, I still don't really like using it unless it's for a quick edit here and there.
I like to use Sketch for design, the shared styles and Symbols feature help to make consistent designs.
Sublime text for coding, I have custom snippets set up for common patterns (tables, spacers, images) with their own tab triggers
Interested to know if anyone uses SASS as part of their workflow at all?
Alex, have you ever tried Adobe Brackets for coding? Also, what do you like in Sketch over Photoshop or Affinity Designer? I've tried Sublime and to me, Brackets does the same thing but easier. I did not have anyone to show me the ins and outs of Sublime so I can't say that Brackets is better for front-end dev. I like Sketch but my Photoshop friends over in the Brand Department can't open up any of my Sketch files! :)
Hi Daniel. I actually preferred Brackets for coding, but the only snag was that I struggled to set up custom HTML snippets in Brackets.
I wanted to set up custom HTML snippets for my common table structures (1 column, 2 column, spacers etc.) and be able to insert my snippets using keyboard shortcuts. I Couldn't set this up in Brackets, but found a way to do it in Sublime!
And with Sketch I like to use shared styles and symbols as it helps with consistency. Plus, most of the designers here have adopted Sketch so it makes collaboration easier. Good point about being able to open Sketch files though! Had a few issues sharing with external teams...
Look up "Brackets Snippets" (by edc).
Ok that definitely looks like it could fit my needs - thanks Daniel! :-)
I've used a number of applications in the past (eclipse, intelliJ, notepad++, ..etc) but recently I've been using Brackets (http://brackets.io/?lang=en) exclusively. It's fast and effective and free! I like that it doesn't require any of the 'project' setup that other IDE's I've used require.
As for the design, we generally stick with a set template (or two) but when something new comes down the pipe I generally get a design from our designer in Photoshop or Illustrator and I'll just build it from that. When I've designed them myself, I've used photoshop as well.
Dan, thanks for this, I just downloaded Brackets and this is a great editor.
I really like the live sync via Chrome for Brackets. It's nice to be able to see changes in real time while you're coding. That being said, I've found it to be buggy and crash too frequently for my tastes. Using an editor of choice along with something like LiveReload or CodeKit is a nice solution. Plus, with CodeKit, you can use things like preprocessors and set up a workflow similar to the Grunt-method some describe without having to worry about dipping into the command line tools.
I haven't had any issues with stability, but I've actually been using the Adobe Edge Code CC (beta) at work where I have a CC license (use brackets on my own PC). Adobe seem to keep the updates to a minimum which may make it a little more stable. Also, I don't use the live sync because I prefer firefox and firebug (old habits) when developing. I don't use less or sass so preprocessors aren't a huge deal either. Thanks for the links though!
I've only used the Mac version of Brackets, and admittedly it was a while back, but sync would repeatedly crash on me. Chances are they've fixed whatever was causing that since then.
I use Eloqua, but not readily available to most. Sublime is great for find replace and wild cards.
IMHO: Elequa is not an design nor development application- It's a deployment app with a built in wysywig
I have used it, it was very basic with zero development features - similar to Exact Target / Salesforce Marketing Cloud