bannx logobannx
Register
5 min read

Email banner best practices: design for deliverability and engagement

Design and technical guidelines for email banners that render correctly across clients, load fast, and drive clicks.

Email banner best practices: design for deliverability and engagement

Email banners are different from web banners. They need to work in 50+ email clients, load without external resources, and stay under strict file size limits.

Here’s how to design email banners that actually work.

The email client reality

Email clients are inconsistent:

  • Gmail: strips some CSS, blocks external images by default
  • Outlook: uses Word rendering engine (limited CSS support)
  • Apple Mail: better CSS support, but still limited
  • Mobile clients: smaller viewports, touch targets matter

Design for the lowest common denominator.

File size limits

Most email clients and ESPs have limits:

  • Gmail: ~100KB per image (but aim for < 50KB)
  • Outlook: stricter limits
  • ESP limits: Mailchimp, SendGrid, etc. have their own limits

Optimize aggressively: compress images, use appropriate formats.

Image hosting: embedded vs. external

Two approaches:

  1. External hosting: host images on CDN, reference in email
    • Pros: smaller email size, easier updates
    • Cons: blocked by default in some clients
  2. Embedded (base64): encode image in email HTML
    • Pros: always loads
    • Cons: larger email size, harder to update

For most cases, external hosting with alt text is the better choice.

Alt text is critical

Many email clients block images by default. Alt text is your fallback:

  • Descriptive: "Save 50% on summer collection"
  • Action-oriented: "Shop now - limited time offer"
  • Branded: include brand name if space allows

Responsive design for email

Design for mobile-first:

  • Width: 600px max (many clients use this)
  • Touch targets: buttons at least 44x44px
  • Text size: minimum 14px for readability
  • Stack on mobile: single column layout

Safe colors and contrast

Email clients may render colors differently:

  • Web-safe colors: use hex codes, not CSS color names
  • Contrast: ensure text is readable on background
  • Background colors: set bgcolor attribute (not just CSS)

Testing across clients

Test in:

  • Gmail (web and mobile)
  • Outlook (desktop and web)
  • Apple Mail (desktop and iOS)
  • Mobile clients (iOS Mail, Gmail app)

Use tools like Litmus or Email on Acid for broader testing.

CTA buttons in email

Make CTAs obvious:

  • Button style: use HTML table-based buttons (not CSS)
  • Color: high contrast, brand-aligned
  • Text: clear action ("Shop Now", "Learn More")
  • Spacing: adequate padding around button

CTA

Ready to create email banners that work everywhere?