Pengubah HTML Email Responsif dari MJML

MJML (Mailjet Markup Language) is an open-source markup language designed to make responsive email development tractable. Coding HTML email by hand is painful because email clients (especially older versions of Outlook) require nested tables, inline styles, and MSO conditional comments to render correctly. MJML provides a higher-level component vocabulary (mj-section, mj-column, mj-button, mj-image, mj-text) that compiles down to that legacy, table-based HTML automatically, giving you a single source that renders consistently across modern and legacy clients.

Email clients sandbox and rewrite the HTML they receive. Many clients strip styles, ignore external stylesheets, and only honor a small subset of CSS properties. Outlook for Windows uses Microsoft Word's HTML renderer, which has no support for flexbox, grid, or even floats. The only layout primitive that renders reliably everywhere is the HTML table with explicit width attributes plus inline styles on each element. MJML hides this verbose, error-prone scaffolding behind clean components.

MSO conditionals are special HTML comments of the form that only Microsoft Outlook (Windows) processes. They let you ship alternate markup for Outlook — for example, VML (Vector Markup Language) shapes for bulletproof buttons that render as real rectangles even in Outlook's broken renderer. Compiled MJML output includes these conditionals so that a single template degrades gracefully from Apple Mail and Gmail to Outlook 2007 and later.

Responsive email typically combines two strategies: a fluid, table-based desktop layout (max-width around 600px, centered) and a set of CSS media queries that stack columns vertically and resize fonts on narrow viewports. Because some clients ignore media queries, MJML emits a layout that already adapts to common widths via percentage-based tables, then layers media-query overrides on top for clients that honor them. The result is an email that looks intentional on a phone even when CSS support is partial.

Beautified output keeps indentation and line breaks intact, which is helpful when inspecting the markup, diffing template changes, or pasting into a code review. Minified output removes whitespace and comments to shrink the payload — useful because some ESPs charge per kilobyte and Gmail clips messages over roughly 102KB. Functionally the two produce the same rendered email; pick beautified when you're authoring and minified when you're sending.