How Can Email Developers and Designers Work Better Together?
They say teamwork makes the dream work, right? But let’s be honest. There are times when communicating and collaborating with colleagues is more like a nightmare. Too often, that’s the case with email design and development.
There are plenty of reasons why email developers and designers struggle to work together:
- Sometimes it’s a lack of design knowledge or coding skills.
- Other times it’s a lack of understanding around email’s limitations and capabilities.
- For agencies, it could stem from clients with unreasonable expectations.
- An email developer who refuses to try new things could also be problematic.
However, when email developers and designers share knowledge, find common ground, and agree on best practices, amazing things can happen in the inbox.
My colleague, Sr. Graphic Designer Francois Sahli, and I have been working together for less than a year at this point. Yet, by combining our areas of expertise and developing repeatable processes, we’re moving towards a more streamlined and flexible way of doing things.
Francois and I recently talked about what’s working for us. We also asked some peers from the email geeks community to weigh in on the topic of email developer and designer collaboration. That includes Anne Tomlin of Emails Y’all, Shannon Crabill of UnitedHealthcare, as well as Ben Clay and Weng Lam from the agency ActionRocket. You’ll get advice from all of us on how email developers and designers can work together.
Jump to a section in this article:
Table of content
-
01
Collaborating in different jobs and situations - Email teams of one
- Working as a freelancer
- Working in a digital agency
- Working in a large organization
-
02
Tips for ongoing email collaboration - Expanding your knowledge and knowing your limits
- Building an email design system
- Tools for better email collaboration
Collaborating in different jobs and situations
Every job opportunity, marketing team, or client presents its own communication challenges and advantages. In some situations, you may have complete control over email design and coding. In other cases, you’ll have to do your best to bring another person’s ideas to life.
Here’s some advice on getting things done in four common career scenarios:
Email teams of one
There have been times in my career when I’ve been what you could call a “lone wolf email marketer.” And that sort of job definitely has its ups and downs.
When you’re an email team of one, you have control of almost everything from start to finish.
On the one hand, you’re in charge of writing, designing, and sending emails the way you think is best. If you have an idea or want to fix something, you just do it. The only thing everyone else cares about is whether the email went out on time and looked decent.
On the flip side, you’re handling everything, and you may be working all alone in a silo. You’re missing out on getting the opinions and perceptions of other people. There are big benefits to getting feedback from teammates with different levels of experience and expertise.
As a one-person show, you have to build in a lot of time to handle all the steps of the email production process. At some point, maybe because the company grows or increases the frequency of emails being sent, it’s no longer realistic to operate as an email team of one.
In one of my previous roles as a solo email marketer, I was sending out an email nearly every day. Even though I had templates and wasn’t hand-coding every email, it was still a lot of work for one person to handle.
Takeaways for email teams of one
Enjoy your freedom! But if you’re going it alone, don’t hesitate to reach out to colleagues or others in the email geek community for advice and ideas. When the workload gets to be too much, make sure to let people know that the success of the email program could be impacted without more help and resources.
Working as a freelancer
Freelance email developers may work alone, but they often find themselves collaborating with their clients’ design teams. That can be quite the challenge.
Not only do you have to learn different brands’ styles, but you also have to learn how to work with different personalities and people with varying levels of email experience. Anne Tomlin knows this situation well. She says one of the most common issues with being a freelance email developer is turnaround time. Not every email design is created equal.
“The time needed to code an email is directly related to the design’s complexity. Clients don’t always know if they have complicated designs, or they might expect me to take inaccessible shortcuts like making text part of an image – gasp! I would never! — so they might not account for enough coding time.”
Anne Tomlin, Founder, Emails Y’all
Anne says the toughest challenge for her is explaining the impact of dark mode on email designs. For clients who are unfamiliar with dark mode and email, it’s hard to understand why their preferred colors are changing for some subscribers. Anne needs to explain that she’s able to control colors in Apple Mail and iOS Mail and make text white in Gmail and Outlook. However, not much else can be done.
“I always bring this up in the discovery call so that we can discuss design changes that might be needed, but I don’t think it truly makes sense until they see the first-round build. There’s usually some back and forth about how this isn’t a code-related issue and that I’ve done everything possible to duplicate the mockup, but some email clients just aren’t as good as others.”
~ Anne Tomlin, Founder, Emails Y’all
Takeaways for freelancers
Here are a few things Anne recommends when freelancing email design and development:
- Establish a standard turnaround time of two weeks with one week set aside for coding.
- Always get layered files to work with during development (no jpegs or PDFs).
- Never use “cut assets” from the client.
That last tip is because white space around images can cause scaling issues for different screen sizes. You should use padding and spacing instead. Plus, by cutting out her own image assets, Anne can make sure they are optimized for retina displays.
Finally, here’s Anne’s tip for working with designers who aren’t accustomed to being confined to the tables that are used for HTML email layout.
“When an in-house design team doesn’t have much experience designing for email, I tell them to think of email as a grid. They can use only squares or rectangles on that grid, and none of the squares or rectangles can intersect; they can lie on top of each other, but never intersect.”
~ Anne Tomlin, Founder, Emails Y’all
Working in a digital agency
Designer Ben Clay and developer Weng Lam both work on emails for ActionRocket, which is an agency that specializes in email marketing and other digital communications.
Ben says one of the advantages of working for an agency with an email focus is that everyone gets to know how things work (and what doesn’t work). He says it’s easy to forget how challenging that was when he first started designing emails.
“If I take myself back to my days as a young carefree designer who found himself falling into email, it certainly came with its complications! At the time, I had no idea there were so many restrictions, and there were certainly moments where I found myself being sent back by the code team to completely strip back my beautiful design.”
Ben Clay, Designer, ActionRocket
Of course, even when everyone on the team understands email’s limitations, you still need to work to educate the clients you serve. Weng says he wishes everyone knew that there are significant differences between web and email development.
“I would love for clients to know that the email they send won’t look exactly the same to everyone! There are so many email clients with their own way of rendering the code that there will always be some slight differences. I used to work in front-end development and it was possible to make a website look the same on almost all web browsers, but email has so many more quirks.”
Weng Lam, Developer, ActionRocket
Takeaways for digital agencies
Weng’s advice is to make sure there are realistic expectations from the start. When designers are aware of the restraints of email, they’ll be less likely to over-promise in the ideation and prototyping stages. Weng says the last thing you want to do is disappoint agency clients.
“We never want our clients to have to compromise when it comes to a design they want, and it’s always satisfying when something they love can be brought to life with code.”
~ Weng Lam, Developer, ActionRocket
Ben also recommends getting everyone on the same page from the start. Agencies like ActionRocket will use a project brief to define the work, responsibilities, and deadlines. But briefs are an excellent tool for in-house teams too. After that, Ben says it’s all about continuous communication.
“I always aim for whoever will be building my designs to look at them at each stage. This helps to ensure we’re aligned from the very start. We will both know the problem we are trying to solve, but a developer may suggest ideas that a designer didn’t know were possible, and a designer may look at it from a more creative angle.”
~ Ben Clay, Designer, ActionRocket
Working in a large organization
Being a designer or email developer at a large organization comes with its own set of complications. Shannon Crabill is a developer for UHC, one of the biggest healthcare companies in the US. She also has graphic design experience, which undoubtedly helps her communicate with designers.
That’s extremely important in an enterprise organization where new people join the marketing team all the time. Shannon says taking the time to explain things to email newbies and giving them the chance to ask questions is worth the effort.
“I've found that, if possible, one-on-one time with the new designer or marketer is a good way to give them insight on the challenges and nuances of developing emails. I've had new designers shadow me for half an hour, which gives them the opportunity to see an email come from a designed concept to coded and tested. It gives them a chance to ask questions and for you to explain why some things may change or not be pixel perfect.”
Shannon Crabill, eCommunications Consultant, UHC
Shannon also says certain people on the marketing team will benefit from checking out email analytics. Seeing some hard numbers helps them understand why one approach works better than another.
In a large organization, email geeks may also find themselves advocating for email as an effective marketing channel. Of course, an experienced email marketer can also explain the intricacies of email strategy. Shannon wants the marketers she works with to understand that emails aren’t used the same ways as web pages, and they aren’t digital brochures either.
“People interact with emails in a very different way than print or a webpage. The goals, layout, design, etc. of an email need to be handled accordingly. Email is interesting in that you can interact with someone almost directly. Email is personal. But it's a delicate balance of trying to connect with someone, to stay relevant while competing with other emails, and not sending to someone too much.”
~ Shannon Crabill, eCommunications Consultant, UHC
Takeaways for large organizations
If email is a major part of your marketing and communications strategy, make some standard email training part of the onboarding process. Someone who’s spent most of their career developing or creating content for websites alone will certainly learn some valuable info.
A specific section for email design in your brand style guide that illustrates the ways colors, fonts, images, and more are used will also help. Highlight what’s different about email design in comparison to print, web, and other channels. Provide some basic email design dos and don’ts to set boundaries and establish best practices.
When email developers and designers work together, it’s important to decide what your goals are first. What’s the reason for the email? When you know that, you can work towards the best way to design and code the message.
Understanding the purpose of an email is essential to good design and development. It’s not really about your brand guidelines or what you’re capable of building. It’s about what’s right for your subscribers.
“When email developers and designers work together, it’s important to decide what your goals are first. What’s the reason for the email? ”
Megan Boshuyzen, Sr. Email Developer, Sinch Email on Acid
Tips for ongoing email collaboration
No matter what type of company you work for, or what type of email marketing project you’re undertaking, there are some surefire ways to improve teamwork between email developers and designers.
Expanding your knowledge and knowing your limits
When designers know a little bit about coding, and developers have an eye for design, it can be much easier to communicate. Luckily, that was the case with me and my design partner, Francois. He brought some knowledge of HTML and CSS to the table, and I’ve been employed as a graphic designer doing branding and working on award-winning children’s books.
It’s great when a designer knows some HTML. Stripping it back to knowing how tables work is ideal, and understanding general content hierarchy, such as headings and paragraph tags, are probably the most important elements to understand.
Of course, in some cases, a designer’s coding experience can cause problems. As mentioned, there are significant differences between web and email development. Francois says that can cause communication failures between designers and email developers.
“Sometimes things you may not be aware of as a designer can be very important in email marketing. Take font stacks as an example. You could have a great custom font that your brand is using everywhere. But no one will see it because email clients will default to something else.”
Francois Sahli, Sr. Graphic Designer, Sinch Mailjet
In my opinion, there are a few things designers should try to avoid due to email’s limitations:
- Due to limited support, video in HTML emails is usually a non-starter.
- Animations are tough to pull off beyond basic hover click states for buttons.
- Overlapping design elements is possible but you can run into rendering trouble with some email clients.
The truth is, not much is out of the question in email development. But building an acceptable experience for every inbox is going to take time and effort. For more complicated email coding tasks, teams need to decide if it’s worth the investment. There are diminishing returns when only a small portion of your list can experience something like video in email.
That’s why Francois’ advice to designers is to keep it simple.
“As a designer, when you work on emails you have to be ready to simplify. Start with the fundamentals and create the most simple version of the design you can. Once you’ve established that base, then you can start iterating and trying something more complex.”
~ Francois Sahli, Sr. Graphic Designer, Sinch Mailjet
What Francois is talking about is what lots of developers would call “progressive enhancement.” Start with a basic layout, then layer in more and more enhancements. In email, we can also include fallbacks so that the people using clients with limited support still have a cohesive inbox experience.
Don’t be afraid to have discussions about what’s possible and how to pull it off. For example, could a GIF in the email replace an embedded video? There are even times when Anne Tomlin welcomes a challenge from the designers she works with.
“If the in-house design team is experienced in designing emails, I tell them to reach for the moon. Some teams have been told that a lot of things are ‘impossible’ in email, when really, they’re not impossible — just difficult or time-consuming. So they seldom try anything they haven’t done before. It is very rare that I can’t find a way to accomplish the look they want.
Anne Tomlin, Founder, Emails Y’all
Building an email design system
Once email developers and designers are on the same page, the next step involves defining processes and building a library of design assets and code snippets. A design system allows email teams to produce campaigns faster, yet it also provides more design freedom and flexibility than constantly reusing email templates.
“The best way for designers and email developers to work together involves some very classic advice. You need to work from a design system that includes basic blocks for email design and development. Those blocks can be reused in different ways, almost like playing with Lego where you can create many things with some basic bricks.”
~ Francois Sahli, Sr. Graphic Designer
Here are some essential steps for building an email design system:
- Take inventory of your current emails and determine the types of layouts and elements you’ll need to create.
- Start designing the basic, reusable components found in various emails:
- Headers and footers
- Buttons
- Commonly used icons
- Content sections (Title, image, text)
- Code the components so you’ll have reusable snippets for email development.
- Archive everything in a place where you can easily grab the code snippets and continue adding new design components.
Having a design system lets you deploy rapid iterations on your emails. Francois says you’ll be able to create a nice variety of email layouts with just 10 reusable blocks.
Even after you’ve got an email design system in place, there will still be debates and discussions between designers and developers. If you’ve figured out how to eliminate conflict, let us all know! Ben from ActionRocket reminds us that compromise can be a good thing.
“It’s really important to be open-minded when working together, just because you may not agree with an aesthetic choice or fully grasp a development hurdle it doesn’t mean it is wrong. The key to communication at any level starts with listening and having a collaborative approach, something we try to achieve with all our work!”
Ben Clay, Designer, ActionRocket
So open your mind. Open your ears. And while you’re at it – open your heart, too. We’re all human. We all make mistakes. That’s why you test your emails before you send them.
Tools for better email collaboration
The tools email marketing teams use to build, test, and send campaigns are also an excellent place for designers and developers to collaborate. They are extremely important points of communication for email teams working remotely or with teammates in different time zones.
For example, as an email builder and email service provider, Sinch Mailjet offers real-time collaboration features. This helps keep the discussion going as an email design comes to life while improving the team’s efficiency.
Collaboration between designers and email developers is also crucial during pre-deployment as you work together to fix rendering issues and other imperfections. Email testing with an automated pre-send checklist benefits the entire team. Sinch Email on Acid offers its own team management features.
Developers and designers work together on many types of projects – not just email. Get some ideas for how application developers and designers can collaborate in a new article on the Mailgun blog.