chore: Make guide pages responsive on small screens
This commit is contained in:
Dries Augustyns
@@ -36,27 +36,31 @@ 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">
|
||||
<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>
|
||||
<li>• Requires managing connections</li>
|
||||
<li>• Manual error handling</li>
|
||||
<li>• Limited delivery tracking</li>
|
||||
<li>• More complex implementation</li>
|
||||
<li>• Port 25, 587, or 465</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Requires managing connections</li>
|
||||
<li>• Manual error handling</li>
|
||||
<li>• Limited delivery tracking</li>
|
||||
<li>• More complex implementation</li>
|
||||
<li>• Port 25, 587, or 465</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• No connection management needed</li>
|
||||
<li>• Structured error responses</li>
|
||||
<li>• Built-in tracking & analytics</li>
|
||||
<li>• Simpler to implement</li>
|
||||
<li>• Standard HTTP/HTTPS</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• No connection management needed</li>
|
||||
<li>• Structured error responses</li>
|
||||
<li>• Built-in tracking & analytics</li>
|
||||
<li>• Simpler to implement</li>
|
||||
<li>• Standard HTTP/HTTPS</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -324,53 +328,61 @@ func main() {
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• HTML and plain text support</li>
|
||||
<li>• Attachments</li>
|
||||
<li>• CC, BCC recipients</li>
|
||||
<li>• Custom headers</li>
|
||||
<li>• Template rendering</li>
|
||||
<li>• Scheduled sending</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• HTML and plain text support</li>
|
||||
<li>• Attachments</li>
|
||||
<li>• CC, BCC recipients</li>
|
||||
<li>• Custom headers</li>
|
||||
<li>• Template rendering</li>
|
||||
<li>• Scheduled sending</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Open tracking</li>
|
||||
<li>• Click tracking</li>
|
||||
<li>• Bounce detection</li>
|
||||
<li>• Spam complaint monitoring</li>
|
||||
<li>• Unsubscribe management</li>
|
||||
<li>• Real-time analytics</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Open tracking</li>
|
||||
<li>• Click tracking</li>
|
||||
<li>• Bounce detection</li>
|
||||
<li>• Spam complaint monitoring</li>
|
||||
<li>• Unsubscribe management</li>
|
||||
<li>• Real-time analytics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Bounce notifications</li>
|
||||
<li>• Spam complaint alerts</li>
|
||||
<li>• Unsubscribe events</li>
|
||||
<li>• Open and click events</li>
|
||||
<li>• Custom event triggers</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Bounce notifications</li>
|
||||
<li>• Spam complaint alerts</li>
|
||||
<li>• Unsubscribe events</li>
|
||||
<li>• Open and click events</li>
|
||||
<li>• Custom event triggers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Contact management</li>
|
||||
<li>• Domain verification</li>
|
||||
<li>• Template management</li>
|
||||
<li>• API key management</li>
|
||||
<li>• Rate limiting</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Contact management</li>
|
||||
<li>• Domain verification</li>
|
||||
<li>• Template management</li>
|
||||
<li>• API key management</li>
|
||||
<li>• Rate limiting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -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"
|
||||
>
|
||||
<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 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"
|
||||
>
|
||||
<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 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"
|
||||
>
|
||||
<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 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,51 +84,59 @@ 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">
|
||||
<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>
|
||||
<li>• Email verification/confirmation</li>
|
||||
<li>• Password reset requests</li>
|
||||
<li>• Login notifications</li>
|
||||
<li>• Two-factor authentication codes</li>
|
||||
<li>• Account deletion confirmations</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Email verification/confirmation</li>
|
||||
<li>• Password reset requests</li>
|
||||
<li>• Login notifications</li>
|
||||
<li>• Two-factor authentication codes</li>
|
||||
<li>• Account deletion confirmations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Shipping notifications</li>
|
||||
<li>• Delivery updates</li>
|
||||
<li>• Payment receipts</li>
|
||||
<li>• Refund confirmations</li>
|
||||
<li>• Invoice emails</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Shipping notifications</li>
|
||||
<li>• Delivery updates</li>
|
||||
<li>• Payment receipts</li>
|
||||
<li>• Refund confirmations</li>
|
||||
<li>• Invoice emails</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Comment or mention alerts</li>
|
||||
<li>• Security alerts</li>
|
||||
<li>• System status updates</li>
|
||||
<li>• Subscription renewals</li>
|
||||
<li>• Trial expiration notices</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Comment or mention alerts</li>
|
||||
<li>• Security alerts</li>
|
||||
<li>• System status updates</li>
|
||||
<li>• Subscription renewals</li>
|
||||
<li>• Trial expiration notices</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Usage reports</li>
|
||||
<li>• Account updates</li>
|
||||
<li>• Plan changes</li>
|
||||
<li>• Subscription confirmations</li>
|
||||
<li>• Account deactivation notices</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Usage reports</li>
|
||||
<li>• Account updates</li>
|
||||
<li>• Plan changes</li>
|
||||
<li>• Subscription confirmations</li>
|
||||
<li>• Account deactivation notices</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,51 +223,59 @@ 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">
|
||||
<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>
|
||||
<li>• Sale and discount promotions</li>
|
||||
<li>• New feature launches</li>
|
||||
<li>• Seasonal campaigns</li>
|
||||
<li>• Limited-time offers</li>
|
||||
<li>• Flash sales</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Sale and discount promotions</li>
|
||||
<li>• New feature launches</li>
|
||||
<li>• Seasonal campaigns</li>
|
||||
<li>• Limited-time offers</li>
|
||||
<li>• Flash sales</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Blog post roundups</li>
|
||||
<li>• Educational content</li>
|
||||
<li>• Industry news and trends</li>
|
||||
<li>• Case studies</li>
|
||||
<li>• Webinar invitations</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Blog post roundups</li>
|
||||
<li>• Educational content</li>
|
||||
<li>• Industry news and trends</li>
|
||||
<li>• Case studies</li>
|
||||
<li>• Webinar invitations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Onboarding sequences</li>
|
||||
<li>• Re-engagement campaigns</li>
|
||||
<li>• Win-back emails</li>
|
||||
<li>• Customer surveys</li>
|
||||
<li>• Loyalty program updates</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Onboarding sequences</li>
|
||||
<li>• Re-engagement campaigns</li>
|
||||
<li>• Win-back emails</li>
|
||||
<li>• Customer surveys</li>
|
||||
<li>• Loyalty program updates</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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>
|
||||
<li>• Product recommendations</li>
|
||||
<li>• Upsell/cross-sell campaigns</li>
|
||||
<li>• Birthday or anniversary emails</li>
|
||||
<li>• Renewal reminders (if promotional)</li>
|
||||
<li>• Review requests</li>
|
||||
</ul>
|
||||
<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>
|
||||
<li>• Product recommendations</li>
|
||||
<li>• Upsell/cross-sell campaigns</li>
|
||||
<li>• Birthday or anniversary emails</li>
|
||||
<li>• Renewal reminders (if promotional)</li>
|
||||
<li>• Review requests</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,16 +81,18 @@ export default function WhatIsDKIM() {
|
||||
A DKIM record is a TXT record in your DNS that contains your public key. Here's an example:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example DKIM DNS Record"
|
||||
code={`default._domainkey.yourdomain.com IN TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3QEKyU1fSma0axspqYK5iAj+54lsAg4qRRCnpKK68hawSJfliq9vKD6czJ..."
|
||||
<div className="w-full max-w-full overflow-x-auto">
|
||||
<CodeBlock
|
||||
language="dns"
|
||||
title="Example DKIM DNS Record"
|
||||
code={`default._domainkey.yourdomain.com IN TXT "v=DKIM1; k=rsa; p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3QEKyU1fSma0axspqYK5iAj+54lsAg4qRRCnpKK68hawSJfliq9vKD6czJ..."
|
||||
|
||||
# Breaking down the components:
|
||||
# v=DKIM1 -> DKIM version
|
||||
# k=rsa -> Key type (RSA encryption)
|
||||
# p=MIGfMA0... -> Public key (base64 encoded)`}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Selector Names">
|
||||
<p>
|
||||
@@ -106,35 +108,43 @@ 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">
|
||||
<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.
|
||||
</p>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-neutral-200 bg-white p-6">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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
|
||||
reporting capabilities.
|
||||
</p>
|
||||
<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
|
||||
reporting capabilities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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