From Designer to Developer: An Email Maker’s D&D-Inspired Journey

Think email is just pixels and code? Jessa Moon begs to differ.

In her whimsical and wisdom-packed Unspam 2025 keynote, Jessa, an email developer and designer, guides the crowd through a mythical hero’s journey of email mastery. Blending personal experience with a deep understanding of accessibility, design systems, and collaboration, she offers a powerful reminder: email magic isn’t reserved for sorcerers. It’s available to anyone willing to learn, like a wizard.

With her “character sheet” in hand, Jessa champions curiosity, empathy, and teamwork as the real growth engines in a fragmented digital world.

TL;DR:

• A great email starts with understanding, not just aesthetics or code.
• You don’t have to know how to code to make developer-friendly design choices.
• Accessibility, flexibility, embellishment, optimization, and resilience are the five pillars of a powerful email.
• Modular systems and shared language between teams unlock speed, creativity, and sanity.
• Don’t go it alone. Find your party, build your toolkit, and level up together.

Get ready to rethink your approach to email, one roll of the dice at a time. 

Jessa Moon: Greetings, fellow adventurers and citizens of the great Kingdom of “Unspamalot”.

As Logan said, my name's Jessa Moon, and today, I am here to invite you to join me on a great quest to succeed. Each one of you will need to demonstrate courage, cunning, and collaboration, but I believe that with time and dedication, you will have the opportunity to create email magic.

Before I get too far into this, you may ask yourself, “Who is this stranger, and why is she talking to me?” Well, again, I'm Jessa Moon. I have worn many hats in my life. Some of them are silly, and I have carried many titles. Some are also silly, but today, I am a humble storyteller and guide today. It is my hope that, through telling my story, I can offer you a few tools as you go out on your journey. We start with the hero's journey. Each of us has followed our unique path as we've traveled here today, and we all are the heroes of our unique story. My story begins in a village by the shore where a younger version of myself dreams of becoming an artist and practitioner of the fine arts.

When I came of age, I traveled to the halls of high academia, where I studied the great masters and honed my skills as an artist. There, I learned that I could take a vague idea and make it into reality using an iMac, a magic mouse, and an inkjet printer. Soon, I redirected my studies towards the graphic arts, but traditional media was not enough for me. My mind had been opened to the deep mysteries of the World Wide Web. And I longed to understand it. So, by day, I studied art; by night, I experimented with HTML and Angelfire.

Okay. You all know, you know. As I started conjuring code, the first spell that I ever learned was View Source. I used it to peel away the surface of my favorite websites and dissect the language that made them work. And as I coded my first table-based monstrosity, there was so much that I had to learn. For those brave enough to venture past its animated gif iron gates, there were flaming text and angsty poetry. I have come so far, and when I was finally ready to leave the halls of high academia clutching my certificate of computer print graphics, I ventured out to the illuminated lands of “Designia”, and there, for several years, I worked with a sign maker shop.

Putting graphics on everything from magnets to a monster truck. I got to put flames on the side of a monster truck. Then, I transitioned into a role with a local direct mail marketing company. There, I designed, printed, folded, and cut just about anything made out of paper. And when I was not working or tending to my paper cuts, I was still indulging in my curiosity with code. Eventually, one day, my boss came into the office and said, we need a new website. And I just raised my hand and offered to lend my services, and soon enough, we had a shiny new website, and I had a shiny new dual-title: designer and developer.

And with that title, I transitioned into a role with a marketing agency that was looking for someone who spoke the dialects of Adobe and Dreamweaver. I entered the world of email as an inexperienced squire coding table-based, image-based email blasts. Whew. Those were the days. With time, I learned the alchemy of accessibility, and I learned modular design and worked my way up from that inexperienced squire to a role as a code smith crafting responsive email for over 150 individual small business clients.

When I decided I was ready for a new adventure, I looked into the depths of the “Devlands” and searched for a role in development. Specifically, I spent time building my character, working with brands and building their email code bases from the ground up. Though I had abandoned my designer title to some extent, I used my design know-how daily. I discovered, working with designers in the sort of assembly-line model of email production, where it starts in one team and then gets passed to another team and then gets passed to another team, that even though the designers I was working with—even those who had worked in web design—were fantastic as typists and illustrators.

They were creating brilliant designs, but they knew very little about email or how email rendering worked. Occasionally, I would have to send designs back because they had sent me something that just couldn't be done by email, or I would have to spend a lot of extra time creating custom solutions to get around a particularly tricky design element. And now and then, someone would come to me when I solved a particularly tricky problem and say something like, “Jessa, you're a wizard”. And I would have to respond, no, I'm not a wizard. I've just been doing this for a while. I had spent time building my character as an email designer and developer, and I happened to have tools and skills that my colleagues didn't. So I decided that moving forward, anytime somebody was willing to listen, I would take a few minutes to help them understand what I did better. The point I tried to make to people as I welcomed them into my pool of knowledge was that you don't have to know how to code to understand development.

There are a set of concepts that you can learn. As you grow to understand them, they will help you design or plan, strategize in a way that plays into development, and that opens up a lot of doors to what you can do—what kind of possibilities you have for your email campaigns—just by understanding a little bit more about how email development works. So, my suggestion is to start with the basics. Again, you don't have to code, but just grab those basic concepts of development and then identify your areas of strength and weakness and gradually level up as you go.

In the world of Dungeons and Dragons and tabletop gaming, players start with a character sheet. It's a tool that lets them identify their character's history. They can write down their backstory, identify their occupation or class, and then get a set of points that they can assign to a variety of skills and spells and tools and that sort of thing. Well, I see no reason I can't take that concept of a character sheet and apply it to the world of design and development. That's what I've done. Behold your very own adventures in email design and development character sheet. We will not spend much time going through this entire thing because we don't have that time today, but I have taken it—the things that I think are important for designers or marketers in general who are working in email—things that they can know and learn to help them understand how email development works.

Because the more you know about something, the easier it is to work with. I have broken this down into five categories and just made them up. They're unlike any official development thing, but I tried to lump concepts into five different categories as a simplification. And I'm going to make this sheet available for you. There'll be a QR code at the end of the presentation so you can grab it. You can use it as a study guide. You can use it as a QC checklist. You can use it as a learning tool to give to your coworkers. But hopefully, it will help you, as you leave here, track down some of these concepts.

But I'm going to briefly touch on some of my favorite points, and we'll go from there. So the categories are: accessibility, flexibility, embellishment, optimization, and resilience. And again, I just made those up because I could. There are concepts in here that could fall into multiple categories, or you might throw them into a different one, but I'm the one standing up here, so I get to say. Starting with accessibility, I will touch on some basics. Then, there are bonus actions for each category, which are concepts that you can study after you've got the basics down to level up.

When we think of accessibility, we tend to think of absolute, total visibility or the obvious static, visibility issues. But it's essential, when you are learning about accessibility, to think beyond the static and the still—things like friendly frame rate.

Identifying, the frame rates that will not cause flashing that could potentially trigger seizures. Or considering how your email is processed by screen reader technology. You might be surprised by how accessible technology responds to mundane things that we commonly see in marketing. Emails, for example, strikethrough text. Screen readers often just ignore the strikethrough styling. So if you're using the standard format of the previous and current prices, and you aren't taking the time to add them in development—little extra bits of code there—then your subscriber, who is using a screen reader to listen to your email, might hear both prices and not know the current valid price.

If you're testing with screen readers, you might also find some unusual little things that screen readers do with punctuation. For example, we were coming up with an email when I was at Going. We were trying to list how many of the person's total followed destinations were currently running a special, and it was formatted in the design as “1/10 destinations.” But if we had left it like that and it went through a screen reader, chances are most of them would have read: “You have flight deals at one over ten destinations.” On a rare occasion, we might run into one that said something like: “You have flight destinations at one-tenth destination.” Neither of those is really what we're going for.

We know that we want to say “one of ten destinations,” and so I let the designers know that this was a possible issue. They updated it so that it spelled out the word to get around that problem. So, if you're not testing, look at screen readers occasionally and run your copy through to see what happens. I highly recommend that you do. You might find some strangeness, but you don't know whether to look for it or listen to it unless you know.

The next section is flexibility. So this is related to responsive design, mobile responsiveness, and your email's ability to shrink, expand—the content's ability to stack and flow based on the screen size. Do you want to know how content flows as you go from one screen size to another? Can you change the order of things? Can you change the positioning of things? Knowing what you can do will help you as you design. So if you're not already including mobile view in your design mockups, I highly recommend it.

Even if you just design some of the modules or sections of email, where you know there might be a strange or uncommon rearrangement of content, your developers—who come after the design team—will thank you for giving them a heads-up on what it is that you expect to happen. And then, if you're using personalized content—if you have variable data or are personalizing the person's name, that sort of thing—you want to make sure that your design is accounting for a variety of character counts.

Your header might look fantastic if it reads “Flights to Paris,” but what happens when your subscriber is headed to Copenhagen? You're going to want to make sure that you're accommodating various character counts when designing. Make sure that your design is flexible enough to accommodate a range of character counts. And the same applies if you include values like prices or dates. Make sure that you include space for extra numbers, digits, decimals, and commas, especially if your content varies according to the country of the recipient—because the punctuation will differ.

So, if you want to level up in this category, my recommendation would be to look into CSS styles and sheets—things that control background size and position, the box model, and spacing—because understanding what is possible through stylesheets will help give you ideas about what you can do with future designs, as opposed to thinking very statically. Mobile is not just email that's smaller. You want the experience to differ based on the environment. Understanding CSS concepts, even if you aren't sitting down to write the code, will give you ideas and opportunities that wouldn't be there if you didn't already know them.

The next category is embellishment. This has to do with customization and progressive enhancement. We add little bells and whistles to our designs to make them more engaging. Knowing which of those you can do in an email is essential.

Support for animation, custom fonts, shadows, and rounded corners is something that not all email clients can universally support. It helps to know which ones are supported and where. Take a look at your customer base. If you can find out where your subscribers are opening—what platforms, which devices, etc.—then you can hone your design features according to where your customers are actually viewing them. As a bonus action, talk to your developer friends about what happens when you overlap elements—like when you place text on top of a background, or have one shape slightly overlapping another. That can impact a variety of things, including how likely it is that your email is going to clip in Gmail.

I have what I like to refer to as the birthday cake model, or the birthday cake theory of email design to code efficiency. If you think about every one of the bells and whistles in your email design—whether it's a drop shadow, an extra custom font, special CSS, any little added flair that you add. Every container on the screen in your email design is like a sheet cake. Every time you add another block of color on top of another block of color with a border, you add an extra level—an extra tier—to your cake. Each time you add a drop shadow, a border, or a custom font, that's another layer of icing, frosting, and piped letters.

Eventually, if you go too far, you end up with a six-tier cake with three different flavors and a handcrafted sugar rose topper. A very simple text-based email, for example, is like a nice vanilla sheet cake with some delicately piped lettering. But a more complex email design requires those extra layers, the extra flavors, and all the time and code required to create that. When you have that really elaborate cake, it is beautiful, but you might have trouble fitting it in the delivery van, and your guests at the birthday party may get tired of waiting for it to show up. So that is the birthday cake model of email design to code efficiency. 

That brings me to optimization. So, this involves image preparation and accuracy—knowing the best use cases for different image file types. So when to use a JPEG, when to use APNG, when to use a GIF. In my experience, I was surprised that this was something that not a lot of the designers were familiar with, especially if they were coming from print. 

So, understanding which one to use for a photo or which one to use for a logo will help a lot with file size and load time. Also, understand the requirements for animation and how that impacts how you compress your images and how fast or slow they will load. And then units of measurement. Find out which units of measurement are most appropriate for things like image and font sizes. I highly recommend working with integers whenever possible. When we use whole numbers, we get around the complication of asking our screens to interpret what a tenth of a pixel is like.

But if we're using whole numbers, we don't have to deal with that. As a bonus action, ask your developer friends for more information on the design impact of HTML, and look into ways to lay out content more efficiently to reduce code. You may or may not know the file size of your email document—but once it reaches 102 kilobytes, chances are it will clip in Gmail. So, find out: how can you optimize your images and design to avoid that?

Lastly, our last category is resilience. This involves adapting to dark mode and other user environment differences, understanding the difference between color inversion versus custom styling, and knowing which email platforms allow you to do what. There are various ways that email service providers process color. And if you're not prepared for that, the results can be disastrous. One of the surprises that I've run into is seeing that very few people are testing their brand colors in dark mode before they grow attached to a particular color. Test in dark mode early, because you don't want your crisp, clean, ivory email to look like a muddy manure-colored mess. For new dark mode users—and I'm saying this from experience—it’s not pretty.

Have one of your developers take all your proposed brand colors, throw them into a table, throw some text over them, and see what happens in dark mode. Then decide which ones you will keep. Another bonus action that I’ve found particularly useful is understanding how to use transparency in images and backgrounds to create engaging experiences in dark mode. When it comes to imagery and background images, I have spent a lot of time with our designers helping them understand how to interpret or prepare background images and illustrations for life in dark mode.

We had a talented illustrator who took a lot of time to create this huge library of custom illustrations that were really fun and really played into the character of the company. But they didn’t do so great in dark mode at first. Because they were transparent, we lost a lot of the shapes, and the really gorgeous line art just melted away. I suggested that they fill in some of the color. So they assumed that what I meant was just putting it on a block. And yes, this makes the illustrations easier to see, but it is really awkward, clunky, and ugly. So I suggested adding a stroke around the illustration. That’s a little better, but it feels kind of cramped. It feels a little busy, because the strokes are similar in weight to the line art.

After I had taken the time to explain to our illustrator exactly what was happening with these, she came up with a really great idea—to freehand these active, energetic shapes around all of the illustrations. We started referring to it as “stickerizing,” because in dark mode, it kind of does look like you’ve slapped a die-cut sticker on the screen. And we loved that vibe so much that before too long, those sticker-style shapes, tape, torn paper—that physical media concept—started cropping up in all kinds of emails going out. And it became kind of like part of the company’s character to use this design. In fact, we even printed stickers for the entire staff because we loved that idea so much.

But this only happened because our designer took the time to sit with me and learn more about how dark mode worked. I have just blown through all of that quickly, and there is so much content I could present to you, but we don't have that kind of time. I hope you're not overwhelmed by what I, like, rapid-fire ran through, because you don't have to learn this all overnight. It took me years to learn all of these little idiosyncrasies, and I would not expect you to know all of this in a brief period. So remember to start with the basics. Identify your strengths and weaknesses and level up as you go. And if you get to the point where you're starting to feel panicked, remember you don't have to go alone.

Chances are that there is someone in your office or on the internet who will talk to you and help you learn more if you just reach out and ask questions. You just have to find your allies. And in the theme of Dungeons and Dragons, what that would look like is assembling an adventure party. If you look at tabletop gaming or fantasy adventure, rarely does the hero travel alone. Generally, they will either start with a group of friends or gradually gather allies along the road and succeed by combining their skills and assets. So you don't have to go alone. Find your allies, whether that is your coworker on another team or someone in your community.

Look for somebody who knows more about the things that you don't. Ask them questions. Communicate about the things that you know and the things that they know. Put your heads together, because you're going to get farther by building a communal pool of resources than if you just tried to do it yourself. And once you have identified your allies, pull your resources together and then make sure that your priorities are aligned. It helps to talk to the people you work with about how they work. What is their work style? What are their needs? How do they look at email? It's kind of like if you are skilled with a bow and arrow, it helps to find an ally who can swing an axe. And then you need somebody to help you heal when you run into injuries. So you can find a healer or a wizard to conjure spells, but you have to understand one another to correctly assemble all of those abilities in a way that makes sense.

One of the most significant opportunities I've had in my career is one of my most essential advantages. In doing a little bit of this and a little bit of that, I have been able to gather perspectives—multiple perspectives—from different areas of specialization and combine them together in a way that I never would have understood if I had not been exposed to those different areas of specialty. Because I had a reusable toolkit, I gained knowledge in different areas. I was able to prepare in a way that I wouldn't have. I could see opportunities and possibilities I would not have had if I had stayed in my lane.

In my marketing and agency days, I had to assemble emails. I designed and developed email for a client set of over 150 small businesses and realized that I had to go faster. I had to be more efficient. As I learned more about development, I found ways to speed up parts of the process. I ended up with this enormous master template of modules, and from it, I could pick and choose pieces that I knew would work together to custom skin and rapid-fire produce for various companies. The benefit of assembling that toolkit with my knowledge from various backgrounds was that I could skip a lot of the tedium that I was experiencing, having to design everything in my design software first and then rebuild it all over in my development software. I could skip a lot of that and go straight to the fun part, because I knew I was going to be able to throw that template together really quickly. I could spend a lot more time creating engaging graphics and less time doing the mundane, tedious tasks I previously had to do.

That experience is a big part of what motivated me to specialize in modular systems and drove me to take more time to learn about the people who came before and after me in the email production process. I wanted to take what I had learned and use tools I was familiar with to open doors for them—not just for myself. That not only made me more productive, but also made my team more productive. We could lower our stress levels, reduce frustration, and do more with less. We also had more time to develop creative solutions and explore design options like interactivity, which we would never have had time for if we had all just stayed in our little corners.

Here's a visual example of what I love to do with modular systems. I spent some time working with a design team. I helped them create a modular system in Figma for the design and Litmus for the development teams. So they have an almost menu of modules they can work off of, which we created together in a way that served both of our needs. Because we had created this, we could then give it to our strategists, who could use it as a menu and pick specifically which modules they felt would best fit the content that they were planning to send to us. Once we had picked those modules, our designers could skip over creating an entire header-to-footer mockup and create superb illustrations and headers.

Then they passed those files on to the developers to plug in quickly during development, so we're not rebuilding the wheel for every single email. We're skipping to the fun part. The only reason we could accomplish what we did was that we all agreed to try something new. We agreed to tackle challenges that we had previously avoided by doing that together. There is inevitably a point in every hero's journey where they have to decide whether to turn around and retreat to the familiar or forge ahead toward the unknown. 

And so my challenge to you is to face obstacles in email with courage and cunning. Instead of retreating to the familiar, look for opportunity in every obstacle. Explore new paths. Test the waters. Learn from your mistakes, and you can make magical transformations happen. In Dungeons and Dragons or fantasy adventures, consider the sorcerer. A sorcerer just casts magic willy-nilly into the ether, hoping that something will stick and they'll discover their ultimate power. They might steal somebody else's notes to try and accomplish some great feat, but they do not take the time to understand what they're working with. A wizard, on the other hand, takes his time. He studies the mysteries, seeks advice from mentors, and learns through trying, growing, and gradually building his knowledge until he achieves wisdom. With that wisdom, he can conjure magic, knowing what's going to happen, and with courage and wisdom.

So, a great example of this is an email from Scott's Cheap Flights, before it became Going. We ran into occasional issues where the design team wanted to use background images. They would often have gradients or be photos of the sky, etc. Because I had experience with both design and development, because I understood resilience and working with dark mode, I was able to conjure the effect of an email that transformed from daytime in light mode to nighttime in dark mode. It looks like magic. Magic that seems like magic when you don't understand how it works. But really, I was just combining my optimization knowledge with my skills in resilience. And even though the effect is pretty cool, it takes very minimal effort when you know how it works.

Basically, it just boils down to a couple of cleverly sliced header and footer images, combined with a background fill using HTML. But the impact is this magical transformation, and that's just because most people who look at it don't understand how it works. The great wizard of science fiction, Arthur C. Clarke, said that any sufficiently advanced technology is indistinguishable from magic. And that's all that's at play here. It looks like magic to those who don't understand it. What I challenge you all to do on your quest is to remember to be a wizard, not a sorcerer.

Tap into your knowledge and resources. In your community or office, that knowledge can be gained by gradually using your experience with others to build your character. And by having the courage to try new things, learn from your mistakes, and level up. You can make magical transformations that you never would have been able to make happen if you had not taken the time to grow. 

Seek your knowledge. Build character. Find your allies. Have courage. And create magical transformations. And with that, I thank you all for joining me on this journey and the outstanding leaders of Uns Spam for giving me this opportunity to geek out with you. You can get your character sheet using the QR code. And I wish you all well. May the dice roll ever be in your favor.

Thank you.