Build an email that renders everywhere
Email clients are a hostile rendering environment: Gmail strips your <style> block, Outlook ignores modern CSS, and every client handles spacing differently. The only reliable approach is a table-based layout with every style inlined. This builder generates exactly that from your content, plus a live preview so you can see the result before sending.
How it works
The template is a stack of nested role="presentation" tables. An outer full-width table provides the grey backdrop and centers an inner table capped at the safe 600px maximum width. Inside that are four rows: a colored header bar with your brand, a single-column body that splits on blank lines into <p> paragraphs, a bulletproof CTA button, and a muted footer. A hidden preheader <div> at the very top controls the inbox preview text instead of leaving it to chance.
The button is the part most likely to break, so it gets special treatment. Rather than styling a link directly — which Outlook renders inconsistently — it wraps the anchor in a table cell with a bgcolor attribute and applies the padding to the anchor itself, making the entire padded area a solid, clickable target across clients. Every element carries its styles inline because clients routinely discard head-level CSS, and an <!--[if mso]> conditional forces Arial in Outlook. User text is HTML-escaped so an ampersand or angle bracket in your copy can’t corrupt the markup.
Tips and notes
Keep the body to one column — multi-column layouts collapse unpredictably on mobile. Write a deliberate preheader; a vague one wastes prime inbox real estate. Always include a real, working Path for the button URL and a footer with a postal address and an unsubscribe rationale, which most anti-spam laws require for marketing mail. Before a real send, paste the output into a litmus-style preview tool to spot-check Outlook, since it is the client most likely to surprise you.