Responsive Email Templates That Actually Work

Building HTML emails is like time-traveling to the early 2000s. No flexbox, no grid, limited CSS support, and every email client renders things differently. Outlook uses the Word rendering engine. Gmail strips most CSS. Apple Mail is surprisingly good but not everyone uses it.

Tables Are Still the Answer

For layout, tables are the only reliable option. I use a hybrid approach: tables for structure, with CSS for modern clients and mso- conditional comments for Outlook:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" style="padding: 20px;">
            <table width="600" cellpadding="0" cellspacing="0">
                <tr>
                    <td style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
                        Your content here
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Responsive Without Media Queries

Gmail does not support media queries in most contexts. The workaround is fluid design: use percentage widths with max-width constraints. The email expands to fill the viewport on mobile and caps at 600px on desktop, no media queries needed.

Testing Is Everything

I test every email template across at least 8 clients using Litmus or Email on Acid. The rendering differences between Outlook 2019, Gmail web, Gmail app, Apple Mail, and Yahoo are significant enough that testing is not optional.

Email development is painful, but a well-built template system that you reuse across projects makes it manageable. Build it right once, then customize colors and content for each project.