2025 Elite
Newsletter
Architecture
Blueprint

JavaScript is either blocked or stripped by virtually every major email client for security reasons. Even if it were supported, using it in an email is a near-guaranteed spam trigger. CSS div-based layouts are equally unreliable because the rendering differences between Outlook (Word engine), Gmail (strips head CSS), and mobile clients mean a div layout will break on a significant portion of your list. The HTML table approach is not elegant code, but it is the only approach with documented cross-client stability going back to 2007. Use nested tables for complex layouts. All styles should be inline rather than in a stylesheet, because several email clients strip the head section entirely.

Spam filters score emails partly based on the ratio of image content to text content. A high image-to-text ratio is a known pattern associated with phishing and spam, because bad actors send image-only emails to avoid keyword-based spam detection. An email that is 80% or 100% image will trigger these filters regardless of your sender reputation. The 25% rule keeps you comfortably below the threshold while still allowing visual design elements. Every image should be supported by surrounding text that contextualizes it, which both satisfies the ratio requirement and ensures the message is readable for recipients who have images disabled by default.

An attached image increases the physical file size of the email by the full size of the attachment. A 500KB attached header image means every single recipient downloads 500KB just to receive the message, which slows delivery, increases load time, and hits attachment-size limits on many corporate mail servers. Embedded images via absolute URL serve the image from a remote server. The email itself contains only the URL string, keeping the message file small. There is a secondary benefit: if you need to update an image after sending (correcting a mistake, changing a promotion), you can replace the hosted file and the updated version appears for any recipient who has not yet loaded the email.

Using a third-party image hosting service for email images introduces a dependency you do not control. If that service goes offline, changes its URL structure, enforces bandwidth limits, or removes your account, every email you have ever sent that references those images will display as broken. Self-hosting on your own domain also signals to spam filters that you are a legitimate sender who controls their own infrastructure. Use a consistent folder structure (e.g. yoursite.com/email-assets/campaign-name/image.jpg) and set appropriate caching headers so the images load fast on repeated opens.

The 70/30 split is the workhorse layout for promotional newsletters because the dominant column creates a clear visual hierarchy without requiring the reader to choose between two equally weighted sections. The primary column carries the headline, body copy, and primary CTA. The secondary column can hold supplementary links, a short content roundup, a secondary product, or editorial navigation. This split works particularly well on mobile because when the table collapses to single column on small screens, the primary column stacks on top and the reader encounters the main offer first before the secondary content. Test this explicitly by viewing your send on a 375px mobile width before scheduling.

The 50/50 split communicates balance and equality between two content blocks. Use it when the structure of the message depends on the parallel relationship between the two sides. The most common applications are product comparisons, before-and-after formats, two-column content roundups where both sections have equal editorial priority, and dual-CTA layouts where the subscriber is given a choice between two options. On mobile, both columns stack to full width and the visual parallel relationship is lost, so the content in each column must work independently without relying on the side-by-side comparison to make sense.

Custom web fonts loaded via @font-face or Google Fonts CDN are not supported by most major email clients, including all versions of Outlook and the default Gmail app. When a custom font is not supported, the email client substitutes a default system font, which can be Times New Roman, a sans-serif variant, or whatever the client defaults to. This substitution can completely alter your intended visual hierarchy if your design depended on specific font weights or sizing. Web-safe fonts are pre-installed on virtually all operating systems and render predictably. If you want custom typography, reserve it for images containing text (headlines as images), which render exactly as designed.

The average email gets three to five seconds of initial attention before the subscriber decides to keep reading or close. The layout must communicate the value proposition within that window. Short paragraphs of 2-3 lines with visible line breaks between them are easier to skim than dense blocks of text. White space creates visual breathing room that signals organization and professionalism. For product grids, six items in two columns of three is typically the ceiling before the reader's cognitive load exceeds their interest. More than six product blocks in a single email section produces the same outcome as a wall of text: the reader stops processing and closes without converting.

The target of 100KB per image is achievable for most email use cases without visible quality loss. A well-optimized JPEG header image at 600px width can typically hit 60-80KB at quality settings of 75-80 in Photoshop or equivalent tools like Squoosh or ImageOptim. The common mistake is exporting from a design tool at default settings, which often produces files of 300-600KB or larger. For email specifically, the rendering context is small and the screen resolution does not demand the same quality ceiling as print or large-format web displays. Compress more aggressively than you think is necessary, then test on multiple devices. If it looks acceptable at 70KB, it does not need to be 200KB.

The 600px container has been the established standard for email design since the early days of HTML email because it fits comfortably within the preview pane of Outlook and Gmail desktop clients while also scaling down reasonably to mobile widths. Images wider than 600px will either be clipped, trigger horizontal scrolling, or force the email container to expand beyond the reading pane. Any of these outcomes signals poor template quality to the recipient and creates friction before they have read a single word. When building responsive layouts, set your image tags with width="100%" and a max-width of 600px so they scale fluidly on mobile without exceeding the desktop container width.

A significant portion of email clients, particularly corporate environments using Outlook, disable images by default and require the user to click "Display Images" manually. On mobile, spotty connections can cause individual images to fail to load. In both cases, the email displays as a series of blank boxes with broken image icons unless alt-text is present. Alt-text replaces the image with descriptive text that communicates the intended message. For a CTA button built as an image, the alt-text should be the button label ("Get 20% Off Today"). For product images, the alt-text should describe the product. For decorative elements with no informational value, use an empty alt attribute (alt="") so screen readers skip them.

HTML5 video is not supported by Gmail, Outlook, Yahoo Mail, or most other major clients. Attempting to embed video will result in a broken block or nothing at all for the majority of your list. The workaround is a static thumbnail image that functions as the play button. The thumbnail should be a compelling still frame from the video, optionally with a play button icon overlaid in the center. This image links directly to the hosted video URL. The visual pattern communicates "this is a video" without requiring video rendering in the email client itself. Use a JPEG thumbnail at the same compression standards as any other email image. Avoid animated GIFs as the video proxy unless the GIF is small and serves a specific creative purpose, as they add significant file weight.

Subject lines above 60 characters are truncated on most mobile clients, cutting off the most important part of the message if it appears at the end. Shorter subject lines at 30-50 characters display fully on all major clients and force you to distill the hook to its most compelling element. Personalization using the subscriber's first name increases open rates, but only when the surrounding message is also relevant to that person. Generic personalization ("Hi [First Name], check out our newsletter!") produces no measurable lift. The subject line must communicate a specific benefit, create genuine curiosity, or deliver a time-sensitive signal. Any subject line that could have been written by a mass mailer is indistinguishable from one.

Send timing affects inbox placement and initial open probability. Emails sent between 6 AM and 9 AM in the recipient's timezone arrive at the top of an inbox that is being actively reviewed during the morning routine. Emails sent mid-afternoon often arrive in an inbox that is not checked until the following morning, where they are buried below everything that arrived since. Consistency matters because subscribers who enjoy your newsletter develop an expectation of receiving it at a certain time. When that send becomes predictable, a portion of your most engaged subscribers will begin actively looking for it. This behavior signals engagement to inbox providers, which improves deliverability over time.

A CTA button that blends into the surrounding layout is the most common and most expensive email design mistake. The button's purpose is to draw the eye after the reader has processed enough of the message to be interested. If the button is the same tone or color family as the background section it sits on, the eye passes over it. The contrast requirement is not subtle. The button should look different from everything else on the email. If your email uses a white background with dark text and a gray button, the button will be ignored. For CTA copy, start with the action verb: "Get the Template," "Book the Audit," "See the Results." Avoid generic labels like "Click Here" or "Learn More" that communicate no specific benefit.

An email that contains exclusively promotional links sends one signal: buy something. Over time, even subscribers who like your brand will tune out a send that is always asking for something. The link mix principle is about maintaining the trust and attention of your list by proving that your emails deliver value beyond purchasing opportunities. The 20% pure-value content principle from Blueprint #08 applies at the campaign level. At the individual email level, even in a primarily promotional send, including one or two links to useful free content changes the character of the email from "advertisement" to "newsletter." This distinction matters to the reader and to inbox algorithms that track secondary engagement signals like link diversity and dwell time.