Trying to Make Email Behave Like the Web

Recently, I was tasked with retooling our monthly newsletter. Nothing crazy. Just a straightforward redesign to make it cleaner, more visually appealing, and hopefully a little more fun for our readers. I was given a general idea of what the template should look like; my job was to rebuild it while preserving the AMPscript logic that allows the same template to support multiple webpages.

But once I got into the build, it stopped being just a redesign and became something I needed to refine. I wanted something ambitious. Something that, as a reader, would make me appreciate not just the content, but the layout itself. I wanted the email to feel intentional. Thoughtful. Designed.

A Simple Idea, More Layers Than Expected

The newsletter is simple in concept but layered in execution. A featured blog sits at the top, followed by a three-column section highlighting additional posts. Each column contains an image, a title, a short description, and a button.

My goal was subtle. I wanted each row of buttons to feel aligned and balanced so that even as the content changed, the eye would move naturally across the layout. I wasn’t trying to reinvent email design. I just wanted it to feel clean and visually steady.

More specifically, I pictured the buttons in the three-column section aligning horizontally on desktop, while stacking naturally on mobile. A layout that behaved the way a modern web grid might. Sounds simple enough, right?

Here’s the problem. Newsletter titles vary in length. Blog descriptions vary even more. And every email client has its own opinions about how your email should render.

Buttons That Just Wouldn’t Behave

This wasn’t about discrepancies or broken layouts. It was about something more personal. When titles and descriptions varied, the buttons naturally landed at different heights, which is exactly how this kind of layout is supposed to work. Nothing was functionally wrong. My eyes just didn’t want any part of it.

I don’t consider myself obsessive-compulsive, but I do care about visual harmony. Uneven buttons felt off. Not a usability issue. Not a functional problem. Just something that tugged at my sense of balance. It was a small, stylistic itch I was eager to scratch.

Taking Control of the Layout

At first, the standard Salesforce content blocks weren’t giving me the control I needed. Separating everything into individual image, text, and button blocks felt restrictive. I couldn’t get the spacing or structure to behave the way I wanted.

So I moved everything into a single freeform content block and built the layout manually using tables. That meant creating my own buttons instead of relying on Salesforce’s built-in button block. It gave me far more control over structure and spacing, and initially, it felt like the right move.

Testing, Testing, and More Testing

Testing is a given in this field. Tools like Everest/Validity and Litmus make it easy to preview emails across Gmail, Outlook, Apple Mail, desktop, mobile, tablets, and more. We test constantly.

The challenge was the medium itself; I was trying to make email behave like the web. The lesson: HTML email does not behave like the web. You can’t rely on modern CSS, flexible layouts, or predictable rendering. That contrast between expectation and reality keeps you humble, and occasionally makes you sigh a little. If you’re used to bending HTML and CSS to your will in browser environments, this can feel especially limiting.

Outlook Throws a Curveball

Everything always looks exactly the way you want it to in the Salesforce Marketing Cloud preview, which is a comforting illusion. Until you test the design on multiple platforms, you don’t realize there is a problem. It wasn’t until I tested the design that I realized creating custom buttons requires additional CSS to support older versions of Outlook. That’s when the buttons collapsed. After some digging, I discovered the mso-padding-alt attribute, which helped maintain proper padding in Outlook clients that rely on Word’s rendering engine.

It was a small fix, but an important one. Carefully tuning padding across clients helped the layout feel consistent, even if it wasn’t perfect.

That should have been the end of it, right? Wrong. Catastrophically and spectacularly wrong.

Gmail Strikes Back

In an effort to force horizontal alignment on desktop, I introduced fixed heights on the text containers so each button would land at the same vertical position. To make that work on mobile, I relied on media queries to remove those fixed heights and let the buttons fall naturally beneath the descriptions. On paper, the logic made sense. In practice, Gmail mobile ignored the media queries, leaving behind awkward gaps of empty space and a layout that felt stiff and unbalanced. Gmail mobile seemed determined to prove me wrong.

That sent me down another rabbit hole. I tried adding desktop-only spacer elements. I switched between fixed heights and padding-only solutions. Every change solved one problem while introducing another. Something would look great on desktop and fall apart on mobile. Or work in Gmail but break in Outlook.

By that point, I had spent tens of hours testing variations, tweaking spacing, and looking for a workaround that didn’t feel like a compromise. Eventually, it became clear that this wasn’t about finding the right trick. It was about recognizing the limits of HTML email.

I was trying to make it behave like the web.

Accepting the Constraints

In the end, the solution wasn’t about forcing perfection. It was about accepting constraints while keeping the design readable, functional, and visually pleasant. Buttons stack naturally on mobile. Minor spacing differences exist on desktop. And the newsletter still looks clean, balanced, and intentional.

Reflection

Looking back, this project felt like trying to fit a square into a round hole. I had a clear vision for how the newsletter should look, but email has its own rules, quirks, and limits. What seemed simple—perfectly aligned buttons on desktop that stacked naturally on mobile—turned out to be nearly impossible without compromise.

That’s the reality of email design. You can’t rely on modern layout systems or predictable client behavior. Your creativity has to work with the medium, not against it. Some design ideas simply won’t translate perfectly, no matter your experience or effort. Test rigorously, experiment boldly, and remember that limitations don’t kill creativity.