16 Txawb tus phooj ywg HTML Email Kev coj ua zoo tshaj plaws uas ua kom muaj kev tso npe nkag thiab koom nrog ntau tshaj
Hauv xyoo 2023, nws yog qhov yuav tshwm sim tias lub xov tooj ntawm tes yuav dhau lub desktop ua lub cuab yeej tseem ceeb rau qhib email. Qhov tseeb, HubSpot pom qhov ntawd 46 feem pua ntawm tag nrho cov email qhib tam sim no tshwm sim ntawm mobile. Yog tias koj tsis tsim email rau lub xov tooj ntawm tes, koj tawm hauv ntau qhov kev koom tes thiab nyiaj txiag ntawm lub rooj.
- Email Authentication: Xyuas kom koj emails yog authenticated mus rau qhov xa tuaj thiab IP chaw nyob yog ib qho tseem ceeb kom tau txais mus rau lub inbox thiab tsis xa mus rau ib qho khib nyiab lossis spam folder. Nws tseem yog ib qho tseem ceeb, ntawm chav kawm, uas koj muab ib txoj hauv kev xaiv tawm ntawm email siv lub platform uas suav nrog qhov txuas unsubscribe.
- Tsim Tus Qauv: cov HTML email yuav tsum tsim los teb, uas txhais tau hais tias nws tuaj yeem hloov kho rau qhov screen loj ntawm lub cuab yeej uas nws tau saib. Qhov no ua kom ntseeg tau tias email zoo li zoo ntawm ob lub desktop thiab mobile devices.
- Cov kab lus qhia meej thiab meej: Cov kab lus qhia meej thiab meej yog qhov tseem ceeb rau cov neeg siv xov tooj ntawm tes vim tias lawv tsuas pom thawj ob peb lo lus ntawm kab ntawv hauv lawv cov email saib ua ntej pane. Nws yuav tsum yog luv luv thiab qhia meej txog cov ntsiab lus ntawm email. Qhov zoo tshaj plaws tus cwj pwm ntev ntawm cov kab ntawv email tuaj yeem sib txawv nyob ntawm ntau yam, xws li email cov ntsiab lus, cov neeg tuaj saib, thiab tus neeg siv email. Txawm li cas los xij, feem ntau cov kws tshaj lij pom zoo kom khaws email cov kab lus luv luv thiab mus rau qhov chaw, feem ntau ntawm 41-50 cim lossis 6-8 lo lus. Ntawm cov khoom siv txawb, cov kab lus uas ntev dua 50 tus cim yuav raug txiav tawm, thiab qee zaum, tsuas yog tso tawm thawj ob peb lo lus ntawm kab ntawv. Qhov no tuaj yeem ua rau nws nyuaj rau tus neeg tau txais kev nkag siab txog cov lus tseem ceeb ntawm email thiab tuaj yeem txo qhov kev pheej hmoo ntawm email raug qhib.
- Preheader: Ib qho email preheader yog cov ntsiab lus luv luv ntawm cov ntsiab lus ntawm email uas tshwm nyob ib sab los yog hauv qab kab ntawv hauv email tus neeg siv khoom inbox. Nws yog lub hauv paus tseem ceeb uas tuaj yeem cuam tshuam tus nqi qhib ntawm koj cov emails thaum ua kom zoo. Cov neeg siv feem ntau suav nrog HTML thiab CSS kom paub meej tias cov ntawv sau ua ntej tau teeb tsa kom raug.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- Ib-kab layout: Cov emails uas tsim los nrog ib kab ntawv layout yooj yim nyeem ntawm cov khoom siv txawb. Cov ntsiab lus yuav tsum tau muab tso rau hauv ib qho kev sib txuas lus thiab nthuav tawm hauv hom ntawv yooj yim, nyeem tau yooj yim. Yog tias koj muaj ntau kab, siv CSS tuaj yeem teeb tsa cov kab hauv ib kab lus zoo.
Ntawm no yog ib qho HTML email layout uas yog 2 kab ntawm desktop thiab tsoo mus rau ib kem ntawm cov ntxaij vab tshaus mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
Ntawm no yog ib qho HTML email layout uas yog 3 kab ntawm desktop thiab tsoo mus rau ib kem ntawm cov ntxaij vab tshaus mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Lub teeb thiab tsaus hom: Feem ntau cov email cov neeg siv txhawb lub teeb thiab tsaus hom CSS
prefers-color-scheme
kom haum raws li tus neeg siv khoom nyiam. Nco ntsoov siv cov duab hom uas koj muaj pob tshab keeb kwm yav dhau. Ntawm no yog ib qho piv txwv code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- Loj, pom fonts: Cov font loj thiab style yuav tsum raug xaiv los ua kom cov ntawv nyeem yooj yim ntawm lub vijtsam me. Siv tsawg kawg yog 14pt font loj thiab tsis txhob siv fonts uas nyuaj rau nyeem ntawm cov ntxaij vab tshaus me. Feem ntau siv fonts muaj qhov ua tau zoo ntawm kev ua haujlwm tsis tu ncua hla cov neeg siv email sib txawv, yog li siv Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, thiab Trebuchet MS feem ntau muaj kev nyab xeeb fonts. Yog tias koj siv tus font kev cai, nco ntsoov tias muaj ib qho font tshwm sim hauv koj CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- Kev siv cov duab zoo tshaj plaws: Cov duab tuaj yeem ua rau lub sijhawm thauj khoom qeeb thiab yuav tsis pom zoo ntawm txhua lub xov tooj ntawm tes. Siv cov duab sparingly, thiab xyuas kom meej tias lawv loj thiab compressed rau mobile saib. Nco ntsoov sau cov ntawv alt rau koj cov duab nyob rau hauv qhov kev tshwm sim uas tus email thov thaiv lawv. Tag nrho cov duab yuav tsum muab khaws cia thiab xa mus los ntawm lub vev xaib ruaj ntseg (SSL). Ntawm no yog cov piv txwv code ntawm cov duab teb nyob rau hauv ib tug HTML email.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Clear hu-to-action (CTA): CTA meej thiab tseem ceeb yog qhov tseem ceeb hauv txhua tus email, tab sis nws tseem ceeb tshwj xeeb tshaj yog nyob rau hauv email-phooj ywg. Nco ntsoov tias CTA yog qhov yooj yim mus nrhiav thiab nws loj txaus los nyem rau ntawm lub xov tooj ntawm tes. Yog tias koj koom nrog cov nyees khawm, koj tuaj yeem xyuas kom meej tias koj tau sau rau hauv CSS nrog cov cim npe hauv kab ib yam nkaus:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>
- Cov ntsiab lus luv thiab luv: Khaws cov ntsiab lus ntawm email luv luv thiab mus rau lub ntsiab lus. Cov cim txwv rau HTML email tuaj yeem sib txawv nyob ntawm tus neeg siv email siv. Txawm li cas los xij, feem ntau cov neeg siv email txwv qhov loj tshaj plaws rau emails, feem ntau ntawm 1024-2048 kilobytes (KB), uas suav nrog ob qho HTML code thiab cov duab lossis cov ntawv txuas. Siv cov subheadings, cov ntsiab lus mos txwv, thiab lwm yam txheej txheem formatting kom cov ntsiab lus yooj yim scannable thaum scrolling thiab nyeem ntawm ib qho screen me me.
- Cov ntsiab lus sib tham sib: incorporating sib tham sib hais uas ntes cov xim ntawm koj cov neeg siv khoom yuav ua rau muaj kev sib koom tes, kev nkag siab, thiab kev hloov pauv ntawm koj tus email. Animated GIFs, countdown timers, yeeb yaj duab, thiab lwm yam ntsiab lus tau txais kev txhawb nqa los ntawm feem ntau ntawm cov neeg siv xov tooj smartphone.
- Tus kheej: Personalizing lub salutation thiab cov ntsiab lus rau ib tus neeg siv khoom tshwj xeeb tuaj yeem ua rau muaj kev koom tes zoo, tsuas yog nco ntsoov tias koj tau txais nws txoj cai! Piv txwv. Muaj kev poob qis yog tias tsis muaj cov ntaub ntawv hauv thawj lub npe yog qhov tseem ceeb.
- Cov ntsiab lus Dynamic: Segmentation thiab customization ntawm cov ntsiab lus tuaj yeem txo koj cov nqi unsubscribe thiab ua kom koj cov neeg koom nrog.
- Kev sib koom ua ke ntawm kev sib tw: Feem ntau cov chaw muab kev pabcuam email niaj hnub no muaj peev xwm ua kom tau txais ntxiv ntxiv UTM phiaj xwm querystrings rau txhua qhov txuas kom koj tuaj yeem saib email raws li channel hauv kev tshuaj xyuas.
- Preference Center: Kev lag luam email tseem ceeb heev rau kev xaiv los yog xaiv tawm mus rau emails. Kev koom nrog lub chaw nyiam uas koj cov neeg tuaj yeem tuaj yeem hloov tau ntau npaum li cas lawv tau txais email thiab cov ntsiab lus tseem ceeb rau lawv yog txoj hauv kev zoo los khaws cov email muaj zog nrog cov neeg koom nrog!
- Test, Test, Test: Nco ntsoov sim koj tus email ntawm ntau yam khoom siv lossis siv daim ntawv thov rau saib ua ntej koj cov email thoob plaws email neeg siv los xyuas kom meej tias nws zoo nkaus li zoo thiab ua haujlwm zoo ntawm qhov sib txawv ntawm qhov ntau thiab tsawg thiab kev khiav haujlwm ua ntej koj xa. Litmus tshaj tawm hais tias saum toj kawg nkaus 3 qhov nrov tshaj plaws mobile qhib ib puag ncig tseem zoo ib yam: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Tsis tas li, suav nrog cov kev xeem sib txawv ntawm koj cov kab ntawv thiab cov ntsiab lus los txhim kho koj qhov qhib thiab nyem-los ntawm tus nqi. Ntau lub email platforms tam sim no suav nrog kev ntsuas kev siv tshuab uas yuav ua piv txwv cov npe, txheeb xyuas qhov sib txawv, thiab xa email zoo tshaj plaws rau cov neeg siv khoom ntxiv.
Yog tias koj lub tuam txhab muaj teeb meem nrog kev tsim, sim, thiab siv cov emails teb rau lub xov tooj uas ua rau muaj kev sib koom tes, tsis txhob yig tiv tauj kuv lub tuam txhab. DK New Media muaj kev paub dhau los hauv kev siv ntawm txhua tus neeg muab kev pabcuam email (ESP).