Technical Limitations of Emails: What you can and cannot do

It happens to every developer sooner or later. An enthusiastic designer or a marketing manager walks up with a brilliant, “disruptive” idea: “I want the email to feature an auto-playing video background, an interactive touch carousel, and a fully functional embedded survey form.”

And this is where you have to swallow hard and be the bearer of bad news: an email is not a modern website.

Massive email clients (like Outlook, Gmail, or Apple Mail) are severely constrained by incredibly strict security measures and rendering engines that, in some embarrassing-but-real cases, haven’t drastically evolved since 2007.

What you CANNOT do in an Email

• JavaScript: Forget about it completely. No major email client allows script execution due to blatant security reasons (chiefly phishing and malicious code injection). No complex JS animations, no modern libraries, no API calls.
• Embedded Videos (Autoplay): Placing a <video> tag or a YouTube <iframe> simply will not work in Gmail or the dreaded corporate Outlook Desktop. The “industry standard” workaround is pasting a static .jpg image with a massive “Play” icon layered on top of it, which acts as a simple anchor to redirect the user to an external YouTube link.
• Complex Integrated Forms: Even though some experimental clients supporting AMP for Email partially allow this, classic HTML forms that send data (<form>, <input>) fail catastrophically or get aggressively flagged as Spam in the vast majority of enterprise inboxes. If you need data collection, place a large button that links the user to a clean, external Landing Page.

What you CAN (and should) do

• Animated GIFs: The absolute visual salvation of email marketing. They simulate video motion without relying on scripts. All email clients broadly support them, but beware: animation support varies. Some modern clients loop them infinitely (autorepeat forever), others play them exactly once and stop on the last frame, and older stubborn clients (like Outlook Desktop) won’t animate them at all, rendering only the first static frame as a JPG image. ALWAYS ensure that Frame 1 conveys the intended message on its own.
• Limited Media Queries: While Outlook Desktop is famously rebellious, you can use hybrid coding techniques (reliant on table-based layouts) combined with classic Media Queries. This ensures that Gmail on an Android or Apple Mail on an iPhone scales fluidly on a small screen.

The Visual Golden Rules (Do’s and Don’ts)

Even when staying within technical bounds, a great design should prioritize readability and hierarchy over “extreme creativity”. Follow these core UI/UX principles for emails:

✅ What you must do (Do’s):

• Keep layouts simple and clean: Two columns max is ideal. Always think Mobile-First (over 60% of opens happen there).
• Clear visual hierarchy: Headline -> Image -> Text -> Button (CTA). This sequence naturally guides the reader’s eye.
• Design as if images might be blocked: Ensure you include descriptive alternative text (ALT text) for all key images and buttons. Because if the client blocks inline images by default, your message should perfectly make sense anyway.
• Utilize “The Fold”: Keep your main message and CTA visible without scrolling (the top 300-400px are prime real estate). Start your key links early.
• Solid backgrounds and Web-safe fonts: Use simple color blocks, high contrast between text and background, and reliable “Web-safe” fonts.
• Consistent spacing: Add whitespace to help the reader’s eye move through the content naturally and avoid uneven margins between sections.
• Short and action-oriented CTAs: “Shop now”, “Learn more”. Keep it completely straightforward. Maintain overall brand consistency holding the same tone and colors.

❌ What you must avoid (Don’ts):

• Complex grids: Avoid having too many columns; they often break gracefully or stack weirdly in mobile apps and Outlook.
• Background images with text on top: Outlook explicitly doesn’t support background imagery (without hacky VML code). Your text could easily vanish.
• Shadows, gradients, or blend effects: Most clients strip these completely, rendering the designs rigidly flat.
• Very small text: Avoid sizing text smaller than 12px; it’s borderline impossible to read and might blur on smartphones. Stick to a maximum of 2 or 3 styles/colors.
• Pure interactive elements: CSS-only carousels and text hover effects are simply not supported by most clients. Relying heavily on custom web fonts is also risky; most clients will overwrite them with generic system fonts.

Learning how to code knowing exactly where your boundaries are saves you endless headaches. Keep it simple, fast, and legible. For the overarching strategic side of this, I invite you to read my pillar article: the Ultimate Guide to Email Marketing.