Why Email Clients Differ
Outlook uses the Word rendering engine. Gmail strips many CSS properties. Apple Mail supports more modern features. Mobile clients often scale images and reflow content. A signature that looks perfect in one client may break in another.
Use Tables for Layout
Tables are the most reliable way to structure email HTML. Flexbox and Grid are poorly supported. Use nested tables with fixed widths (e.g., 600px max) for desktop, and let mobile clients scale down.
Inline CSS Only
External stylesheets and <style> blocks are stripped by many clients. Inline all critical styles: font-size, color, padding, alignment. Use inline styles on every element that needs them.
Image Dimensions
Always specify width and height on images. Use max-width for responsiveness. Provide alt text. Keep images under 50KB for logos and icons.
Font Fallbacks
Web fonts often fail in email. Use system fonts: Arial, Helvetica, sans-serif. Or specify a fallback: "Georgia, Times, serif."
Test on Real Devices
Preview in Outlook (desktop), Gmail (web and app), Apple Mail, and at least one mobile client. Test both light and dark mode where applicable.