email clients (gmail, outlook, apple mail, etc) all render HTML emails differently. here's what you need to know to ensure your emails look good everywhere.
how tinysend handles compatibility
tinysend sends both HTML and plain text versions of your emails. if a client can't display HTML or if a user prefers plain text, they'll get the text version.
major email clients
gmail
- supports most HTML and CSS
- strips some CSS styles for security
- good image rendering
- clips messages over 102kb
outlook (desktop)
- uses microsoft word rendering engine
- limited CSS support
- inconsistent spacing and fonts
- blocks images by default
apple mail
- excellent HTML/CSS support
- best rendering of all clients
- shows images by default
- consistent across iOS and macOS
mobile clients
- smaller screens mean simpler layouts work better
- touch targets should be at least 44px
- single column layouts are safer
- large text is easier to read (16px minimum)
best practices
- keep layouts simple - single column works everywhere
- use web-safe fonts (arial, georgia, times, verdana)
- avoid complex CSS (flexbox, grid, etc)
- use inline styles instead of style blocks
- test with images disabled
- keep total email size under 100kb
- use alt text for all images
what to avoid
- background images (unreliable)
- custom fonts (won't load in most clients)
- javascript (completely blocked)
- forms (won't work, use links instead)
- video embeds (use thumbnail with link)
- complex tables (can break on mobile)
text version tips
tinysend automatically generates a plain text version from your HTML. make sure your content makes sense without formatting:
- use clear link text (not "click here")
- structure with headings and spacing
- include full URLs for important links
- keep paragraphs short
testing your emails
send test emails to yourself on different clients:
- check gmail on web and mobile
- test on iphone mail app
- verify outlook if targeting business audience
- view with images blocked
questions?
contact us at hi@tinysend.com