Deep Dive7 min read•Audience: Developers, Designers

HTML Export & Code Structure

A deep dive into the anatomy of PostBrix HTML export: doctype, Outlook conditional comments, VML namespaces, and responsive media queries.

Key Takeaways

PostBrix HTML is generated by compiling MJML through strict validation and terser minification.
Includes Outlook/MSO conditional comments (<!--[if mso]>) and VML namespaces (xmlns:v="urn:schemas-microsoft-com:vml").
Features responsive media queries in the <head><style> tag for mobile column stacking and typography scaling.
PostBrix does NOT claim 100% style inlining down to removing <style> tags — media queries are intentionally retained in <style> to power mobile responsiveness.

Anatomy of the Exported HTML Document#

When you inspect a PostBrix HTML export, you will find a highly structured document engineered specifically for email client engines:

code

html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title></title>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #outlook a { padding: 0; }
      body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
      table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
      p { display: block; margin: 13px 0; }
    </style>
    <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
    <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { font-size: 0px !important; }
    </style>
    <![endif]-->
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-50 { width: 50% !important; max-width: 50%; }
        .mj-column-per-100 { width: 100% !important; max-width: 100%; }
      }
    </style>
  </head>
  <body style="word-spacing:normal;background-color:#f0f0f0;">
    <!-- Email Body Table Hierarchy -->
  </body>
</html>

Technical Clarification on CSS Inlining#

Some legacy email tools claim "100% inlined HTML with no <style> tags". In modern email development, that is an anti-pattern:

Component Styles: PostBrix inlines essential CSS (font sizes, colors, background colors, padding) directly onto table cells and anchor tags.
Media Queries: Mobile responsive rules (@media only screen and (min-width:480px)) must live inside a <style> block in the document <head>. Stripping the <style> block would completely destroy mobile responsiveness.
All major mobile email apps (Apple Mail, Gmail App on iOS/Android, Samsung Mail) fully support <style> blocks in the <head>.

Realistic CSS Delivery

PostBrix produces email-compatible HTML compiled from MJML. It combines inlined element attributes for desktop Outlook compatibility with head-level media queries for modern mobile responsiveness.

Frequently Asked Questions

Why does PostBrix HTML include MSO conditional comments?

Microsoft Outlook desktop (2016–2021) uses Microsoft Word as its rendering engine. MSO comments instruct Word how to format table widths, VML background graphics, and fonts without breaking web standards.

Can I remove the <style> tags in the header?

Do not remove the header <style> tags. They contain the responsive media queries that cause columns to stack vertically on phone viewports.

Export

MJML Export

Export

Export Settings

PreviousExport Overview NextMJML Export

Deep Dive7 min read•Audience: Developers, Designers

HTML Export & Code Structure

A deep dive into the anatomy of PostBrix HTML export: doctype, Outlook conditional comments, VML namespaces, and responsive media queries.

Key Takeaways

PostBrix HTML is generated by compiling MJML through strict validation and terser minification.
Includes Outlook/MSO conditional comments (<!--[if mso]>) and VML namespaces (xmlns:v="urn:schemas-microsoft-com:vml").
Features responsive media queries in the <head><style> tag for mobile column stacking and typography scaling.
PostBrix does NOT claim 100% style inlining down to removing <style> tags — media queries are intentionally retained in <style> to power mobile responsiveness.

Anatomy of the Exported HTML Document#

When you inspect a PostBrix HTML export, you will find a highly structured document engineered specifically for email client engines:

code

html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title></title>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #outlook a { padding: 0; }
      body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
      table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
      p { display: block; margin: 13px 0; }
    </style>
    <!--[if mso]>
    <noscript>
    <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
    <!--[if lte mso 11]>
    <style type="text/css">
      .mj-outlook-group-fix { font-size: 0px !important; }
    </style>
    <![endif]-->
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-50 { width: 50% !important; max-width: 50%; }
        .mj-column-per-100 { width: 100% !important; max-width: 100%; }
      }
    </style>
  </head>
  <body style="word-spacing:normal;background-color:#f0f0f0;">
    <!-- Email Body Table Hierarchy -->
  </body>
</html>

Technical Clarification on CSS Inlining#

Some legacy email tools claim "100% inlined HTML with no <style> tags". In modern email development, that is an anti-pattern:

Component Styles: PostBrix inlines essential CSS (font sizes, colors, background colors, padding) directly onto table cells and anchor tags.
Media Queries: Mobile responsive rules (@media only screen and (min-width:480px)) must live inside a <style> block in the document <head>. Stripping the <style> block would completely destroy mobile responsiveness.
All major mobile email apps (Apple Mail, Gmail App on iOS/Android, Samsung Mail) fully support <style> blocks in the <head>.

Realistic CSS Delivery

PostBrix produces email-compatible HTML compiled from MJML. It combines inlined element attributes for desktop Outlook compatibility with head-level media queries for modern mobile responsiveness.

Frequently Asked Questions

Why does PostBrix HTML include MSO conditional comments?

Can I remove the <style> tags in the header?

Do not remove the header <style> tags. They contain the responsive media queries that cause columns to stack vertically on phone viewports.

HTML Export & Code Structure

Key Takeaways

Anatomy of the Exported HTML Document#

Technical Clarification on CSS Inlining#

Realistic CSS Delivery

Frequently Asked Questions

Why does PostBrix HTML include MSO conditional comments?

Can I remove the <style> tags in the header?

Related Articles

HTML Export & Code Structure

Key Takeaways

Anatomy of the Exported HTML Document#

Technical Clarification on CSS Inlining#

Realistic CSS Delivery

Frequently Asked Questions

Why does PostBrix HTML include MSO conditional comments?

Can I remove the <style> tags in the header?

Related Articles