Credit:Email code generated by Claude AI
- Message content promotes the services/brand of Scott Web Dev
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Scott Web Dev</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap");
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
outline: none;
text-decoration: none;
}
body {
margin: 0 !important;
padding: 0 !important;
background-color: #0f1014;
}
a {
color: #c9a84c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 620px) {
.email-container {
width: 100% !important;
}
.fluid {
max-width: 100% !important;
height: auto !important;
}
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
.p-20 {
padding: 20px !important;
}
.p-40 {
padding: 20px !important;
}
.hide-mobile {
display: none !important;
}
}
</style>
</head>
<body
style="
margin: 0;
padding: 0;
background-color: #0f1014;
font-family: "DM Sans", Georgia, serif;
"
>
<!-- Preheader (hidden preview text) -->
<div
style="
display: none;
max-height: 0;
overflow: hidden;
mso-hide: all;
"
>
<!-- REPLACE: Your preheader/preview text goes here (around 85-100 characters recommended) -->
Your preheader text goes here — this shows in the inbox preview
alongside your subject line.
</div>
<!-- Email wrapper -->
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="background-color: #0f1014"
>
<tr>
<td align="center" style="padding: 30px 10px">
<!-- Email container -->
<table
role="presentation"
class="email-container"
cellspacing="0"
cellpadding="0"
border="0"
width="600"
style="
background-color: #16181d;
border: 1px solid #2a2d35;
"
>
<!-- ═══════════════════════════════════════ -->
<!-- HEADER -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td
style="
padding: 32px 40px 28px 40px;
border-bottom: 1px solid #2a2d35;
"
>
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr>
<td
style="
font-family:
"JetBrains Mono",
"Courier New",
monospace;
font-size: 22px;
font-weight: 600;
color: #f0ece0;
letter-spacing: -0.5px;
"
>
<!-- REPLACE: Swap with <img> tag pointing to your hosted logo if preferred -->
Scott<span style="color: #c9a84c"
>.</span
>
<span
style="
color: #7a8494;
font-weight: 400;
"
>a.</span
>
Dev
</td>
<td
align="right"
style="
font-family:
"JetBrains Mono",
"Courier New",
monospace;
font-size: 11px;
color: #4a5060;
text-transform: uppercase;
letter-spacing: 1.5px;
vertical-align: middle;
"
>
<!-- REPLACE: Issue number or date label -->
Issue #001
</td>
</tr>
</table>
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- HERO -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 48px 40px 36px 40px">
<!-- Mono label above heading -->
<p
style="
margin: 0 0 14px 0;
font-family:
"JetBrains Mono",
"Courier New", monospace;
font-size: 11px;
color: #c9a84c;
text-transform: uppercase;
letter-spacing: 2px;
"
>
<!-- REPLACE: Section label e.g. "New Post", "Announcement", "Update" -->
New Article
</p>
<!-- Main heading -->
<h1
style="
margin: 0 0 18px 0;
font-family:
"DM Sans", Georgia, serif;
font-size: 28px;
font-weight: 500;
color: #f0ece0;
line-height: 1.3;
letter-spacing: -0.3px;
"
>
<!-- REPLACE: Your email headline -->
Simple, elegant web solutions for small
businesses who want to do more.
</h1>
<!-- Body copy -->
<p
style="
margin: 0;
font-family:
"DM Sans", Georgia, serif;
font-size: 16px;
font-weight: 300;
color: #9aa3b0;
line-height: 1.7;
"
>
<!-- REPLACE: Introductory paragraph -->
After years working with high-level software
development clients, I kept seeing the same
pattern — small businesses with
lovingly-crafted websites quietly losing
ground over easily-fixed issues.
</p>
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- DIVIDER -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 0 40px">
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr>
<td
style="
border-top: 1px solid #2a2d35;
font-size: 0;
"
>
</td>
</tr>
</table>
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- CONTENT BLOCK 1 -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 36px 40px">
<h2
style="
margin: 0 0 12px 0;
font-family:
"JetBrains Mono",
"Courier New", monospace;
font-size: 13px;
font-weight: 600;
color: #f0ece0;
letter-spacing: 0.5px;
text-transform: uppercase;
"
>
<!-- REPLACE: Section heading -->
Site Performance
</h2>
<p
style="
margin: 0 0 20px 0;
font-family:
"DM Sans", Georgia, serif;
font-size: 15px;
font-weight: 300;
color: #9aa3b0;
line-height: 1.7;
"
>
<!-- REPLACE: Section body copy -->
Unoptimised images and redundant code are
the silent killers of search rankings. A few
targeted changes can have an outsized impact
on how your site performs — both for users
and for Google.
</p>
<!-- Inline CTA link -->
<a
href="https://scottwebdev.net/posts/REPLACE_SLUG?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=block1_readmore"
style="
font-family:
"JetBrains Mono",
"Courier New", monospace;
font-size: 12px;
font-weight: 600;
color: #c9a84c;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
"
>
Read more →
</a>
<!-- UTM NOTE: Replace REPLACE_SOURCE, REPLACE_CAMPAIGN and REPLACE_SLUG above -->
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- CONTENT BLOCK 2 (highlighted) -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 0 40px 36px 40px">
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
style="
background-color: #1d202a;
border-left: 3px solid #c9a84c;
"
>
<tr>
<td style="padding: 24px 28px">
<h2
style="
margin: 0 0 10px 0;
font-family:
"JetBrains Mono",
"Courier New",
monospace;
font-size: 13px;
font-weight: 600;
color: #f0ece0;
text-transform: uppercase;
letter-spacing: 0.5px;
"
>
<!-- REPLACE: Highlighted section heading -->
Web Accessibility
</h2>
<p
style="
margin: 0 0 18px 0;
font-family:
"DM Sans",
Georgia, serif;
font-size: 15px;
font-weight: 300;
color: #9aa3b0;
line-height: 1.7;
"
>
<!-- REPLACE: Highlighted section body copy -->
Semantic tagging isn't just
about ticking a compliance box.
It directly shapes how both
assistive technologies and
search engines interpret your
content.
</p>
<a
href="https://scottwebdev.net/posts/REPLACE_SLUG?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=block2_readmore"
style="
font-family:
"JetBrains Mono",
"Courier New",
monospace;
font-size: 12px;
font-weight: 600;
color: #c9a84c;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
"
>
Read more →
</a>
<!-- UTM NOTE: Replace REPLACE_SOURCE, REPLACE_CAMPAIGN and REPLACE_SLUG above -->
</td>
</tr>
</table>
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- PRIMARY CTA BUTTON -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td
align="center"
style="padding: 4px 40px 48px 40px"
>
<!-- Bulletproof button (VML fallback for Outlook) -->
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="https://scottwebdev.net?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=primary_cta"
style="
height: 46px;
v-text-anchor: middle;
width: 220px;
"
arcsize="0%"
strokecolor="#c9a84c"
fillcolor="#c9a84c"
>
<w:anchorlock />
<center
style="
color: #0f1014;
font-family:
"Courier New",
monospace;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
"
>
View All Posts
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a
href="https://scottwebdev.net?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=primary_cta"
style="
background-color: #c9a84c;
color: #0f1014;
font-family:
"JetBrains Mono",
"Courier New", monospace;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
padding: 14px 32px;
display: inline-block;
"
>
View All Posts
</a>
<!-- UTM NOTE: Replace REPLACE_SOURCE and REPLACE_CAMPAIGN above -->
<!--<![endif]-->
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- DIVIDER -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 0 40px">
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr>
<td
style="
border-top: 1px solid #2a2d35;
font-size: 0;
"
>
</td>
</tr>
</table>
</td>
</tr>
<!-- ═══════════════════════════════════════ -->
<!-- FOOTER -->
<!-- ═══════════════════════════════════════ -->
<tr>
<td style="padding: 28px 40px 32px 40px">
<table
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
width="100%"
>
<tr>
<!-- Footer left -->
<td
style="
font-family:
"DM Sans",
Georgia, serif;
font-size: 12px;
font-weight: 300;
color: #4a5060;
line-height: 1.6;
"
class="stack-column"
>
© 2024 Scott Anderson ·
scottwebdev.net<br />
<!-- REPLACE: Your physical mailing address (legally required for email campaigns) -->
123 Example Street, Town, County,
AB1 2CD
</td>
<!-- Footer right: social/nav links -->
<td
align="right"
style="
font-family:
"JetBrains Mono",
"Courier New",
monospace;
font-size: 11px;
color: #4a5060;
vertical-align: top;
"
class="stack-column"
>
<a
href="https://scottwebdev.net?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=footer_home"
style="
color: #6a7280;
text-decoration: none;
margin-left: 16px;
"
>Home</a
>
<a
href="https://scottwebdev.net/posts?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=footer_blog"
style="
color: #6a7280;
text-decoration: none;
margin-left: 16px;
"
>Blog</a
>
<a
href="https://scottwebdev.net/my-work?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=footer_work"
style="
color: #6a7280;
text-decoration: none;
margin-left: 16px;
"
>Work</a
>
</td>
</tr>
<!-- Unsubscribe row -->
<tr>
<td
colspan="2"
style="
padding-top: 16px;
font-family:
"DM Sans",
Georgia, serif;
font-size: 11px;
color: #343840;
line-height: 1.5;
"
>
You received this because you opted
in at scottwebdev.net.
<!-- REPLACE: Your unsubscribe URL — this is legally mandatory (UK PECR / GDPR) -->
<a
href="https://REPLACE_UNSUBSCRIBE_URL?email={{subscriber_email}}"
style="
color: #4a5060;
text-decoration: underline;
"
>Unsubscribe</a
>
·
<!-- REPLACE: Link to your hosted privacy policy -->
<a
href="https://scottwebdev.net/privacy?utm_source=REPLACE_SOURCE&utm_medium=email&utm_campaign=REPLACE_CAMPAIGN&utm_content=footer_privacy"
style="
color: #4a5060;
text-decoration: underline;
"
>Privacy Policy</a
>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End email container -->
</td>
</tr>
</table>
<!-- End email wrapper -->
</body>
</html>
If you copy the raw code of the HTML snippet to a file on your local machine, you will see a number of placeholders snippets which should be replaced:
REPLACE_SOURCE: freeform- I recommend setting to the campaign platform you are planning on sending from, i.e: Mailchimp
REPLACE_SLUG: specific to my website, scottwebdev.netREPLACE_CAMPAIGN: freeform- A freeform string which typically represents the intention behind the email (i.e: Fall update 2026)