chore: Make guide pages responsive on small screens
This commit is contained in:
Dries Augustyns
@@ -27,7 +27,7 @@ export function CodeBlock({code, language = 'javascript', title, showCopy = true
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'group relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-900'}
|
||||
className={'group relative overflow-hidden rounded-xl border border-neutral-200 bg-neutral-900 w-full max-w-full'}
|
||||
>
|
||||
{(title || showCopy) && (
|
||||
<div className={'flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-6 py-3'}>
|
||||
@@ -56,8 +56,10 @@ export function CodeBlock({code, language = 'javascript', title, showCopy = true
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<pre className={'overflow-x-auto p-6 text-neutral-100'}>
|
||||
<code className={'font-mono text-sm leading-relaxed'}>{code}</code>
|
||||
<pre className={'overflow-x-auto p-6 text-neutral-100 w-full max-w-full'} style={{boxSizing: 'border-box'}}>
|
||||
<code className={'font-mono text-sm leading-relaxed'} style={{whiteSpace: 'pre-wrap', wordBreak: 'break-word'}}>
|
||||
{code}
|
||||
</code>
|
||||
</pre>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@@ -114,26 +114,30 @@ export function GuideLayout({
|
||||
|
||||
<Navbar />
|
||||
|
||||
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
||||
<div className={'flex gap-12 py-16'}>
|
||||
<main className={'mx-auto max-w-7xl px-4 sm:px-8 w-full overflow-x-hidden'}>
|
||||
<div className={'flex flex-col lg:flex-row gap-8 lg:gap-12 py-8 sm:py-16 w-full'}>
|
||||
{/* Main Content */}
|
||||
<article className={'flex-1 max-w-4xl'}>
|
||||
<article className={'flex-1 max-w-full lg:max-w-4xl w-full'}>
|
||||
{/* Breadcrumbs */}
|
||||
<nav className={'mb-8'}>
|
||||
<ol className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
||||
<li>
|
||||
<nav className={'mb-6 sm:mb-8 w-full overflow-x-auto'}>
|
||||
<ol
|
||||
className={
|
||||
'flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm text-neutral-600 whitespace-normal'
|
||||
}
|
||||
>
|
||||
<li className={'truncate max-w-[90vw]'}>
|
||||
<Link href="/" className={'hover:text-neutral-900'}>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>/</li>
|
||||
<li>
|
||||
<li className={'truncate max-w-[90vw]'}>
|
||||
<Link href="/guides" className={'hover:text-neutral-900'}>
|
||||
Guides
|
||||
</Link>
|
||||
</li>
|
||||
<li>/</li>
|
||||
<li className={'text-neutral-900 font-medium'}>{title}</li>
|
||||
<li className={'text-neutral-900 font-medium truncate max-w-[90vw]'}>{title}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
@@ -142,12 +146,22 @@ export function GuideLayout({
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mb-12'}
|
||||
className={'mb-8 sm:mb-12 w-full'}
|
||||
>
|
||||
<h1 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>{title}</h1>
|
||||
<p className={'mt-6 text-lg text-neutral-600 leading-relaxed'}>{description}</p>
|
||||
<h1 className={'text-2xl sm:text-4xl font-bold tracking-tight text-neutral-900 break-words max-w-full'}>
|
||||
{title}
|
||||
</h1>
|
||||
<p
|
||||
className={'mt-4 sm:mt-6 text-base sm:text-lg text-neutral-600 leading-relaxed break-words max-w-full'}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
|
||||
<div className={'mt-8 flex items-center gap-6 text-sm text-neutral-600'}>
|
||||
<div
|
||||
className={
|
||||
'mt-6 sm:mt-8 flex flex-wrap items-center gap-4 sm:gap-6 text-xs sm:text-sm text-neutral-600'
|
||||
}
|
||||
>
|
||||
<div className={'flex items-center gap-2'}>
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>
|
||||
@@ -167,7 +181,16 @@ export function GuideLayout({
|
||||
</motion.header>
|
||||
|
||||
{/* Content */}
|
||||
<div className={'prose prose-neutral max-w-none'}>{children}</div>
|
||||
<div className={'prose prose-neutral max-w-full'} style={{overflowX: 'visible'}}>
|
||||
{/* Responsive table and code block styles */}
|
||||
<style>{`
|
||||
.prose table { display: block; width: 100%; overflow-x: auto; }
|
||||
.prose th, .prose td { white-space: normal; word-break: break-word; }
|
||||
.prose pre, .prose code { max-width: 100vw; overflow-x: auto; word-break: break-word; }
|
||||
.prose img { max-width: 100%; height: auto; }
|
||||
`}</style>
|
||||
{children}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Table of Contents - Desktop Only */}
|
||||
|
||||
@@ -36,6 +36,7 @@ export default function EmailAPIGuide() {
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">SMTP (Traditional)</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Direct protocol for sending email</li>
|
||||
@@ -46,8 +47,10 @@ export default function EmailAPIGuide() {
|
||||
<li>• Port 25, 587, or 465</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Email API (Modern)</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• HTTP-based RESTful interface</li>
|
||||
@@ -59,6 +62,7 @@ export default function EmailAPIGuide() {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="tip" title="When to Use Email APIs">
|
||||
<p>
|
||||
@@ -324,6 +328,7 @@ func main() {
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Sending Features</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Send individual or batch emails</li>
|
||||
@@ -335,8 +340,10 @@ func main() {
|
||||
<li>• Scheduled sending</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Tracking & Analytics</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Delivery status tracking</li>
|
||||
@@ -348,8 +355,10 @@ func main() {
|
||||
<li>• Real-time analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Webhooks & Events</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Delivery notifications</li>
|
||||
@@ -360,8 +369,10 @@ func main() {
|
||||
<li>• Custom event triggers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Management Features</h3>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Suppression list management</li>
|
||||
@@ -373,6 +384,7 @@ func main() {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Best Practices */}
|
||||
@@ -581,22 +593,28 @@ func main() {
|
||||
href="/guides/transactional-vs-marketing-email"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Transactional vs Marketing Email</h3>
|
||||
<p className="text-sm text-neutral-600">Understand email types for APIs.</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-deliverability"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Deliverability</h3>
|
||||
<p className="text-sm text-neutral-600">Ensure API-sent emails reach the inbox.</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/guides/email-sender-reputation"
|
||||
className="block rounded-xl border border-neutral-200 bg-white p-6 transition hover:border-neutral-300 hover:shadow-lg"
|
||||
>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-2">Email Sender Reputation</h3>
|
||||
<p className="text-sm text-neutral-600">Maintain good sender reputation.</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -213,7 +213,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
|
||||
<p className="text-neutral-700">
|
||||
Require new subscribers to confirm their email address by clicking a verification link. This ensures the
|
||||
@@ -227,7 +227,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Validate Email Addresses</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Use real-time email validation on signup forms to catch typos and invalid formats. Validate:
|
||||
@@ -245,7 +245,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Remove Hard Bounces Immediately</h3>
|
||||
<p className="text-neutral-700">
|
||||
Automate removal of hard bounce addresses from your list. Never send to them again. Continued sending to
|
||||
@@ -258,7 +258,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your List Regularly</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove or re-engage inactive subscribers every 6-12 months. Email addresses become invalid over time
|
||||
@@ -271,7 +271,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Never Buy Email Lists</h3>
|
||||
<p className="text-neutral-700">
|
||||
Purchased lists have 20-40% invalid addresses and zero engagement. They'll destroy your bounce rate and
|
||||
@@ -284,7 +284,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Soft Bounces</h3>
|
||||
<p className="text-neutral-700">
|
||||
Track addresses that repeatedly soft bounce. After 3-5 consecutive soft bounces over multiple campaigns,
|
||||
@@ -297,7 +297,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Email Size</h3>
|
||||
<p className="text-neutral-700">
|
||||
Keep email size under 100KB to avoid soft bounces from size limits. Compress images, minimize code, and
|
||||
@@ -310,7 +310,7 @@ Bounce Rate = (150 ÷ 10,000) × 100 = 1.5%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send regularly to maintain list freshness. Long gaps between sends (3+ months) increase bounce rates as
|
||||
|
||||
@@ -220,7 +220,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Write Compelling Subject Lines</h3>
|
||||
<p className="text-neutral-700">
|
||||
Test different approaches: questions, personalization, numbers, urgency (without being spammy). Keep
|
||||
@@ -233,7 +233,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Personalize Beyond First Names</h3>
|
||||
<p className="text-neutral-700">
|
||||
Use behavioral data, past purchases, browsing history, or location. "Products you recently viewed" or
|
||||
@@ -246,7 +246,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Segment Your Audience</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send targeted emails to specific groups based on engagement level, purchase history, demographics, or
|
||||
@@ -259,7 +259,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Optimize Preview Text</h3>
|
||||
<p className="text-neutral-700">
|
||||
Preview text appears next to the subject line. Use it to complement your subject, add context, or create
|
||||
@@ -272,7 +272,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Clean Your Email List Regularly</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove subscribers who haven't engaged in 6-12 months. While this reduces list size, it dramatically
|
||||
@@ -285,7 +285,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Test Send Times</h3>
|
||||
<p className="text-neutral-700">
|
||||
Run A/B tests sending the same email at different times. Track when your specific audience is most
|
||||
@@ -298,7 +298,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Re-engage Inactive Subscribers</h3>
|
||||
<p className="text-neutral-700">
|
||||
Before removing inactive users, send a re-engagement campaign: "We miss you" or "Still interested?"
|
||||
@@ -311,7 +311,7 @@ Open Rate = (285 ÷ 950) × 100 = 30%`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
8
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use a Recognizable Sender Name</h3>
|
||||
<p className="text-neutral-700">
|
||||
Build consistency with your sender name. People are more likely to open emails from names they
|
||||
|
||||
@@ -183,7 +183,7 @@ export default function EmailSenderReputation() {
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Warm Up New IPs and Domains</h3>
|
||||
<p className="text-neutral-700 mb-3">
|
||||
Gradually increase sending volume over 4-8 weeks. Start with your most engaged subscribers.
|
||||
@@ -210,7 +210,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Start with Highly Engaged Subscribers</h3>
|
||||
<p className="text-neutral-700">
|
||||
During warm-up, send only to subscribers who recently opened or clicked. High engagement in early sends
|
||||
@@ -223,7 +223,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Implement Full Authentication</h3>
|
||||
<p className="text-neutral-700">
|
||||
Set up SPF, DKIM, and DMARC before sending. Proper authentication is table stakes for building
|
||||
@@ -236,7 +236,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Maintain Consistent Sending</h3>
|
||||
<p className="text-neutral-700">
|
||||
Send regularly (daily or weekly) rather than sporadic blasts. Consistency builds trust with email
|
||||
@@ -249,7 +249,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Use Double Opt-In</h3>
|
||||
<p className="text-neutral-700">
|
||||
Require email confirmation before adding subscribers. This ensures list quality and prevents spam trap
|
||||
@@ -262,7 +262,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Monitor Metrics Closely</h3>
|
||||
<p className="text-neutral-700">
|
||||
Track bounce rate, spam complaints, and engagement during warm-up. If metrics degrade, slow down volume
|
||||
@@ -275,7 +275,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
7
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Provide Immediate Value</h3>
|
||||
<p className="text-neutral-700">
|
||||
Your first emails set the tone. Deliver on promises made during signup. High engagement on early emails
|
||||
@@ -289,9 +289,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
{/* Maintaining Reputation */}
|
||||
<section id="maintaining" className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-neutral-900 mb-6">Maintaining Good Sender Reputation</h2>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">
|
||||
Once built, reputation requires ongoing attention:
|
||||
</p>
|
||||
<p className="text-neutral-700 leading-relaxed mb-6">Once built, reputation requires ongoing attention:</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
@@ -367,7 +365,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Identify the Root Cause</h3>
|
||||
<p className="text-neutral-700">
|
||||
Review recent campaigns for spam complaints, high bounces, poor engagement. Check if you're blacklisted.
|
||||
@@ -380,7 +378,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Clean Your List Aggressively</h3>
|
||||
<p className="text-neutral-700">
|
||||
Remove all unengaged subscribers, bounced addresses, and anyone who hasn't opened in 6+ months. Yes,
|
||||
@@ -393,7 +391,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Reduce Volume Temporarily</h3>
|
||||
<p className="text-neutral-700">
|
||||
Cut sending volume by 50-70% while you fix issues. Send only to highly engaged subscribers. Rebuild
|
||||
@@ -406,7 +404,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Request Blacklist Removal</h3>
|
||||
<p className="text-neutral-700">
|
||||
If blacklisted, identify which lists, fix the underlying issues, then request delisting. Most blacklists
|
||||
@@ -419,7 +417,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
5
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Send Valuable, Engaging Content</h3>
|
||||
<p className="text-neutral-700">
|
||||
Recovery requires proving you send emails people want. Focus on value, not promotions. High engagement
|
||||
@@ -432,7 +430,7 @@ Adjust based on engagement and bounce rates.`}
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-600 text-white text-sm font-bold">
|
||||
6
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-amber-900 mb-2">Be Patient</h3>
|
||||
<p className="text-neutral-700">
|
||||
Reputation recovery typically takes 4-12 weeks of consistently good behavior. Monitor metrics closely
|
||||
|
||||
@@ -84,6 +84,7 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Transactional Emails</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Account & Authentication</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Welcome emails after signup</li>
|
||||
@@ -94,8 +95,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Account deletion confirmations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Commerce & Transactions</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Order confirmations</li>
|
||||
@@ -106,8 +109,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Invoice emails</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Notifications & Alerts</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Activity notifications</li>
|
||||
@@ -118,8 +123,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Trial expiration notices</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Account Management</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Billing statements</li>
|
||||
@@ -132,6 +139,7 @@ export default function TransactionalVsMarketingEmail() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Transactional Email Best Practices</h3>
|
||||
@@ -215,6 +223,7 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Common Types of Marketing Emails</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Promotional Campaigns</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Product announcements</li>
|
||||
@@ -225,8 +234,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Flash sales</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Content Marketing</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Newsletters</li>
|
||||
@@ -237,8 +248,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Webinar invitations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Nurture & Engagement</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Welcome series (beyond initial welcome)</li>
|
||||
@@ -249,8 +262,10 @@ export default function TransactionalVsMarketingEmail() {
|
||||
<li>• Loyalty program updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full break-words">
|
||||
<h4 className="font-semibold text-neutral-900 mb-3">Lifecycle Marketing</h4>
|
||||
<ul className="space-y-2 text-sm text-neutral-700">
|
||||
<li>• Abandoned cart reminders</li>
|
||||
@@ -263,6 +278,7 @@ export default function TransactionalVsMarketingEmail() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold text-neutral-900 mb-4">Marketing Email Best Practices</h3>
|
||||
|
||||
@@ -81,6 +81,7 @@ export default function WhatIsDKIM() {
|
||||
A DKIM record is a TXT record in your DNS that contains your public key. Here's an example:
|
||||
</p>
|
||||
|
||||
<div className="w-full max-w-full overflow-x-auto">
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example DKIM DNS Record"
|
||||
@@ -91,6 +92,7 @@ export default function WhatIsDKIM() {
|
||||
# k=rsa -> Key type (RSA encryption)
|
||||
# p=MIGfMA0... -> Public key (base64 encoded)`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Selector Names">
|
||||
<p>
|
||||
@@ -106,30 +108,37 @@ export default function WhatIsDKIM() {
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 mb-8">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Prevents Email Spoofing</h3>
|
||||
<p className="text-neutral-700">
|
||||
DKIM makes it nearly impossible for spammers to forge emails from your domain. The cryptographic signature
|
||||
can't be replicated without your private key.
|
||||
DKIM makes it nearly impossible for spammers to forge emails from your domain. The cryptographic
|
||||
signature can't be replicated without your private key.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Improves Deliverability</h3>
|
||||
<p className="text-neutral-700">
|
||||
Major email providers (Gmail, Outlook, Yahoo) use DKIM as a trust signal. Emails with valid DKIM
|
||||
signatures are more likely to reach the inbox.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Protects Brand Reputation</h3>
|
||||
<p className="text-neutral-700">
|
||||
By preventing domain spoofing, DKIM protects your brand from being used in phishing attacks that could
|
||||
damage your reputation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="text-lg font-semibold text-neutral-900 mb-3">Enables DMARC</h3>
|
||||
<p className="text-neutral-700">
|
||||
DKIM is a prerequisite for implementing DMARC, which provides even stronger email authentication and
|
||||
@@ -137,6 +146,7 @@ export default function WhatIsDKIM() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfoBox type="warning" title="Gmail & Yahoo Requirements">
|
||||
<p>
|
||||
|
||||
@@ -207,15 +207,12 @@ export default function WhatIsSPF() {
|
||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full max-w-full wrap-break-word">
|
||||
<h3 className="font-semibold text-neutral-900 mb-2">Gather SPF Include Values</h3>
|
||||
<p className="text-neutral-700 mb-3">Each email service provides SPF values to include. For example:</p>
|
||||
<CodeBlock
|
||||
language="text"
|
||||
code={`Google Workspace: include:_spf.google.com
|
||||
Microsoft 365: include:spf.protection.outlook.com
|
||||
Plunk: include:spf.useplunk.com
|
||||
SendGrid: include:sendgrid.net`}
|
||||
code={`Google Workspace: include:_spf.google.com\nMicrosoft 365: include:spf.protection.outlook.com\nPlunk: include:spf.useplunk.com\nSendGrid: include:sendgrid.net`}
|
||||
showCopy={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user