{"id":4210,"date":"2024-10-17T16:09:13","date_gmt":"2024-10-17T21:09:13","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4210"},"modified":"2024-10-17T16:09:14","modified_gmt":"2024-10-17T21:09:14","slug":"simple-typographic-email-template","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/simple-typographic-email-template\/","title":{"rendered":"An HTML Email Template with Basic Typography and Dark\/Light Modes"},"content":{"rendered":"\n<p>I don&#8217;t mind HTML email, but it really can be overdone. There is a tendency to do <em>too much<\/em>. Too much layout. Too many images. Too much text. Too many styles. The reason I don&#8217;t mind it though is that the HTML part of an HTML email offers some styling control that, when reigned in, makes for a clear and nice-looking email.<\/p>\n\n\n\n<p>A plain text email can be nice too. The constraint of plain text can help an email get to the point and not do too much. But if we go for HTML email, we can apply <em>just enough<\/em> layout and styles to make it almost like a plain text email, only with a bit more class.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A pleasant readable typeface<\/li>\n\n\n\n<li>Reasonable line length<\/li>\n\n\n\n<li>Breathable line height<\/li>\n\n\n\n<li>Anchor links on words<\/li>\n\n\n\n<li>Dark\/light mode<\/li>\n<\/ul>\n\n\n\n<p>I&#8217;ve put together an HTML document that does those things. I looked at various templates and poked and prodded and tested things and have what seems to be a decent setup to accomplish those things above (and nothing more). <\/p>\n\n\n\n<p>It&#8217;s a pretty big chunk of HTML, so I&#8217;ll pop it in here as a <code>&lt;details&gt;<\/code>. <\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Plain Typographic HTML Template<\/summary><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"x-apple-disable-message-reformatting\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"Content-Type\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"text\/html; charset=UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"color-scheme\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"light dark\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"supported-color-schemes\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"light dark\"<\/span> \/&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">media<\/span>=<span class=\"hljs-string\">\"all\"<\/span>&gt;<\/span><span class=\"css\">\n      \n    <span class=\"hljs-keyword\">@import<\/span> url(<span class=\"hljs-string\">'https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;display=swap'<\/span>);\n      \n    <span class=\"hljs-selector-pseudo\">:root<\/span> {\n      <span class=\"hljs-attribute\">color-scheme<\/span>: light dark;\n      <span class=\"hljs-attribute\">supported-color-schemes<\/span>: light dark;\n    }\n      \n    <span class=\"hljs-selector-tag\">body<\/span>,\n    <span class=\"hljs-selector-tag\">td<\/span>,\n    <span class=\"hljs-selector-tag\">th<\/span> {\n      <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Inter\"<\/span>, Helvetica, Arial, sans-serif;\n      <span class=\"hljs-attribute\">font-optical-sizing<\/span>: auto;\n    }\n    <span class=\"hljs-selector-tag\">body<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n      <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-webkit-text-size-adjust<\/span>: none;\n       <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#FFF<\/span>;\n       <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n    }\n    <span class=\"hljs-selector-tag\">a<\/span> {\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">text-decoration<\/span>: underline;\n    }\n    <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">prefers-color-scheme:<\/span> dark) {\n      <span class=\"hljs-selector-tag\">body<\/span> {\n        <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#333333<\/span> <span class=\"hljs-meta\">!important<\/span>;\n        <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#FFF<\/span> <span class=\"hljs-meta\">!important<\/span>;\n      }\n      <span class=\"hljs-selector-tag\">a<\/span> {\n      \t<span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#82a9ff<\/span>;\n      }\n    }\n    \n    <span class=\"hljs-selector-tag\">a<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\n      <span class=\"hljs-attribute\">border<\/span>: none;\n    }\n    \n    <span class=\"hljs-selector-tag\">h1<\/span> {\n      <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333333<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">26px<\/span>;\n      <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n      <span class=\"hljs-attribute\">text-align<\/span>: left;\n      <span class=\"hljs-attribute\">text-wrap<\/span>: balance;\n    }\n    <span class=\"hljs-selector-tag\">h2<\/span> {\n      <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333333<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">21px<\/span>;\n      <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">900<\/span>;\n      <span class=\"hljs-attribute\">text-align<\/span>: left;\n      <span class=\"hljs-attribute\">text-wrap<\/span>: balance;\n    }\n    \n    <span class=\"hljs-selector-tag\">p<\/span>,\n    <span class=\"hljs-selector-tag\">ul<\/span>,\n    <span class=\"hljs-selector-tag\">ol<\/span>,\n    <span class=\"hljs-selector-tag\">blockquote<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n      <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.625<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.sub<\/span> {\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">13px<\/span>;\n    }\n\n    <span class=\"hljs-selector-class\">.button<\/span> {\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">10px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">18px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">10px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">18px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">display<\/span>: inline-block;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#FFF<\/span> <span class=\"hljs-meta\">!important<\/span>;\n      <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n      <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">3px<\/span>;\n      <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.16<\/span>);\n      <span class=\"hljs-attribute\">-webkit-text-size-adjust<\/span>: none;\n      <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n    }\n    \n    <span class=\"hljs-selector-class\">.email-wrapper<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellpadding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellspacing<\/span>: <span class=\"hljs-number\">0<\/span>;\n    }\n    <span class=\"hljs-selector-class\">.email-content<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellpadding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellspacing<\/span>: <span class=\"hljs-number\">0<\/span>;\n    }\n    <span class=\"hljs-selector-class\">.email-body<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellpadding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellspacing<\/span>: <span class=\"hljs-number\">0<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.email-footer<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">570px<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-width<\/span>: <span class=\"hljs-number\">570px<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellpadding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-premailer-cellspacing<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n    }\n    <span class=\"hljs-selector-class\">.email-footer<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#A8AAAF<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.content-cell<\/span> {\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">35px<\/span>;\n    }\n      \n    <span class=\"hljs-keyword\">@media<\/span> <span class=\"hljs-keyword\">only<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">600px<\/span>) {\n      <span class=\"hljs-selector-class\">.email-footer<\/span> {\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n      }\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!--&#91;if mso]&gt;\n    &lt;style type=\"text\/css\"&gt;\n      .f-fallback  {\n        font-family: Arial, sans-serif;\n      }\n    &lt;\/style&gt;\n  &lt;!&#91;endif]--&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-wrapper\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"presentation\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-content\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"presentation\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-body\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"570\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-body_inner\"<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"570\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"presentation\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"content-cell\"<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f-fallback\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Hey folks!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Boy have I got some opinions for you. I don't mind HTML emails. Being allowed a bit of typography is appreciated. And hey, I like my links <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/codepen.io\"<\/span>&gt;<\/span>colorized and underlined<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>, myself, something that plain text just can't do.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>But don't go overboard. <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">em<\/span>&gt;<\/span>Maybe<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/span>&gt;<\/span> one image. If you absolutely have to do a two column thing, make sure it collapses to one on mobile.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>You know a button here and there is fun too.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/codepen.io\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"button\"<\/span>&gt;<\/span>A button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>But that's it. For real. Keep it chill. More people will read it. You gotta admit it looks nice right? I feel like even this email demo is getting a little long. I'd trim it up if it was a transactional email or if I really just had one call to action. An email newsletter could be longer I suppose.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Header<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n                        \n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>OK fine \u2014 a subheader or two can work. But only if the email is really long and it helps scanability.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-footer\"<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"570\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"presentation\"<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"content-cell\"<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f-fallback sub\"<\/span>&gt;<\/span>That's all folks.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f-fallback sub\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Company Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span> \u2022 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Unsubscribe<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/details>\n\n\n\n<p>It looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/clean-html-email-762x1024.png?resize=762%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-4214\" style=\"width:546px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/clean-html-email.png?resize=762%2C1024&amp;ssl=1 762w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/clean-html-email.png?resize=223%2C300&amp;ssl=1 223w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/clean-html-email.png?resize=768%2C1032&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/clean-html-email.png?w=942&amp;ssl=1 942w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/figure>\n<\/div>\n\n\n<p>But &#8220;it looks like this&#8221; is of course a gross simplification. Looks like this&#8230; where? The email client landscape is arguably even more complicated than the browser landscape. There are email clients that use Microsoft Word (?!) as the rendering engine. There are mobile-specific and desktop-specific clients. There are native clients across platforms. There are web-based clients. There are clients from two decades ago, and clients updated last week. <\/p>\n\n\n\n<p>I like the app <a href=\"https:\/\/litmus.com\/\">Litmus<\/a> for testing this stuff. It&#8217;s awfully expensive, but it allows you to see how your email will look across tons of clients and that&#8217;s pretty impressive and useful, so hey, you gotta do what you gotta do. Here&#8217;s a selection of screenshots of this email rendering:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"869\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?resize=869%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-4216\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?resize=869%2C1024&amp;ssl=1 869w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?resize=255%2C300&amp;ssl=1 255w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?resize=768%2C905&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?resize=1303%2C1536&amp;ssl=1 1303w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.34.57%E2%80%AFAM.png?w=1602&amp;ssl=1 1602w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<p>Those all turned out pretty decent across the board so I&#8217;m happy with that. I tend to focus on the extemes. So like does Outlook 2007 on Windows look OK? <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"854\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.36.44%E2%80%AFAM.png?resize=742%2C854&#038;ssl=1\" alt=\"\" class=\"wp-image-4217\" style=\"width:489px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.36.44%E2%80%AFAM.png?w=742&amp;ssl=1 742w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.36.44%E2%80%AFAM.png?resize=261%2C300&amp;ssl=1 261w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/figure>\n<\/div>\n\n\n<p>It&#8217;s not amazing, but for a 17-year-old email client, I&#8217;m going to call that a win. Web Gmail is sort of the other extreme. It&#8217;s new, and web-based, but also has rendering challenges, so testing that in Firefox on Windows is a good test.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"1010\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.41.23%E2%80%AFAM.png?resize=732%2C1010&#038;ssl=1\" alt=\"\" class=\"wp-image-4218\" style=\"width:456px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.41.23%E2%80%AFAM.png?w=732&amp;ssl=1 732w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.41.23%E2%80%AFAM.png?resize=217%2C300&amp;ssl=1 217w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure>\n<\/div>\n\n\n<p>Of course, we&#8217;ve gotta test mobile because not only is it a very different screen size it&#8217;s also an entirely different platform. Here&#8217;s Dark Mode on Android:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?resize=289%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-4223\" style=\"width:259px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?resize=289%2C1024&amp;ssl=1 289w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?resize=85%2C300&amp;ssl=1 85w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?resize=768%2C2724&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?resize=433%2C1536&amp;ssl=1 433w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-2-1.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 289px) 100vw, 289px\" \/><\/figure>\n<\/div>\n\n\n<p>I&#8217;ll call that a win.<\/p>\n\n\n\n<p>You&#8217;ll find that the Frontend Masters newsletter rolls like this! <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"861\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?resize=861%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-4221\" style=\"width:615px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?resize=861%2C1024&amp;ssl=1 861w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?resize=252%2C300&amp;ssl=1 252w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?resize=768%2C913&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?resize=1292%2C1536&amp;ssl=1 1292w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-10.56.00%E2%80%AFAM.png?w=1704&amp;ssl=1 1704w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><figcaption class=\"wp-element-caption\">With a red brand color as the links.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>While I was playing with all this, I was like: <strong>do we <em>reallllly<\/em> need to deal with all that <code>&lt;table&gt;<\/code> crap? <\/strong>Can&#8217;t we get away with something that looks more like just semantic HTML, particularly when we&#8217;re just trying to so little with the layout?<\/p>\n\n\n\n<p>The answer is no, we still need the <code>&lt;table&gt;<\/code> layout, sadly. I gave it a shot with this HTML, which I &#8220;modernized&#8221; into more basic HTML:<\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Modern HTML Email (Test)<\/summary><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n  \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"x-apple-disable-message-reformatting\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">http-equiv<\/span>=<span class=\"hljs-string\">\"Content-Type\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"text\/html; charset=UTF-8\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"color-scheme\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"light dark\"<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"supported-color-schemes\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"light dark\"<\/span> \/&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Email<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n      \n    <span class=\"hljs-keyword\">@import<\/span> url(<span class=\"hljs-string\">'https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&amp;display=swap'<\/span>);\n      \n    <span class=\"hljs-selector-pseudo\">:root<\/span> {\n      <span class=\"hljs-attribute\">color-scheme<\/span>: light dark;\n      <span class=\"hljs-attribute\">supported-color-schemes<\/span>: light dark;\n    }\n      \n    <span class=\"hljs-selector-tag\">body<\/span>,\n    <span class=\"hljs-selector-tag\">td<\/span>,\n    <span class=\"hljs-selector-tag\">th<\/span> {\n      <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">\"Inter\"<\/span>, Helvetica, Arial, sans-serif;\n      <span class=\"hljs-attribute\">font-optical-sizing<\/span>: auto;\n    }\n    <span class=\"hljs-selector-tag\">body<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">-webkit-text-size-adjust<\/span>: none;\n       <span class=\"hljs-attribute\">background-color<\/span>: Canvas;\n       <span class=\"hljs-attribute\">color<\/span>: CanvasText;\n    }\n    \n    <span class=\"hljs-selector-tag\">a<\/span> {\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#3869D4<\/span>;\n    }\n    <span class=\"hljs-selector-tag\">a<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\n      <span class=\"hljs-attribute\">border<\/span>: none;\n    }\n    \n    <span class=\"hljs-selector-tag\">h1<\/span>, <span class=\"hljs-selector-tag\">h2<\/span> {\n      <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333333<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">26px<\/span>;\n      <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">900<\/span>;\n      <span class=\"hljs-attribute\">text-wrap<\/span>: balance;\n    }\n    <span class=\"hljs-selector-tag\">h2<\/span> {\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">21px<\/span>;\n    }\n    \n    <span class=\"hljs-selector-tag\">td<\/span>,\n    <span class=\"hljs-selector-tag\">th<\/span> {\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n      <span class=\"hljs-attribute\">word-break<\/span>: break-word;\n    }\n    \n    <span class=\"hljs-selector-tag\">p<\/span>,\n    <span class=\"hljs-selector-tag\">ul<\/span>,\n    <span class=\"hljs-selector-tag\">ol<\/span>,\n    <span class=\"hljs-selector-tag\">blockquote<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n      <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.625<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.sub<\/span> {\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">13px<\/span>;\n    }\n\n    <span class=\"hljs-selector-class\">.button<\/span> {\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">10px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">18px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">10px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">18px<\/span> solid <span class=\"hljs-number\">#3869D4<\/span>;\n      <span class=\"hljs-attribute\">display<\/span>: inline-block;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#FFF<\/span>;\n      <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n      <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">3px<\/span>;\n      <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.16<\/span>);\n      <span class=\"hljs-attribute\">-webkit-text-size-adjust<\/span>: none;\n      <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n    }\n    <span class=\"hljs-keyword\">@media<\/span> <span class=\"hljs-keyword\">only<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">500px<\/span>) {\n      <span class=\"hljs-selector-class\">.button<\/span> {\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n        <span class=\"hljs-attribute\">text-align<\/span>: center <span class=\"hljs-meta\">!important<\/span>;\n      }\n    }\n    \n    <span class=\"hljs-selector-class\">.email-wrapper<\/span> {\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">570px<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n    }\n    \n    <span class=\"hljs-selector-class\">.email-footer<\/span> {\n    \t<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">100px<\/span>;\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n    } \n    <span class=\"hljs-selector-class\">.email-footer<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n    \t<span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#A8AAAF<\/span>;\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n  \n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-wrapper\"<\/span>&gt;<\/span>\n    \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Hey folks!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Boy have I got some opinions for you. I don't mind HTML emails. Being allowed a bit of typography is appreciated. And hey, I like my links <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/codepen.io\"<\/span>&gt;<\/span>colorized and underlined<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>, myself, something that plain text just can't do.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>But don't go overboard. <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">em<\/span>&gt;<\/span>Maybe<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">em<\/span>&gt;<\/span> one image. If you absolutely have to do a two column thing, make sure it collapses to one on mobile.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>You know a button here and there is fun too.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/codepen.io\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"button\"<\/span>&gt;<\/span>A button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>But that's it. For real. Keep it chill. More people will read it. You gotta admit it looks nice right? I feel like even this email demo is getting a little long. I'd trim it up if it was a transactional email or if I really just had one call to action. An email newsletter could be longer I suppose.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Header<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>OK fine \u2014 a subheader or two can work. But only if the email is really long and it helps scanability.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                   \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"email-footer\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>That's all folks.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Company Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span> \u2022 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Unsubscribe<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      \n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    \n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  \n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/details>\n\n\n\n<p>That looks fine in nice email clients like Apple Mail.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"948\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-11.02.17%E2%80%AFAM.png?resize=820%2C948&#038;ssl=1\" alt=\"\" class=\"wp-image-4224\" style=\"width:501px;height:auto\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-11.02.17%E2%80%AFAM.png?w=820&amp;ssl=1 820w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-11.02.17%E2%80%AFAM.png?resize=259%2C300&amp;ssl=1 259w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-11.02.17%E2%80%AFAM.png?resize=768%2C888&amp;ssl=1 768w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/figure>\n<\/div>\n\n\n<p>But Outlook 2007 and even modern OL Office can&#8217;t deal with the layout. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"930\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-1-1.png?resize=1024%2C930&#038;ssl=1\" alt=\"\" class=\"wp-image-4225\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-1-1.png?resize=1024%2C930&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-1-1.png?resize=300%2C272&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-1-1.png?resize=768%2C697&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/full-1-1.png?w=1366&amp;ssl=1 1366w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>An explict goal of mine here was reigning in that width and centering it such that the typography has a good line length, and apparently that can&#8217;t be done without tables. Oh well! This kind of thing is &#8220;do it once and use it for a long time&#8221; and hey, that&#8217;s the job.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>I&#8217;ve been enjoying playing with <a href=\"https:\/\/bolt.new\/\">bolt.new<\/a>, an AI generator for websites from StackBlitz. Just for kicks I asked it to create an over-the-top HTML email to see if we could get a good example of doing too much for this blog post. It spun up a Next.js app to do this, which is definitely over-the-top (lol) but I also sorta get it since the point is building web apps that StackBlitz is good at running. This is what I got though:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"1024\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?resize=725%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-4212\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?resize=725%2C1024&amp;ssl=1 725w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?resize=212%2C300&amp;ssl=1 212w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?resize=768%2C1085&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?resize=1087%2C1536&amp;ssl=1 1087w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-17-at-6.41.57%E2%80%AFAM.png?w=1366&amp;ssl=1 1366w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/figure>\n\n\n\n<p>Which is perfect and I take back everything bad I said about HTML emails.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can keep it chill and just use HTML email to apply a nice typeface, reign in the line length, use real links, and honor dark mode.<\/p>\n","protected":false},"author":1,"featured_media":4227,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[157,195,31],"class_list":["post-4210","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-dark-theme","tag-email","tag-html"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/10\/pexels-photo-278888.jpeg?fit=1880%2C1057&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4210"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4210\/revisions"}],"predecessor-version":[{"id":4228,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4210\/revisions\/4228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4227"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}