CINXE.COM

<!DOCTYPE html><html data-app-version="-production" lang="en"><head><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-solid-900-130191cbdfe1d7a5dde9.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-regular-400-7b8124cb811f19c72e48.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-brands-400-78547c4b11a377e195ff.woff2" as="font" type="font/woff2" crossorigin="anonymous"><script>window.Tutsplus = {}; window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; Tutsplus.environment = 'production'; Tutsplus.apexDomain = 'tutsplus.com'; Tutsplus.recaptchaSiteKey = '6Ldpx74UAAAAACuA5loIvNFtSYkAxOiK89Otp9dp'; Tutsplus.rollbarToken = '15981c89d2cb4b20994adb78613f9f59'; Tutsplus.rollbarEnabled = false; Tutsplus.ssoEnabled = true; Tutsplus.ssoServer = 'https://account.envato.com'; Tutsplus.ssoSignInPath = '/sso/sign_in.json'; Tutsplus.resetPasswordPath = 'https://account.envato.com/reset_password?to=tutsplus?to=tutsplus'; Tutsplus.forcedResetPasswordPath = 'https://account.envato.com/password_reset_required?to=tutsplus?to=tutsplus'; Tutsplus.adsEnabled = true; Tutsplus.is_posts_page = true; Tutsplus.is_post_page = true; Tutsplus.ext_social = false; Tutsplus.load_mathjax_library = false; Tutsplus.load_twitter_widget = false;</script><script type="text/javascript" data-turbo-eval="false"> window.addEventListener("CookiebotOnDialogDisplay", (event) => { const cookieDialog = event.srcElement.CookieConsentDialog.DOM cookieDialog.dataset.turbo = false }) </script> <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf" data-framework="TCFv2.2" type="text/javascript" data-georegions="{'region':'US','cbid':'d9683f70-895f-4427-97dc-f1087cddf9d8'}" async> </script> <script type="text/plain" data-cookieconsent="statistics" data-test-id="gtm-loader"> window['gtag_enable_tcf_support'] = true; if (!window.gtmLoaded) { (function(w,d,s,l,i) { w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l!='dataLayer'?'&l='+l:''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MXT8M8X'); window.gtmLoaded = true; } </script> <script src="https://static.tutsplus.com/packs/js/runtime-76a1416ff3535925e8ac.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/556-90d5ce5fe5cc14c13198.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/779-582d5befd4c454578e79.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/599-484f62584dbf173654de.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/697-a9d096daf58610e07328.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/894-832ae8a8953d06372554.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/post-7327cdaf9f3fb2bbf8ca.js" async="async" data-turbo-suppress-warning="" defer="defer"></script><link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/697-ce797325.css" /> <link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/post-4aef2c79.css" /><link href="/tailwind.css" rel="stylesheet" type="text/css" /><meta content="no-referrer-when-downgrade" name="referrer" /><meta charset="utf-8" /><meta content="no-cache" name="turbo-cache-control" /><meta content="reload" name="turbo-visit-control" /><meta content="" name="geo-regions" /><meta content="nocache" name="bingbot" /><link href="https://static.tutsplus.com" rel="preconnect" /><title>Build an HTML Email Template From Scratch | Envato Tuts+</title><link rel="canonical" href="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" /><link rel="icon" type="image/x-icon" href="https://static.tutsplus.com/packs/static/images/favicon-f8d459d2fa865233f59c.ico" /><link rel="apple-touch-icon" type="image/png" href="https://static.tutsplus.com/packs/static/images/apple-touch-icon-46747f8b314a25bfa124.png" /><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="https://tutsplus.com/posts.atom" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="index, follow" name="robots" /><meta content="Build an HTML Email Template From Scratch | Envato Tuts+" property="og:title" /><meta content="Web Design Envato Tuts+" property="og:site_name" /><meta content="1494084460809023" property="fb:app_id" /><meta content="The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building a simple HTML email template from scratch." name="description" property="og:description" /><link href="https://cms-assets.tutsplus.com" rel="preconnect" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" }, "headline": "Build an HTML Email Template From Scratch", "author": { "@type": "Person", "name": "Nicole Merlin", "url": "https://tutsplus.com/authors/nicole-merlin" }, "datePublished": "2021-05-27 07:46:26 UTC", "dateModified": "2024-01-05 15:51:00 UTC", "image": "https://cms-assets.tutsplus.com/uploads/users/2796/posts/9386/preview_image/HTML_Email2.png", "description": "The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building a simple HTML email template from scratch.", "url": "https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a", "publisher": { "@type": "Organization", "name": "Envato Tuts", "logo": { "@type": "ImageObject", "url": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png"} } }</script><meta content="article" property="og:type" /><meta content="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" property="og:url" /><link href="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="x-default" rel="alternate" /><link href="https://webdesign.tutsplus.com/de/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="de" rel="alternate" /><link href="https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="en" rel="alternate" /><link href="https://webdesign.tutsplus.com/es/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="es" rel="alternate" /><link href="https://webdesign.tutsplus.com/fr/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="fr" rel="alternate" /><link href="https://webdesign.tutsplus.com/id/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="id" rel="alternate" /><link href="https://webdesign.tutsplus.com/it/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="it" rel="alternate" /><link href="https://webdesign.tutsplus.com/ko/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="ko" rel="alternate" /><link href="https://webdesign.tutsplus.com/pt/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="pt" rel="alternate" /><link href="https://webdesign.tutsplus.com/ru/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="ru" rel="alternate" /><link href="https://webdesign.tutsplus.com/uk/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="uk" rel="alternate" /><link href="https://webdesign.tutsplus.com/vi/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="vi" rel="alternate" /><link href="https://webdesign.tutsplus.com/zh-hans/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="zh-hans" rel="alternate" /><link href="https://webdesign.tutsplus.com/zh-hant/build-an-html-email-template-from-scratch--webdesign-12770a" hreflang="zh-hant" rel="alternate" /><meta content="https://cms-assets.tutsplus.com/uploads/users/2796/posts/9386/preview_image/HTML_Email2.png" property="og:image" /><meta content="summary_large_image" name="twitter:card" /><meta content="@tutsplus" name="twitter:site" /><meta content="Build an HTML Email Template From Scratch" name="twitter:title" /><meta content="The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building a simple HTML email template from scratch." name="twitter:description" /><meta content="https://cms-assets.tutsplus.com/uploads/users/2796/posts/9386/preview_image/HTML_Email2.png" name="twitter:image" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Envato", "alternateName": "Envato Tuts+", "url": "https://tutsplus.com/", "logo": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png", "contactPoint": {"@type": "ContactPoint", "telephone": "+61 3 8376 6284", "contactType": "corporate contact"}, "parentOrganization": {"@type": "Organization", "name": "Envato Pty Ltd", "url": "https://www.envato.com/about"}, "sameAs": [ "https://tutsplus.com/", "https://business.tutsplus.com/", "https://code.tutsplus.com/", "https://design.tutsplus.com/", "https://webdesign.tutsplus.com/", "https://photography.tutsplus.com/", "https://music.tutsplus.com/", "https://cgi.tutsplus.com/", "https://gamedevelopment.tutsplus.com/", "https://computers.tutsplus.com/", "https://elements.envato.com/", "https://themeforest.net/", "https://codecanyon.net/", "https://audiojungle.net/", "https://videohive.net/", "https://graphicriver.net/", "https://photodune.net/", "https://3docean.net/", "https://placeit.net/", "https://mixkit.co/", "https://www.reshot.com/", "https://twitter.com/envato", "https://www.facebook.com/envato", "https://www.youtube.com/user/Envato", "https://www.instagram.com/envato/", "https://www.pinterest.com/envato/", "https://market.envato.com/" ] }</script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Envato Tuts+", "url": "https://tutsplus.com" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" }, "itemListElement": [{"@type":"ListItem","position":1,"name":"Home","item":{"@type":"Thing","@id":"https://tutsplus.com/"}},{"@type":"ListItem","position":2,"name":"Web Design","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com"}},{"@type":"ListItem","position":3,"name":"Email","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/email"}},{"@type":"ListItem","position":4,"name":"Email Design","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/email/s/email-design"}}] } </script> <meta content="t60fIs6JfmiK5FpPBlh_bKr5lJSX6abJYYIFjqiFG3M" name="google-site-verification" /><meta content="D3E35339A8EC086B14C62277CBEC8234" name="msvalidate.01" /><meta content="zvqxFgQqdy" name="baidu-site-verification" /></head><body class="page-body body--announcement-bar topic-webdesign post__fullwidth-inarticle-ad-footer" data-analytics-context="body" data-controller="ga-analytics content-filters utm" data-ga-autolink-domains="activeden.net,audiojungle.net,themeforest.net,videohive.net,graphicriver.net,3docean.net,codecanyon.net,photodune.net,market.envato.com,elements.envato.com,build.envatohostedservices.com,author.envato.com,envato.com" data-ga-domain="tutsplus.com" data-utm-is-content-page-value="true" data-utm-utm-campaign-value="webdesign-12770" data-utm-utm-medium-value="articles" data-wt-dcsid="dcs222cpd4g6lg7wb3cum8l5g_6w6m" name="page-body"> <script data-test-id="gtm-page-attributes"> window.dataLayer = window.dataLayer || []; function normalizeAttributeValue(value) { if (value === undefined) return undefined if (value === null) return undefined var normalizedValue = value .toString() .toLowerCase() .trim() .replace(/&/g, '&') .replace(/'/g, "'") .replace(/\s+/g, ' ') if (normalizedValue === '') return undefined return normalizedValue } (function () { if (document.documentElement.hasAttribute('data-turbo-preview')) return var pageAttributes = { app_name: 'tutsplus', app_version: '582', app_env: 'production', topic: 'web design', page_type: 'article', category: 'Email', sub_category: 'Email Design', software_tag: '', tag: '', ga_param: '' } var normalizedPageAttributes = { event_attributes: null } Object.keys(pageAttributes).forEach(function(key) { normalizedPageAttributes[key] = normalizeAttributeValue(pageAttributes[key]) }) dataLayer.push(normalizedPageAttributes) dataLayer.push({ event: 'analytics_ready', event_attributes: { custom_timestamp: Date.now() } }) })() </script> <noscript data-test-id="gtm-noscript"> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MXT8M8X" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript>  <script src="https://static.tutsplus.com/packs/js/global_nav_scroll-e15d1af062eca0d35d71.js" defer="defer"></script><nav class="global-nav view new-nav" data-analytics-context="navigation" data-controller="global-nav"><a class="global-new-nav__skip-to-content-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="#page-content">Skip to content</a><div class="announcement-bar view announcement-bar--open" data-controller="announcement-bar" data-announcement-id="newbrand_dec24" data-background-image="" data-fallback-background-color="#9CEE69" data-text-color="#000000" data-link-color="#FFFFFF" data-analytics-context="announcement bar" > <div class="announcement-bar__content"> <div class="announcement-bar__primary"> <div class="announcement-bar__title"> <div align="center" class="font-family-polysan-regular"> <span class="announcement-bar__title-desktop"> <strong>Unlimited fonts, graphic templates, mockups, add-ons & more </strong> </span> <span class="announcement-bar__title-mobile"> <strong>Unlimited creative assets </strong> </span> <a rel="noskim" href="https://elements.envato.com/?utm_source=tutsplus.com&utm_medium=promos&utm_campaign=elements_tuts-header_promo" data-action="click->ga-analytics#sendElementsClickEvent">From $16.50/m</a> </div> <style> .announcement-bar__title a { border-radius:4px; background-color:#191919; padding:0px 20px; box-shadow:0px 0px 0px #aeec7b; margin:10px 10px 10px 10px; font-size:12px; height:30px; line-height:30px; text-decoration:none; color:#ffffff; } .announcement-bar__title a:hover { background-color: #383838; text-decoration:none; color:#25410d; } </style> </div> </div> <div class="announcement-bar__secondary"> <a title="Close this announcement bar" class="announcement-bar__close-link" data-action="click->announcement-bar#close click->global-nav#onAnnouncementBarClose" href="#"> <span class="announcement-bar__close-label">Dismiss</span> <i class="fa fa-times announcement-bar__close-icon"></i> </a> </div> </div> </div> <div class="global-nav__mobile-closed"><div class="nav-actions"><a class="mobile-menu-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-reorder"></i></a><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-search-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-magnifying-glass"></i></a></div></div><div class="global-nav__mobile-overlay"></div><div class="global-nav__mobile-new"><section class="view global-nav__mobile-open-header"><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-close-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-times"></i></a></section><section class="global-nav__mobile-search view new-nav-mobile" data-controller="global-search"><form class="global-nav__search-form mobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="font-family-polysan-regular !global-nav__search-terms" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></section><ul class='global-nav__mobile-top-level new-nav-mobile'> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Design'> <a href='https://design.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Design </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Business'> <a href='https://business.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Business </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Photo'> <a href='https://photography.tutsplus.com/photo' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Photo </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Video'> <a href='https://photography.tutsplus.com/video' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Video </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Web Design'> <a href='javascript:' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action='click->global-nav#toggleSecondLevelSection'> <span class='global-nav__mobile-top-level-link-title'> Web Design </span> <span class='global-nav__mobile-top-level-expand-text'> <i class='fa fa-angle-right global-nav__mobile-top-level-link-icon'></i> </span> </a> <div class='global-nav__mobile-second-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleSecondLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-second-level-heading '> <span class='global-nav__mobile-second-level-heading-title'> Web Design </span> <a href='https://webdesign.tutsplus.com' class='global-nav__mobile-second-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-second-level-heading-link-text'> View all Web Design </span> <span class='global-nav__mobile-second-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title'>Start Learning</div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Software'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Software </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading global-nav__mobile-third-level-heading-without-link'> <span class='global-nav__mobile-third-level-heading-title'> Software </span> </section> <div class='global-nav__mobile-third-level-links-title empty-title'> </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> AI Tools </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='WordPress'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> WordPress </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> WordPress </span> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all WordPress </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Elementor </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='HTML/CSS'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> HTML/CSS </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> HTML/CSS </span> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all HTML/CSS </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> CSS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Animation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> SVG </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Email'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Email </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> Email </span> <a href='https://webdesign.tutsplus.com/c/email' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all Email </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Marketing </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in Email </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='UX/UI'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> UX/UI </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> UX/UI </span> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all UX/UI </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title '>Learn UI Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Forms </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Navigation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Material Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Systems </span> </a> </li> </ul> <div class='global-nav__mobile-second-level-links-title '>Learn UX Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Research </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Testing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Usability </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Accessibility </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in UX/UI </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='SEO'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> SEO </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> SEO </span> <a href='https://webdesign.tutsplus.com/c/seo' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all SEO </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Conversion </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Performance </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='eCommerce'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> eCommerce </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> eCommerce </span> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all eCommerce </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Shopify </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Magento </span> </a> </li> </ul> </div> </div> </li> </ul> <div class='global-nav__mobile-second-level-links-title '> popular software in Web Design </div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Adobe XD </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Code'> <a href='https://code.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Code </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Music'> <a href='https://music.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Music </span> </a> </li> </ul> <hr class="global-nav__mobile-divider" /><ul class="global-nav-mobile__envato-links new-nav-mobile"><li class="global-nav__mobile-top-level-item"><turbo-frame id="user_mobile_session_info" loading="lazy" src="/user_mobile_session?show_greeting=false"><a data-turbo="false" class="global-nav__mobile-user-link" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Fbuild-an-html-email-template-from-scratch--webdesign-12770a">Sign In</a></turbo-frame></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link font-family-polysan-regular" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q">Tuts+ YouTube</a></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://elements.envato.com">Envato</a></li></ul></div><div class="global-new-nav__header"><div class="global-new-nav__header-content"><div class="global-new-nav__header-top"><div class="global-new-nav__header-right"><ul class="global-new-nav__header-list"><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Envato Elements</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link leading-5 font-family-polysan-regular" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Tuts+ YouTube</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><turbo-frame id="user_session_info" loading="lazy" src="/user_session"><a data-turbo="false" class="global-new-nav__user-link font-bold leading-5 font-family-polysan-regular-bulky" rel="nofollow" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Fbuild-an-html-email-template-from-scratch--webdesign-12770a">Sign In</a></turbo-frame></li></ul></div></div><div class="global-new-nav__header-bottom"><ul class="global-nav__header-list" data-controller="subcategories-nav"><li class="global-nav__header-item global-nav__header-item-tuts-logo"><a class="global-nav__header-tuts-logo-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a></li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Design</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Business</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Photo</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Video</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median global-nav__top-level-item--expanded'> <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Web Design</span> </a> <div class='global-new-nav__header-second-level'> <ul class='global-nav__header-second-level-list'> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name="Software"> <div class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'>Software</span> <i class='fa fa-chevron-down'></i> </div> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> AI Tools </span> </a> </li> </ul> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='WordPress'> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> WordPress </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Elementor </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All WordPress </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='HTML/CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> HTML/CSS </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> CSS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Animation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> SVG </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All HTML/CSS </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item active-category ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Email'> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> Email </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Marketing </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All Email </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='UX/UI'> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> UX/UI </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UI Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Forms </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Navigation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Material Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Systems </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ui-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UI Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UX Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Research </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Testing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Usability </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Accessibility </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ux-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UX Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> </ul> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='SEO'> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> SEO </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Conversion </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Performance </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All SEO </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='eCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> eCommerce </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Shopify </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Magento </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All eCommerce </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> </ul> </div> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Code</span> </a> </li> <li class='global-nav__header-item font-semibold leading-5 !px-2 !pb-[5px] font-family-polysan-regular-median '> <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary !font-semibold' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Music</span> </a> </li> </ul><div class="global-new-nav__header-right" data-controller="global-search"><form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="placeholder:leading-5 global-nav__search-terms !font-family-polysan-regular search-terms-nonmobile" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></div></div></div></div></nav><div class="empty-sticky-nav-background-div" style="height: 207px"></div><div class="page-content topic-webdesign " id="page-content"><main class="content" style="background-color: transparent;"><div class="content-banner"><div class="content-banner-restricted-width full_width_post"><ol class="content-banner__content-breadcrumb topic-webdesign content-banner__content-breadcrumb-with-primary-category" data-controller="breadcrumbs-component" data-analytics-context="breadcrumbs"> <li class='breadcrumbs-link-item__home-icon'> <a href="https://tutsplus.com/" > <img alt="envato-tuts+" src="https://static.tutsplus.com/packs/static/images/home-67b42eb75817c9594bed.svg" /> </a> </li> <li class='breadcrumbs-link-item__home'> <a href="https://tutsplus.com/" > Home </a> </li> <li> <a href="https://webdesign.tutsplus.com" > Web Design </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/email" > Email </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/email/s/email-design" > Email Design </a> </li> </ol> <div class="content-banner__content"><div class="content-banner__body"><h1 class="content-banner__title font-family-polysan-regular-median">Build an HTML Email Template From Scratch</h1></div></div></div></div><div class="content-title"></div><input type="hidden" name="registrations_post_languages" id="registrations_post_languages" value="en" autocomplete="off" /><input type="hidden" name="registrations_primary_category_name" id="registrations_primary_category_name" value="Email" autocomplete="off" /><input type="hidden" name="registrations_primary_subcategory_name" id="registrations_primary_subcategory_name" value="Email Design" autocomplete="off" /><input type="hidden" name="registrations_content_type" id="registrations_content_type" value="Article" autocomplete="off" /><article class="post article view full_width_post " data-action="count-headings@window->post-promotion-placement#checkSidebarAdDisplayCondition" data-auto-insert-signup-is-enable-value="true" data-controller="inline-toc-analytics scroll-position sticky-ad post-promotion-placement auto-insert-signup"><div class='post-on-scroll-floating-buttons-group__container' data-controller='sticky-block' data-scroll-height-definer='.post-body__content' data-sticky-block-target='stickyElement' data-sticky-bottom='true'> <a href="#page-body" class="scroll-to-target" data-controller="scroll-to-target-tracking" data-action="click->scroll-to-target-tracking#onClick" data-label="Scroll to top" data-target-selector="#page-body"> <span class="scroll-to-target__btn-label">Scroll to top</span> <i class="fa fa-chevron-down scroll-to-target__btn-icon"></i> </a> </div> <div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="5"><turbo-frame id="publift_lazy_article_mid_1" loading="lazy" src="/promotions/publift_promotion?position=article_mid_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_article_mid_2" loading="lazy" src="/promotions/publift_promotion?position=article_mid_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="3"><turbo-frame id="publift_lazy_mob_article_top" loading="lazy" src="/promotions/publift_promotion?position=mob_article_top&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_mob_article_1" loading="lazy" src="/promotions/publift_promotion?position=mob_article_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="11"><turbo-frame id="publift_lazy_mob_article_2" loading="lazy" src="/promotions/publift_promotion?position=mob_article_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="layout__content-with-sidebar"><div class="content-heading"><div><div class='content-heading__author-bio-and-meta-info'> <div class='content-heading__author-bio'> <img class="content-author__image" alt="Nicole Merlin" width="40" height="40" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=80/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x" loading="lazy" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=40/uploads/users/55/profiles/1369/profileImage/400x400.jpg" /> <div class='content-heading__author-name-publish-date-and-read-time'> <span class='content-heading__author-name'> <a rel="author" aria-label="Author: Nicole Merlin" href="https://tutsplus.com/authors/nicole-merlin">Nicole Merlin</a> </span> <div class='content-heading__publish-date-and-read-time'> <time datetime="2024-01-05T15:51:00Z" title="Jan 5, 2024"> Jan 5, 2024 </time> <span class='content-heading__separator'>•</span> 18 min read </div> </div> </div> <div class="content-heading__meta-info"> <div class='content-heading__meta-info-item'> <span class="content-heading__meta-info-likes">128</span> <div class='content-heading__meta-info-likes-icon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-e80969147d3487ef9dc5.svg" /> </div> </div> <div class="languges-and-sharing-component"> <div class='content-heading__meta-info-language-selector' data-controller="section-header" data-menu-class="language-selector-wrapper"> <div class="language-selector-wrapper relative [&.open-popup>ul]:block"> <a class="flex text-sm px-2 items-center font-semibold text-grey-700" data-action="click->section-header#displayMenu" href="javascript:"> <div class='content-heading__meta-info-language-selector-icon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/globe-aa9dbd58d8ee3a4d53a3.svg" /> </div> <span class="pr-2">English</span> <i class="fa fa-chevron-down !p-0 !text-xs" aria-hidden="true"></i> </a> <ul class="hidden right-[-2px] rounded-md bg-white absolute p-0 m-0 min-w-[150px] z-[5] shadow-md shadow-black/30 overflow-auto max-h-[400px] mt-1"> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/ru/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Pусский </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 !text-white bg-blue-500" href="javascript:"> <i class="fa fa-check pr-2 " aria-hidden="true"></i> English </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/de/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Deutsch </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/pt/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Português </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/fr/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Français </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/id/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Bahasa Indonesia </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/es/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Español </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/it/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Italiano </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/zh-hans/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> 中文（简体） </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/zh-hant/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> 中文（繁體） </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/ko/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> 한국어 </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/vi/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Tiếng Việt </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/uk/build-an-html-email-template-from-scratch--webdesign-12770a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> українська мова </a> </li> </ul> </div> </div> <div data-controller="share-icon" class='content-heading__social_share'> <div class="share-icon" > <a class="social-link facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a" target="_blank"> <svg class="social-icon social-icon-fb" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M7.69921 19.3126V12.956H5.73572V10.0349H7.69921V8.77635C7.69921 5.52236 9.16588 4.01445 12.3484 4.01445C12.6667 4.01445 13.1064 4.0479 13.5135 4.09649C13.8185 4.12799 14.121 4.17988 14.4191 4.25182V6.90042C14.2467 6.88429 14.0739 6.87473 13.9008 6.87175C13.7069 6.8667 13.513 6.86431 13.3191 6.86458C12.7579 6.86458 12.3198 6.94105 11.9897 7.11072C11.7677 7.22249 11.5811 7.39404 11.4508 7.60619C11.246 7.94075 11.154 8.39878 11.154 9.00178V10.0349H14.2643L13.9579 11.7101L13.7302 12.956H11.154V19.5237C15.8698 18.9518 19.5238 14.9219 19.5238 10.0349C19.5238 4.75605 15.2595 0.476074 10 0.476074C4.74048 0.476074 0.476196 4.75605 0.476196 10.0349C0.476196 14.518 3.5508 18.2794 7.69921 19.3126Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href=https://www.linkedin.com/shareArticle?mini=true&url=https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a&title=Build%20an%20HTML%20Email%20Template%20From%20Scratch&summary=The%20best%20way%20to%20understand%20any%20process%20is%20to%20carry%20it%20out%20yourself%2C%20from%20the%20ground%20up.%20Today%2C%20we%E2%80%99re%20going%20to%20do%20just%20that%20with%20email%20design%2C%20by%20building%20a%20simple%20HTML%20email%20template%20from%20scratch. target="_blank"> <svg class="social-icon social-icon-linkedin" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5227 19.5237H15.5809V13.3374C15.5809 11.8622 15.551 9.96378 13.5269 9.96378C11.4717 9.96378 11.1579 11.5689 11.1579 13.2285V19.5237H7.21614V6.80232H11.0026V8.53635H11.0536C11.5827 7.53659 12.8692 6.48129 14.7913 6.48129C18.7851 6.48129 19.5238 9.11399 19.5238 12.5409L19.5227 19.5237ZM2.76423 5.06163C1.49542 5.06163 0.476166 4.03299 0.476166 2.76774C0.476166 1.5036 1.49653 0.476074 2.76423 0.476074C4.0286 0.476074 5.05341 1.5036 5.05341 2.76774C5.05341 4.03299 4.02749 5.06163 2.76423 5.06163ZM4.74064 19.5237H0.787822V6.80232H4.74064V19.5237Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href="https://www.pinterest.com/pin/create/button/?url=https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a&description=The%20best%20way%20to%20understand%20any%20process%20is%20to%20carry%20it%20out%20yourself%2C%20from%20the%20ground%20up.%20Today%2C%20we%E2%80%99re%20going%20to%20do%20just%20that%20with%20email%20design%2C%20by%20building%20a%20simple%20HTML%20email%20template%20from%20scratch." target="_blank"> <div class="icon"> <svg class="social-icon social-icon-pinterest" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10.014 0.476074C4.74628 0.476074 0.476257 4.7356 0.476257 9.98957C0.476257 14.0205 2.98878 17.4634 6.53719 18.8483C6.45365 18.0951 6.37886 16.9412 6.56981 16.1189C6.74405 15.3753 7.68843 11.3912 7.68843 11.3912C7.68843 11.3912 7.40281 10.8197 7.40281 9.97766C7.40281 8.65782 8.17216 7.66734 9.12768 7.66734C9.94239 7.66734 10.3354 8.27766 10.3354 9.00703C10.3354 9.82369 9.81588 11.0443 9.54617 12.1753C9.31943 13.1221 10.0235 13.8935 10.9584 13.8935C12.6514 13.8935 13.9562 12.1118 13.9562 9.53877C13.9562 7.26814 12.3149 5.67449 9.97182 5.67449C7.2588 5.67449 5.66839 7.70782 5.66839 9.80068C5.66839 10.6205 5.98186 11.5015 6.37568 11.9761C6.45445 12.0713 6.46479 12.1546 6.44331 12.2499C6.3717 12.5475 6.2102 13.2015 6.17758 13.3316C6.13541 13.5102 6.04073 13.5467 5.85854 13.4626C4.6691 12.915 3.92283 11.1785 3.92283 9.77528C3.92283 6.77846 6.10915 4.01973 10.224 4.01973C13.5322 4.01973 16.1052 6.37449 16.1052 9.51417C16.1052 12.7959 14.031 15.4364 11.1461 15.4364C10.1803 15.4364 9.27328 14.9372 8.95185 14.3419L8.35595 16.6023C8.14193 17.4316 7.55716 18.4689 7.16413 19.0991C8.05759 19.3729 8.9988 19.5237 9.98853 19.5237C15.2451 19.5237 19.5239 15.2658 19.5239 10.0102C19.5239 4.75385 15.2451 0.496709 9.98853 0.496709L10.014 0.476074Z"/> </svg> </div> </a> </div> <div class="share-icon"> <a class="social-link" href="https://x.com/intent/post?url=https://webdesign.tutsplus.com/build-an-html-email-template-from-scratch--webdesign-12770a&text=Build%20an%20HTML%20Email%20Template%20From%20Scratch" target="_blank"> <svg class="social-icon social-icon-x" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M15.477 0.428467H18.3977L12.0167 7.69085L19.5238 17.5713H13.6461L9.04289 11.5781L3.77464 17.5713H0.852417L7.67781 9.80318L0.476227 0.429257H6.50321L10.6643 5.90726L15.477 0.428467ZM14.4524 15.8312H16.0707L5.62385 2.07771H3.88734L14.4524 15.8312Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link copy-button" href="javascript:void(0)" data-action="click->share-icon#copyDomain"> <svg class="social-icon social-icon-link" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9817 9.46401L15.1331 12.3126C14.6442 12.8015 14.0638 13.1894 13.4251 13.454C12.7863 13.7186 12.1016 13.8548 11.4102 13.8548C10.7188 13.8548 10.0341 13.7186 9.39535 13.454C8.75657 13.1894 8.17616 12.8015 7.68728 12.3126C7.56675 12.2123 7.46847 12.0879 7.39869 11.9475C7.32892 11.8071 7.28919 11.6536 7.28204 11.497C7.27489 11.3403 7.30047 11.1839 7.35716 11.0377C7.41386 10.8915 7.50041 10.7587 7.61129 10.6478C7.72218 10.5369 7.85496 10.4504 8.00117 10.3937C8.14738 10.337 8.30381 10.3114 8.46046 10.3185C8.61711 10.3257 8.77056 10.3654 8.91099 10.4352C9.05143 10.505 9.17578 10.6033 9.2761 10.7238C9.84289 11.2847 10.6081 11.5993 11.4055 11.5993C12.2029 11.5993 12.9681 11.2847 13.5349 10.7238L16.3835 7.87518C16.9483 7.31043 17.2655 6.54446 17.2655 5.74578C17.2655 4.9471 16.9483 4.18114 16.3835 3.61638C15.8188 3.05163 15.0528 2.73436 14.2541 2.73436C13.4554 2.73436 12.6895 3.05163 12.1247 3.61638L11.2222 4.52831C11.0102 4.74025 10.7228 4.85932 10.4231 4.85932C10.1233 4.85932 9.83589 4.74025 9.62395 4.52831C9.41201 4.31638 9.29295 4.02893 9.29295 3.7292C9.29295 3.42948 9.41201 3.14203 9.62395 2.93009L10.5359 2.01816C11.5233 1.03078 12.8624 0.476074 14.2588 0.476074C15.6552 0.476074 16.9943 1.03078 17.9817 2.01816C18.9691 3.00554 19.5238 4.34472 19.5238 5.74108C19.5238 7.13745 18.9691 8.47663 17.9817 9.46401ZM8.77783 15.4715L7.87531 16.3834C7.31055 16.9481 6.54459 17.2654 5.74591 17.2654C4.94723 17.2654 4.18126 16.9481 3.61651 16.3834C3.05175 15.8186 2.73448 15.0527 2.73448 14.254C2.73448 13.4553 3.05175 12.6893 3.61651 12.1246L6.46511 9.27598C7.03189 8.71507 7.7971 8.40044 8.59451 8.40044C9.39192 8.40044 10.1571 8.71507 10.7239 9.27598C10.9402 9.45602 11.216 9.54872 11.4971 9.53588C11.7782 9.52305 12.0444 9.40562 12.2434 9.20663C12.4424 9.00764 12.5598 8.74146 12.5726 8.46034C12.5855 8.17922 12.4928 7.90345 12.3127 7.68716C11.8245 7.1971 11.2443 6.80826 10.6054 6.54295C9.96654 6.27763 9.28158 6.14105 8.58981 6.14105C7.89804 6.14105 7.21307 6.27763 6.57421 6.54295C5.93534 6.80826 5.35514 7.1971 4.86688 7.68716L2.01828 10.5358C1.0309 11.5231 0.476196 12.8623 0.476196 14.2587C0.476196 15.6551 1.0309 16.9942 2.01828 17.9816C3.00566 18.969 4.34484 19.5237 5.74121 19.5237C7.13757 19.5237 8.47675 18.969 9.46413 17.9816L10.3761 17.0697C10.588 16.8577 10.7071 16.5703 10.7071 16.2706C10.7071 15.9708 10.588 15.6834 10.3761 15.4715C10.1641 15.2595 9.87667 15.1405 9.57695 15.1405C9.27722 15.1405 8.98977 15.2595 8.77783 15.4715Z"/> </svg> </a> <div id="toast">Copied to clipboard!</div> </div> </div> </div> </div> </div> </div><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/email"> <span class="content-heading__secondary-categories-tag"> Email </span> </a> <a href="https://webdesign.tutsplus.com/c/email/s/email-design"> <span class="content-heading__secondary-categories-tag"> Email Design </span> </a> <a href="https://webdesign.tutsplus.com/c/email/s/email-templates"> <span class="content-heading__secondary-categories-tag"> Email Templates </span> </a> </div> </div></div><div class="post-body view" data-controller="post-body animate-hash-anchors image-gallery" data-post-title="Build an HTML Email Template From Scratch"><div class="post-body__body"><div class="post-body__content"><style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iftt{background-color:rgb(243, 245, 246);}#ilrb7{background-color:rgb(243, 245, 246);}#ia8vx{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i58p"><p>The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building a simple HTML email template from scratch.</p></div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="iftt"><div class="full-width-section__content-container div-container"> <div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="ic9f"> <h2 id="toc-u2zk-the html-email-template-were-building">The HTML Email Template We’re Building</h2> <p>This is the HTML email template you’re looking for—feel free to fork the pen and use it yourself. Bear in mind that when we’re viewing this email HTML template through a web browser we’re much less likely to run into problems than with email clients.</p> <p><iframe src="https://codepen.io/tutsplus/embed/aboBgLX/?height=600&theme-id=12451&default-tab=result&embed-version=2" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"></iframe></p> </div> <div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ioww"><blockquote> <p>“The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage.” – <a href="https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4" target="_self">Caity G. O’Connor</a></p> </blockquote></div> </div></div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents"> <div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="ix3q"><p>Jump to sections in this HTML email template tutorial:</p></div> <ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow visual-toc-list__unequal-split" start="0"> <li class="toc-item-title"><a href="#toc-5f0n-begin-your-html-email-document"><span class="visual-toc__heading-title content-container">Begin Your HTML Email Document</span></a></li> <li class="toc-item-title"><a href="#toc-2tri-create-the-body-and-main-table"><span class="visual-toc__heading-title content-container">Create the Body and Main Table</span></a></li> <li class="toc-item-title"><a href="#toc-nsa4-create-the-html-email-template-structure-and-header"><span class="visual-toc__heading-title content-container">Create the HTML Email Template Structure and Header</span></a></li> <li class="toc-item-title"><a href="#toc-3bio-create-the-content-area"><span class="visual-toc__heading-title content-container">Create the Content Area</span></a></li> <li class="toc-item-title"><a href="#toc-ca93-style-the-email-template-footer"><span class="visual-toc__heading-title content-container">Style the Email Template Footer</span></a></li> <li class="toc-item-title"><a href="#toc-m0en-style-the-text"><span class="visual-toc__heading-title content-container">Style the Text</span></a></li> <li class="toc-item-title"><a href="#toc-zg0k-run-some-tests"><span class="visual-toc__heading-title content-container">Run Some Tests</span></a></li> <li class="toc-item-title"><a href="#toc-tvv9-youve-created-a-simple-html-email"><span class="visual-toc__heading-title content-container">You’ve Created a Simple HTML Email!</span></a></li> </ul> </div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9uid"> <h2 id="toc-5f0n-begin-your-html-email-document"> <span class="sectionnum">1.</span> Begin Your HTML Email Document</h2> <p>To begin with, it’s worth mentioning where I pulled some of the resources from.</p> <ul> <li>The lovely 2D icons are by <a href="https://elements.envato.com/50-email-and-message-icons-flat-BWKFQDN" target="_self" data-action="click->ga-analytics#sendElementsClickEvent">Justicon on Envato Elements</a> </li> <li>The social media icons are from <a href="https://www.alessioatzeni.com/metrize-icons/">Metrize Icons</a> </li> </ul> <p>Now, as we discussed in the <a href="https://webdesign.tutsplus.com/what-you-should-know-about-html-email--webdesign-12908t" target="_self">previous tutorial</a>, you’ll need to begin your simple <a href="https://webdesign.tutsplus.com/html-hypertext-markup-language--cms-106838a" target="_self">HTML</a> email template with an HTML doctype, and the correct language for your subscribers. In this case, we are going to use the HTML5 doctype, set our language to English with <code><html lang="en"></code>, and also include the XML and Microsoft Office namespaces (the <code>xmlns</code> bits). We are going to need these a few lines down, as I’ll explain.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><!DOCTYPE html></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><html</span> <span style="color: #6a9fb5">lang=</span><span style="color: #90a959">"en"</span> <span style="color: #6a9fb5">xmlns=</span><span style="color: #90a959">"http://www.w3.org/1999/xhtml"</span> <span style="color: #6a9fb5">xmlns:o=</span><span style="color: #90a959">"urn:schemas-microsoft-com:office:office"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><head></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><meta</span> <span style="color: #6a9fb5">charset=</span><span style="color: #90a959">"UTF-8"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><meta</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"viewport"</span> <span style="color: #6a9fb5">content=</span><span style="color: #90a959">"width=device-width,initial-scale=1"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><meta</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"x-apple-disable-message-reformatting"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><title></title></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #949494"></span> </pre></td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><style></span> </pre></td> </tr> <tr id="line-18" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">table</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">td</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">div</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">h1</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">p</span> <span style="color: #d0d0d0">{</span><span style="color: #d0d0d0;background-color: #151515">font-family</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">Arial</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">sans-serif</span><span style="color: #d0d0d0">;}</span> </pre></td> </tr> <tr id="line-19" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75">table</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">td</span> <span style="color: #d0d0d0">{</span><span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span><span style="color: #90a959">2px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #90a959">#000000</span> <span style="color: #f4bf75">!important</span><span style="color: #d0d0d0">;}</span> </pre></td> </tr> <tr id="line-20" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></style></span> </pre></td> </tr> <tr id="line-21" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></head></span> </pre></td> </tr> <tr id="line-22" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></html></span> </pre></td> </tr> </tbody></table></div> <p>There are quite a few things in the code above, but it’s the bare minimum you need to ensure your final HTML in email renders beautifully everywhere.</p> <p>Firstly, we have a few <code>meta</code> tags to ensure the right text encoding, viewport scaling across different mobile devices, and one to stop Apple from strangely adjusting the size in their mail apps.</p> <p>Underneath the <code><title></title></code> tag you’ll see some code between <code></code>. Placing code inside those two tags means that only Microsoft Outlook on Windows will apply it (<strong>mso</strong> = “<strong>M</strong>icro<strong>s</strong>oft <strong>O</strong>utlook”). In there, we have a small amount of XML that will ensure that PNG images display at the right size in Outlook on Windows. The <code>xlmns</code> settings that we put in the <code>html</code> tag ensures this code gets interpreted properly.</p> <p>Underneath that, we have a <code>style</code> tag with just a couple of CSS rules. The first sets the font for all our main elements in the simple email template, and this is for the benefit of Gmail webmail, which will override our font settings unless we include this. If you end up changing your fonts later, be sure to make the change here too.</p> <p>Finally, we are including <code>table, td {border:2px solid #000000 !important;}</code> which will draw a border on everything. This is purely so that we can see what we are doing as we build, and we’ll remove it at the end.</p> <p>With that sorted, we can commence building the rest of the structure of our basic HTML email template.</p> </div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iq5dz"> <h2 id="toc-2tri-create-the-body-and-main-table"> <span class="sectionnum">2.</span> Create the Body and Main Table</h2> <p>First, we’ll add an overall structure for our email, starting with a <code><body></code> tag. Add the code below directly underneath the <code></head></code> tag:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><body</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0;padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">align=</span><span style="color: #90a959">"center"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> Hello! </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></table></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></body></span> </pre></td> </tr> </tbody></table></div> <p>You can see the margin and padding on the body tag are set to zero to avoid any unexpected space in the HTML email framework.</p> <p>We’ve also added a table with a width of 100%. This acts as a true body tag for our email, because the body tag is sometimes removed by email clients. Apply any “body” background colour that you want to this table tag.</p> <p>All our tables will be set to <code class="inline">role="presentation"</code>. This makes them more accessible, as it tells screen readers to treat it as a visual table, not a data table.</p> <p>We have set <code>border-collapse</code> to <code>collapse</code>, and both <code>border</code> and <code>border-spacing</code> to zero to avoid any unexpected space in the table.</p> <p>You’ll notice we are using <code><td align="center"></code>, and if you’re already familiar with HTML you might be wondering why, since <code>align</code> is actually a deprecated HTML property. We use this in HTML email templates because email clients vary so widely in their level of CSS support, and often we still need to use deprecated HTML to ensure everything displays properly everywhere. In this instance, it is because Outlook for Windows does not obey <code>margin:0 auto;</code> in CSS to center things.</p> <p>Finally, make sure you always set the padding on your table cells to zero in the inline styles, e.g. <code><td style="padding:0;"></code>, otherwise, email clients will all add their own amount of padding. When we do add padding ourselves, we can adjust this value, but if there is no padding to be applied to any of the sides, you must explicitly set it to zero. </p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png" alt="Our first HTML email layout section" loading="lazy" width="870px" height="414px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png" alt="Our first HTML email layout section" loading="lazy" width="650px" height="312px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png" alt="Our first HTML email layout section" loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-13-1.png 2x"></figure> </div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="ilrb7"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itobi"> <h3 id="toc-6ric-a-note-on-using-css-padding-shorthand">A Note on Using CSS Padding Shorthand</h3> <p>When using CSS padding on table cells, you can reliably write it three ways. Either specify one value, e.g. <code>padding: 20px</code> which will apply 20 pixels of padding to every side of your cell (top, right, bottom and left), or specify padding in pairs, i.e. <code>padding: 10px 20px</code>, which will add 10 pixels padding to both top and bottom, plus 20 pixels to both left and right. If neither of those are suitable, you should declare every side, i.e. <code>padding: 10px 10px 0 5px</code>. In all cases you must set each value, even if some of them are zero. Additionally, only specifying three values can have unpredictable results across email clients. </p> <p>Padding works reliably on table cells in all email clients, but if you are having trouble with padding, there is no need to resort to spacer GIFs. In a pinch you can use spacer divs or spacer cells. Just include a non-breaking space character (<code>&nbsp;</code>) inside, set a matching height and line height, and be sure to include <code>mso-line-height-rule:exactly</code> which will ensure Microsoft Outlook for Windows renders it at the pixel-perfect size. (If you are creating horizontal space, you need to specify a width instead of height, and may need to also add <code>font-size:0;</code>.) Here is an example or a spacer cell inside a row:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><tr><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"line-height:10px;height:10px;mso-line-height-rule:exactly;"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></td></tr></span> </pre></td> </tr></tbody></table></div> <p>And here is a spacer div:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"line-height:10px;height:10px;mso-line-height-rule:exactly;"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></div></span> </pre></td> </tr></tbody></table></div> </div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itzpb"> <h3 id="toc-iaxn-adding-the-main-table">Adding the Main Table</h3> <p>Now let’s place a table of 602 pixels wide inside the container table.</p> <p>600 pixels is a safe maximum width for your emails to display comfortably within most desktop and webmail clients on most screen resolutions, and we’re adding 2 pixels so we can have a 1-pixel border around the outside, which adds a pixel on either side.</p> <p>We’ll replace our little ‘Hello!’ greeting with this table in our HTML email format example. </p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Hello! </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <p>Great! Now we have our outer table, and our main content table sitting inside, ready for some rows of content.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png" alt="The container table for our HTML email layout" loading="lazy" width="870px" height="414px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png" alt="The container table for our HTML email layout" loading="lazy" width="650px" height="312px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png" alt="The container table for our HTML email layout" loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-12-2.png 2x"></figure> </div><div data-content-block-type="Wysi" id="i5tk" class="content-block-wysi content-block"> <h2 id="toc-nsa4-create-the-html-email-template-structure-and-header"> <span class="sectionnum">3.</span> Create the HTML Email Template Structure and Header</h2> <p>In our email design we can see that the layout is divided into a few logical sections, so we’ll create a row for each.</p> <p>Let’s duplicate the single row in the last table we added so that we have three in total, by copying everything between (and including) the <code><tr></code> and <code></tr></code> and pasting it two times underneath.</p> <p>I’ve changed the “Hello!” text to read Row 1, Row 2 and Row 3 so it should now look like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Row 1 </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> Row 2 </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td> <td class="rouge-code"><pre> Row 3 </pre></td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-16" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png" alt="Extra rows in our HTML email layout" loading="lazy" width="870px" height="414px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png" alt="Extra rows in our HTML email layout" loading="lazy" width="650px" height="312px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png" alt="Extra rows in our HTML email layout" loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-11-3.png 2x"></figure> <p>Now we’ll colour them according to the design by adding a <code>background</code> CSS property to the <code>style</code> tag. Always remember to use the full six characters of a hexadecimal code like <code>#ffffff</code>, as three-character shorthand like <code>#fff</code> won’t always work in all email clients.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;background:#70bbd9;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Row 1 </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> Row 2 </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;background:#ee4c50;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td> <td class="rouge-code"><pre> Row 3 </pre></td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-16" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-17" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png" alt="Colored rows" loading="lazy" width="870px" height="414px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png" alt="Colored rows" loading="lazy" width="650px" height="312px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png" alt="Colored rows" loading="lazy" width="380px" height="187px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-10-4.png 2x"></figure> <p>Ok, next up in our sample HTML email design we’re going to focus on Row 1. On the cell, let’s change the padding from <code>0</code> to <code>40px 0 30px 0</code>. Then inside the cell we’ll insert our image:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">align=</span><span style="color: #90a959">"center"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:40px 0 30px 0;background:#70bbd9;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/h1.png"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"300"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;"</span> <span style="color: #f4bf75">/></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></td></span> </pre></td> </tr> </tbody></table></div> <p>Always specify the width of your images using the HTML width attribute rather than CSS, e.g. <code>width="300"</code> as seen above, rather than <code>style="width:300px;"</code>. If you don’t, Microsoft Outlook for Windows will display your image at its physical size. </p> <p>We have also set the image <code>height</code> to <code>auto</code> to avoid any squishing, and <code>display</code> to <code>block</code>, which prevents gaps from appearing underneath it in some email clients.</p> <p>Finally, if your image contains important information that isn’t mentioned in your email’s text, be sure to add a description of it to the <code>alt</code> tag so that it will be announced by screen readers to those using them.</p> <div class="callout-block"> <span class="callout-icon callout-warn"></span> <div class="callout-message">Images don’t always load and alt text isn’t always visually displayed as a fallback, so any crucial information should always be included as live text in your simple email template rather than being embedded in an image.</div> </div> <p>And that’s our HTML header done!</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png" alt="The html email header along with image" loading="lazy" width="870px" height="664px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png" alt="The html email header along with image" loading="lazy" width="650px" height="497px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png" alt="The html email header along with image" loading="lazy" width="380px" height="293px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-09-5.png 2x"></figure> <h2 id="toc-3bio-create-the-content-area"> <span class="sectionnum">4.</span> Create the Content Area for Your HTML Email Template</h2> <p>Moving on from the header, let’s now concentrate on our HTML template for the email body or the email’s content area. First off, we’ll add some padding to the Row 2’s cell so that the table inside has some space around it, as per our design, so that it now looks like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:36px 30px 42px 30px;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> Row 2 </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></tr></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png" alt="Added padding to the middle cell" loading="lazy" width="870px" height="664px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png" alt="Added padding to the middle cell" loading="lazy" width="650px" height="497px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png" alt="Added padding to the middle cell" loading="lazy" width="380px" height="293px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-08-6.png 2x"> <figcaption>Added padding to the middle cell</figcaption> </figure> <p>Now we’ll replace the “Row 2” text with another table to nest our main content inside. When building HTML email using tables, we need to nest them because <code>colspan</code> and <code>rowspan</code> are not widely supported across email clients.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Row 1 </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> Row 2 </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <p>We’ve set the width of this table to 100%. It’s good practice to use percentage widths rather than using a pixel value wherever possible in formatted email templates because this will help you further down the track if you want to make your email responsive, or even if you simply need to adjust the width of your email later on. Percentage widths will automatically adapt to a new container size, whereas pixel widths would all need to be individually updated.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png" alt="Two nested rows for our main content" loading="lazy" width="870px" height="664px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png" alt="Two nested rows for our main content" loading="lazy" width="650px" height="497px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png" alt="Two nested rows for our main content" loading="lazy" width="380px" height="293px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-07-7.png 2x"> <figcaption>Two nested rows for our main content</figcaption> </figure> <p>Now we’ll add our content to the top row, which is a heading, a paragraph of text, and a final paragraph with a link inside. At this stage, we aren’t adding any styling at all to these elements.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png" alt="Added content and padding to the top row" loading="lazy" width="870px" height="807px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png" alt="Added content and padding to the top row" loading="lazy" width="650px" height="603px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png" alt="Added content and padding to the top row" loading="lazy" width="380px" height="353px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-06-8.png 2x"></figure> <p>Replace the “Row 1” text with the following:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><h1></span>Creating Email Magic<span style="color: #f4bf75"></h1></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><p><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span><span style="color: #f4bf75">></span>In tempus felis blandit<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> </tbody></table></div> <p>Next, we’re going to add our two columns of content to Row 2. Because we want a gap between these two cells, we’ll create a three-column table with an empty cell between the two outer columns. There are a few ways to create this basic email template layout, but this one is the most reliable for our purposes.</p> <p>As much as I like to stick to percentages, when you have content that is a specific size, it can be tricky to convert it to a percentage (in this example, the columns would be 48.1% which could become confusing). For this reason, since our two images are 260px wide, we’ll create columns that are also 260px wide, with a 20px margin cell in the middle. (This will total 540px, which is the 600px width of our table minus the padding of 30px on either side.) Be sure to zero your <code>font-size</code> and <code>line-height</code> and add a non-breaking space character <code>&nbsp;</code> in the middle cell.</p> <p>We’ll also set the <code>vertical-align</code> to <code>top</code> for both cells so that they will vertically align to the top, even if one column has more text than the other. The default vertical alignment is <code>middle</code>.</p> <p>Replace “Row 2” with this table:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Column 1 </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:20px;padding:0;font-size:0;line-height:0;"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> Column 2 </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png" alt="Two columns to content row two" loading="lazy" width="870px" height="807px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png" alt="Two columns to content row two" loading="lazy" width="650px" height="603px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png" alt="Two columns to content row two" loading="lazy" width="380px" height="353px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-05-9.png 2x"></figure> <p>Now let’s add our images and content to those columns. Margins are very well supported on <code><p></code> tags across all email clients, so we will wrap our text and images in <code><p></code> tags and adjust the spacing between them using <code>margin</code> later when we add all our text styling.</p> <p>Let’s add content to Columns 1 and 2 so that the whole table now looks like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/left.gif"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"260"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;"</span> <span style="color: #f4bf75">/></p></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span><span style="color: #f4bf75">></span>Blandit ipsum volutpat sed<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:20px;padding:0;font-size:0;line-height:0;"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/right.gif"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"260"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;"</span> <span style="color: #f4bf75">/></p></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p></span>Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span><span style="color: #f4bf75">></span>In tempus felis blandit<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <p>Here we’ve set the width of the images using the HTML <code>width</code> attribute again, just like we did when we inserted the header image.</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png" alt="Images in the columns" loading="lazy" width="870px" height="1120px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png" alt="Images in the columns" loading="lazy" width="650px" height="835px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png" alt="Images in the columns" loading="lazy" width="380px" height="486px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-04-10.png 2x"> <figcaption>Images in the columns</figcaption> </figure> <h2 id="toc-ca93-style-the-email-template-footer"> <span class="sectionnum">5.</span> Style the Email Template Footer</h2> <p>Now we’ll add our padding to the footer row in this HTML mailer we're creating.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:30px;background:#ee4c50;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> Row 3 </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></tr></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png" alt="Padding to the footer row" loading="lazy" width="870px" height="1120px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png" alt="Padding to the footer row" loading="lazy" width="650px" height="835px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png" alt="Padding to the footer row" loading="lazy" width="380px" height="486px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-03-11.png 2x"> <figcaption>Padding to the footer row</figcaption> </figure> <p>Inside that cell, we’ll replace the “Row 3” text with another table to get two columns, each 50% wide, with the left set to <code>align="left"</code> and right to <code>align="right"</code> so that the content in each will be pinned to those sides and give us a balanced email design.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;width:50%;"</span> <span style="color: #6a9fb5">align=</span><span style="color: #90a959">"left"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> Left Column </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0;width:50%;"</span> <span style="color: #6a9fb5">align=</span><span style="color: #90a959">"right"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> Right Column </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png" alt="Two columns for the footer" loading="lazy" width="870px" height="1120px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png" alt="Two columns for the footer" loading="lazy" width="650px" height="835px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png" alt="Two columns for the footer" loading="lazy" width="380px" height="486px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-02-12.png 2x"> <figcaption>Two columns for the footer</figcaption> </figure> <p>Replace “Left Column” with a paragraph of text:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><p></span><span style="color: #d0d0d0;background-color: #151515">&reg;</span> Someone, Somewhere 2021<span style="color: #f4bf75"><br/><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span><span style="color: #f4bf75">></span>Unsubscribe<span style="color: #f4bf75"></a></p></span> </pre></td> </tr></tbody></table></div> <p>We’ll create another little table for our social media icons, as it’s the best way to get the most precise spacing that renders properly everywhere. Replace the “Right Column” text with the table below.</p> <p>You’ll notice we aren’t specifying a table width, and this is so that the width of the table will be determined by the cells within. They are each 38px wide (the width of our icons) plus 10px padding on the left.</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0 0 0 10px;width:38px;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.twitter.com/"</span><span style="color: #f4bf75">><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/tw.png"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">"Twitter"</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"38"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;border:0;"</span> <span style="color: #f4bf75">/></a></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0 0 0 10px;width:38px;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.facebook.com/"</span><span style="color: #f4bf75">><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/fb.png"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">"Facebook"</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"38"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;border:0;"</span> <span style="color: #f4bf75">/></a></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png" alt="Table for social media icons" loading="lazy" width="870px" height="1180px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png" alt="Table for social media icons" loading="lazy" width="650px" height="880px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png" alt="Table for social media icons" loading="lazy" width="380px" height="511px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-01-13.png 2x"> <figcaption>Table for social media icons</figcaption> </figure> <p>And there we have it; our HTML email template layout is complete!</p> <h2 id="toc-m0en-style-the-text"> <span class="sectionnum">6.</span> Style the Text in Your Simple HTML Email Template</h2> <p>Styling the text within our HTML email template is a really important step. First, let’s look at the top row of content with our <code>h1</code> and introductory text. </p> </div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="ia8vx"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4nmh"> <h3 id="toc-w22i-important-note-when-using-paragraph-and-heading-tags">Important Note When Using Paragraph and Heading Tags</h3> <p>When using paragraph and heading tags (p, h1, h2, etc.) you must specify your <strong>top</strong> and <strong>bottom</strong> margin settings. Otherwise, each email client will apply their own wildly different default margins to these elements. You also need to make sure your top and bottom margins are set to zero if you don’t want any at all, in which case you would set your heading to <code>margin:0;</code>. If you only want a bottom margin, you should still set the top margin to zero, e.g. <code>margin:0 0 10px 0;</code>. </p> </div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ipxjl"> <p>With that in mind, we’ll set our desired margins on all our tags, and we also want to set the text colour to be <code>#153643</code>, which we can apply to the cell, as everything inside will inherit that colour. After these changes, the whole cell looks like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:0 0 36px 0;color:#153643;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><h1</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"font-size:24px;margin:0 0 20px 0;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">></span>Creating Email Magic<span style="color: #f4bf75"></h1></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"color:#ee4c50;text-decoration:underline;"</span><span style="color: #f4bf75">></span>In tempus felis blandit<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></td></span> </pre></td> </tr> </tbody></table></div> <p>You’ll notice above that we have also set the <code>font-family</code> on every individual <code>h1</code> and <code>p</code> element, and you might be wondering why we can’t just set this on the body or table tag. This is because some webmail clients will override your font if you don’t set them inline on each paragraph or heading element. There are other considerations and approaches to this issue, but for simplicity’s sake and to ensure our HTML email design renders perfectly everywhere at this stage, we will set it inline on each element.</p> <p>Now, moving down to our two-column area, add the <code>color</code> to each of the 260px wide cells so that they both look like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #d0d0d0"><</span><span style="color: #f4bf75">td</span> <span style="color: #f4bf75">style</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;color:#153643;"</span><span style="color: #d0d0d0">></span> </pre></td> </tr></tbody></table></div> <p>As above, we’ll add some text styling and margins to our paragraphs and links, and set a base font size to the entire table. Altogether, the table now looks like this:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><tr></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;color:#153643;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-4" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/left.gif"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"260"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;"</span> <span style="color: #f4bf75">/></p></span> </pre></td> </tr> <tr id="line-5" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-6" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"color:#ee4c50;text-decoration:underline;"</span><span style="color: #f4bf75">></span>Blandit ipsum volutpat sed<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> <tr id="line-7" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-8" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:20px;padding:0;font-size:0;line-height:0;"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-9" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:260px;padding:0;vertical-align:top;color:#153643;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-10" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">><img</span> <span style="color: #6a9fb5">src=</span><span style="color: #90a959">"images/right.gif"</span> <span style="color: #6a9fb5">alt=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">width=</span><span style="color: #90a959">"260"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"height:auto;display:block;"</span> <span style="color: #f4bf75">/></p></span> </pre></td> </tr> <tr id="line-11" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">></span>Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.<span style="color: #f4bf75"></p></span> </pre></td> </tr> <tr id="line-12" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"color:#ee4c50;text-decoration:underline;"</span><span style="color: #f4bf75">></span>In tempus felis blandit<span style="color: #f4bf75"></a></p></span> </pre></td> </tr> <tr id="line-13" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></td></span> </pre></td> </tr> <tr id="line-14" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"></tr></span> </pre></td> </tr> <tr id="line-15" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></table></span> </pre></td> </tr> </tbody></table></div> <p>Finally, we’ll style the footer. Firstly, we’ll add some font styling to the main footer table, inside our red footer cell with the 30px padding, so that it now reads:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><td</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"padding:30px;background:#ee4c50;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #f4bf75"><table</span> <span style="color: #6a9fb5">role=</span><span style="color: #90a959">"presentation"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"width:100%;border-collapse:collapse;border:0;border-spacing:0;font-size:9px;font-family:Arial,sans-serif;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> </tbody></table></div> <p>In the left column of this table, we can update our paragraph and link to include style and colour:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody> <tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"margin:0;font-size:14px;line-height:16px;font-family:Arial,sans-serif;color:#ffffff;"</span><span style="color: #f4bf75">></span> </pre></td> </tr> <tr id="line-2" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td> <td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">&reg;</span> Someone, Somewhere 2021<span style="color: #f4bf75"><br/><a</span> <span style="color: #6a9fb5">href=</span><span style="color: #90a959">"http://www.example.com"</span> <span style="color: #6a9fb5">style=</span><span style="color: #90a959">"color:#ffffff;text-decoration:underline;"</span><span style="color: #f4bf75">></span>Unsubscribe<span style="color: #f4bf75"></a></span> </pre></td> </tr> <tr id="line-3" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75"></p></span> </pre></td> </tr> </tbody></table></div> <p>And on our social media icons, we’ll style each link to be white, so that if the images don’t load, any alt text will be visible on the red background. Adjust each link so that they look like this in the HTML code for your email template:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><a href="http://www.twitter.com/" style="color:#ffffff;"> </pre></td> </tr></tbody></table></div> <p>and</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><a href="http://www.facebook.com/" style="color:#ffffff;"> </pre></td> </tr></tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png" alt="Almost there" loading="lazy" width="870px" height="1180px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png" alt="Almost there" loading="lazy" width="650px" height="880px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png" alt="Almost there" loading="lazy" width="380px" height="511px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/eml-fscratch-00-14.png 2x"> <figcaption>Almost there!</figcaption> </figure> <p>And there we have it! Everything is in.</p> <h2 id="toc-zg0k-run-some-tests"> <span class="sectionnum">7.</span> Run Some Tests to Make Sure Your Simple Email Template Works</h2> <p>At this point, it’s a good idea to run your HTML code through an email testing service like <a href="https://www.litmus.com/" target="_self">Litmus</a>, or <a href="https://www.emailonacid.com/" target="_self">Email on Acid</a>. Leaving the borders on all the tables and cells can be helpful to see what’s happening in each email client. (Depending on how you are testing your email, you might need to remotely host your images first, and insert the full remote URLs for each image into your code. Refer to your testing service’s website to learn how to test your HTML mailer.)</p> <p>Here are some of my test results from Email on Acid:</p> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/tests.png" loading="lazy" width="870px" height="590px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/tests.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/tests.png" loading="lazy" width="650px" height="442px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/tests.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/tests.png" loading="lazy" width="380px" height="261px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/tests.png 2x"></figure> <p>Now it’s time to turn off the borders and see the email design looking beautiful. In the <code>style</code> tag in the <code>head</code>, remove the line that reads:</p> <div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody><tr id="line-1" class="lineno"> <td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td> <td class="rouge-code"><pre><span style="color: #f4bf75">table</span><span style="color: #d0d0d0">,</span> <span style="color: #f4bf75">td</span> <span style="color: #d0d0d0">{</span><span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span><span style="color: #90a959">2px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #90a959">#000000</span> <span style="color: #f4bf75">!important</span><span style="color: #d0d0d0">;}</span> </pre></td> </tr></tbody></table></div> <figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/55/posts/36957/image-upload/complete.png" alt="Borders turned off" loading="lazy" width="870px" height="1149px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/55/posts/36957/image-upload/complete.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/55/posts/36957/image-upload/complete.png" alt="Borders turned off" loading="lazy" width="650px" height="857px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/55/posts/36957/image-upload/complete.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/posts/36957/image-upload/complete.png" alt="Borders turned off" loading="lazy" width="380px" height="498px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/posts/36957/image-upload/complete.png 2x"> <figcaption>Borders turned off</figcaption> </figure> <p>And that’s it! </p> <h2 id="toc-tvv9-youve-created-a-simple-html-email">You’ve Created a Simple HTML Email!</h2> <p>Before we call it a day, if you have used any comments in your CSS in the head of your file for any reason, get rid of them. Some email clients can choke on CSS comments so it’s wisest not to include them.</p> <p>Now is a good time to do a final test with <a href="https://www.litmus.com/" target="_self">Litmus</a>, or <a href="https://www.emailonacid.com/" target="_self">Email on Acid</a>, and then your HTML email is ready to send!</p> <p><iframe src="https://codepen.io/tutsplus/embed/aboBgLX/?height=600&theme-id=12451&default-tab=result&embed-version=2" width="850" height="600" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy"></iframe></p> <h2 id="toc-ydqg-learn-more-about-html-email">Learn More About Creating Email Templates in HTML</h2> <p>To take what you’ve learned to the next level! Check out our <a href="https://webdesign.tutsplus.com/series/mastering-html-email--webdesign-17696" target="_self">Mastering HTML Email</a> learning guide for more tutorials on HTML email templates, email design, coding responsive email, accessibility, marketing, transactional email designs, email service providers (ESPs), development workflow tips, and more!</p> <ul class="roundup-block__contents posts--half-width roundup-block--list"> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/9378/preview_image/email-you-should-know-thumb.png 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">What You Should Know About HTML Email</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Nicole Merlin</div> <div class="roundup-block__published-date">10 Jun 2013</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/the-complete-guide-to-designing-for-email--webdesign-12941"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/18235/preview_image/email-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/18235/preview_image/email-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/18235/preview_image/email-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/18235/preview_image/email-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/18235/preview_image/email-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/18235/preview_image/email-thumb.png 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">The Complete Guide to Designing for Email</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Nicole Merlin</div> <div class="roundup-block__published-date">13 Dec 2013</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/a-beginners-guide-to-email-accessibility--cms-31240"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31240/preview_image/pre-wax.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31240/preview_image/pre-wax.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31240/preview_image/pre-wax.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31240/preview_image/pre-wax.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31240/preview_image/pre-wax.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31240/preview_image/pre-wax.jpg 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">A Beginner’s Guide to Email Accessibility (Checklist + Resources)</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"><img class="roundup-block__author-image" src="//www.gravatar.com/avatar/3c0bdb240c481a04abe61de7ad48838d?s=200&d=https%3A%2F%2Fassets.tutsplus.com%2Fimages%2Fhub%2Favatar_default.png&r=PG" alt="" loading="lazy"></div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Stig Morten Myre</div> <div class="roundup-block__published-date">11 Sep 2018</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/23919/preview_image/future-proof-email.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/23919/preview_image/future-proof-email.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/23919/preview_image/future-proof-email.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/23919/preview_image/future-proof-email.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/23919/preview_image/future-proof-email.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/23919/preview_image/future-proof-email.png 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">Creating a Future-Proof Responsive Email Without Media Queries</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Nicole Merlin</div> <div class="roundup-block__published-date">21 Oct 2021</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-boost-email-conversions-with-personalization-and-dynamic-content--cms-31828"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31828/preview_image/pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31828/preview_image/pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31828/preview_image/pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31828/preview_image/pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31828/preview_image/pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31828/preview_image/pre.jpg 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">How to Boost Email Conversions With Personalization and Dynamic Content</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20883/profileImage/justin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20883/profileImage/justin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20883/profileImage/justin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20883/profileImage/justin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20883/profileImage/justin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20883/profileImage/justin.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Justin Khoo</div> <div class="roundup-block__published-date">14 Sep 2018</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/design-considerations-for-multiple-email-clients-and-devices--cms-31756"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31756/preview_image/responsive.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31756/preview_image/responsive.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31756/preview_image/responsive.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31756/preview_image/responsive.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31756/preview_image/responsive.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31756/preview_image/responsive.jpg 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">Design Considerations for Multiple Email Clients and Devices</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20729/profileImage/t7NQ89sy_400x400.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Jaina Mistry</div> <div class="roundup-block__published-date">12 Sep 2018</div> </div> </div> </div> </div></a></li> </ul> </div></div></div></div><div class="post__article-ad-mobile"><turbo-frame id="publift_lazy_mob_article_3" loading="lazy" src="/promotions/publift_promotion?position=mob_article_3&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="content-heading content-heading__mobile"><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/email"> <span class="content-heading__secondary-categories-tag"> Email </span> </a> <a href="https://webdesign.tutsplus.com/c/email/s/email-design"> <span class="content-heading__secondary-categories-tag"> Email Design </span> </a> <a href="https://webdesign.tutsplus.com/c/email/s/email-templates"> <span class="content-heading__secondary-categories-tag"> Email Templates </span> </a> </div> </div></div> <div class='content-footer'> <div class='content-footer__content-meta-details'> <div class='content-footer__author-details'> <img class="content-footer__author-image" alt="Nicole Merlin" width="64" height="64" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=128/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x" loading="lazy" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=64/uploads/users/55/profiles/1369/profileImage/400x400.jpg" /> <span>By</span> <span class='content-footer__author-name'> <a rel="author" aria-label="Author: Nicole Merlin" href="https://tutsplus.com/authors/nicole-merlin">Nicole Merlin</a> </span> </div> <div class='content-footer__additional-details'> <div class='content-footer__feedback-buttons-group' data-controller="post-vote" data-id=9386> <a class='content-footer__feedback-like-button' data-post-vote-target='likeButton' data-action='click->post-vote#like'> <span>Like</span> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='likeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-e80969147d3487ef9dc5.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-highlight-13174f0b8cbe2b523c3b.svg" /> </div> </a> <a class='content-footer__feedback-dislike-button' data-post-vote-target='dislikeButton' data-action='click->post-vote#dislike'> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='dislikeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-401ae0d4ead12668516b.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-highlight-1022d39c6062c9267b1d.svg" /> </div> </a> <input type="hidden" name="authenticity_token" id="authenticity_token" value="WoHIAKuppB9ieE4-QBj-Ui2Hras0Tak_gDoxgUz1a35CKV47yxygSZPIiAh1SSKrzicHbJjmogbb1Hvx-aPKXg" data-post-vote-target="token" autocomplete="off" /> </div> </div> </div> </div> </div></article></main></div><div class="cta-toast-popup" data-analytics-context-detail="cta toast"><turbo-frame id="cta_toast_popup" src="/cta_toast"></turbo-frame></div> <div id="footer-promo-component" class="w-full flex justify-center items-center bg-white pb-20 px-6 font-family-polysan-regular"> <a href="https://elements.envato.com/pricing" class="h-[343px] w-full lg:max-w-[960px] md:max-w-screen 2xl:max-w-[1290px] rounded-2xl overflow-hidden flex hover:cursor-default" data-action="click->ga-analytics#sendElementsClickEvent" > <div class="w-1/2 flex flex-col justify-center xsm:px-2 sm:px-8 md:px-16 lg:pr-48 gap-y-4 bg-[#9CEE69]"> <div class="text-3xl font-semibold text-black text-left">Let’s create something extraordinary</div> <div class="text-black hidden md:flex">Your one-stop creative asset destination</div> <div class="w-full flex justify-start"> <button class="bg-[#191919] text-white rounded-md xsm:px-1 xsm:py-0 sm:px-6 sm:py-2 hover:bg-gray-800 active:bg-gray-700 text-lg border-0 hover:cursor-pointer">Let’s create!</button> </div> </div> <div class="w-1/2"> <img class="w-full h-full object-cover" src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/2843/posts/109025/image-upload/Tuts_Homepage_Uplift_FooterBanner_645x343_v1_2_.png"> </div> </a> </div> <div class="ecosystem-highlight" data-analytics-context-detail="ecosystem highlight"><div class="ecosystem-highlight__cards"><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Elements-9c6156923682e0ca754a.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title">Unlimited Downloads<br />From $16.50/month</div><div class="ecosystem-highlight__card-description">Get access to over one million creative assets on Envato.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendMarketClickEvent" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Market-b1c3dbb6b2a34956edf4.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Over 9 Million Digital Assets</div><div class="ecosystem-highlight__card-description"> Everything you need for your next creative project.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=placeit_mkt-footer&utm_content=tuts_global-footer&utm_medium=promos&utm_source=tutsplus.com"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Placeit-2bfac81aff196db3c276.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Create Beautiful Logos, Designs <br> & Mockups in Seconds</div><div class="ecosystem-highlight__card-description"> Design like a professional without Photoshop.</div></div></a></div><div class="ecosystem-highlight__card"><a href="https://community.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Community-4973bc700aa03754d91c.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Join the Community</div><div class="ecosystem-highlight__card-description"> Share ideas. Host meetups. Lead discussions. Collaborate.</div></div></a></div></div></div><footer class="page-footer view" data-analytics-context="footer" data-controller="page-footer"><div class="page-footer__content"><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Envato Tuts+</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/about">About Envato Tuts+</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/terms-of-use">Terms of Use</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy">Privacy</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/cookies/">Cookies</a></div><div class="page-footer__item"><a class="page-footer__link" data-action="click->page-footer#openCookieSettings" href="javascript:void(0);">Cookie Settings</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy/#my-personal-information">Do not sell or share my personal information</a></div></div></div><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Help</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com/hc/en-us/categories/360000070683">FAQ</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com">Help Center</a></div></div></div><div class="page-footer__links-column page-footer__links-last-column"><div class="page-footer__brands-wrapper"><div class="page-footer__tuts-brand"><img loading="lazy" alt="envato-tuts+" class="page-footer__tuts-logo-image tuts-logo" src="https://static.tutsplus.com/packs/static/images/tuts_logo-73b941f1418b55c886ac.svg" /><div class="page-footer__counts"><div class="page-footer__count-item"><div class="page-footer__count-value">25,408</div><div class="page-footer__count-label">Tutorials</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">553</div><div class="page-footer__count-label">Courses</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">18,690</div><div class="page-footer__count-label">Translations</div></div></div></div><div class="page-footer__bcorp-brand"><a class="page-footer__bcorp-brand-link" href="https://www.bcorporation.net/en-us/find-a-b-corp/company/envato" rel="noopener" target="_blank"><img alt="B Corp logo" loading="lazy" src="https://static.tutsplus.com/packs/static/images/bcorp-bfc565be3a93741fc88c.svg" /></a></div></div></div></div><div class="page-footer__envato-bar"><div class="page-footer__envato-bar-content"><div class="page-footer__envato-bar-content-left-column"><ul class="page-footer__envato-bar-links"><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com">Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendMarketClickEvent" href="https://market.envato.com">Envato Market</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net/">Placeit by Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/products/">All products</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/about/careers/">Careers</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/sitemap/">Sitemap</a></li></ul><div class="page-footer__copyright">© 2025 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.</div></div><div class="page-footer__envato-bar-content-right-column"><ul class="page-footer__follow-us"><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__youtube-link" href="https://www.youtube.com/@envatotuts"><img alt="Youtube" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_youtube-2fdd89edede4b116d099.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__instagram-link" href="https://www.instagram.com/envato/"><img alt="Instagram" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_instagram-f01c9d7dc71f1ea86182.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__tiktok-link" href="https://www.tiktok.com/@envato"><img alt="Tiktok" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_tiktok-57b06ff17a284d8a1744.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__facebook-link" href="https://www.facebook.com/envato/"><img alt="Facebook" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_facebook-f35494f677e855ad50dd.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__twitter-link" href="https://twitter.com/envato"><img alt="Twitter" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_twitter-98772a5169f3f29dd437.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__pinterest-link" href="https://www.pinterest.com.au/envato/"><img alt="Pinterest" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_pinterest-c768bee1968ceb51ae43.svg" /></a></li></ul></div></div></div></footer><script defer="defer" src="https://www.google-analytics.com/analytics.js"></script><div class="sticky-footer-ad"><turbo-frame id="publift_lazy_article_sticky_footer" loading="lazy" src="/promotions/publift_promotion?position=article_sticky_footer&variation=sticky-footer"><div class="avert fuse-ad avert--sticky-footer"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><script defer="defer" src="https://cdn.fuseplatform.net/publift/tags/2/1007/fuse.js"></script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=912712196247539&ev=PageView&noscript=1"/> </noscript> <script src="https://static.tutsplus.com/packs/js/lazy_load_third_party_libraries-3f74f88902b8cb9ca575.js" defer="defer"></script><script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 943617023; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" defer="defer" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/943617023/?value=0&guid=ON&script=0"/> </div> </noscript> </body></html>