16 Cleachdaidhean post-d HTML càirdeil gluasadach as fheàrr a mheudaicheas suidheachadh bogsa a-steach agus conaltradh
Ann an 2023, tha e coltach gum bi fòn-làimhe a’ dol thairis air deasg mar am prìomh inneal airson post-d fhosgladh. Gu dearbh, lorg HubSpot sin 46 às a 'cheud de gach post-d a tha fosgailte a-nis ri fhaicinn air fòn-làimhe. Mura h-eil thu a 'dealbhadh puist-d airson fòn-làimhe, tha thu a' fàgail tòrr conaltraidh agus airgead air a 'bhòrd.
- Dearbhadh post-d: A ’dèanamh cinnteach à do tha puist-d air an dearbhadh chun an àrainn cur agus IP tha seòladh deatamach airson faighinn chun bhogsa a-steach agus chan ann gu pasgan sgudail no spama. Tha e deatamach cuideachd, gu dearbh, gun toir thu seachad dòigh air tarraing a-mach às a’ phost-d a’ cleachdadh àrd-ùrlar a tha a’ toirt a-steach ceangal gun fho-sgrìobhadh.
- Dealbhadh freagairteach: Tha HTML bu chòir post-dealain a bhith air a dhealbhadh gus a bhith freagairteach, a tha a’ ciallachadh gun urrainn dha atharrachadh gu meud sgrion an inneil air a bheilear ga fhaicinn. Nì seo cinnteach gu bheil am post-d a’ coimhead math air gach cuid innealan deasg is gluasadach.
- Loidhne cuspair soilleir agus pongail: Tha loidhne cuspair soilleir agus pongail cudromach do luchd-cleachdaidh fònaichean-làimhe oir is dòcha nach fhaic iad ach a’ chiad beagan fhaclan den loidhne cuspair anns a’ phana ro-shealladh post-d aca. Bu chòir dha a bhith goirid agus a’ nochdadh susbaint a’ phuist-d gu ceart. Faodaidh an fhad caractar as fheàrr de loidhne cuspair post-d atharrachadh a rèir grunn nithean, leithid susbaint post-d, an luchd-èisteachd, agus an teachdaiche post-d a thathar a’ cleachdadh. Ach, tha a’ mhòr-chuid de dh’eòlaichean a’ moladh loidhnichean cuspair post-d a chumail goirid agus chun na h-ìre, mar as trice eadar 41-50 caractar no 6-8 facal. Air innealan gluasadach, dh’ fhaodadh loidhnichean cuspair nas fhaide na 50 caractar a bhith air an gearradh dheth, agus ann an cuid de chùisean, is dòcha nach seall iad ach a’ chiad beagan fhaclan den loidhne cuspair. Faodaidh seo a dhèanamh duilich don neach a gheibh e prìomh theachdaireachd a’ phuist-d a thuigsinn agus dh’ fhaodadh e lùghdachadh a dhèanamh air an coltas gun tèid am post-d fhosgladh.
- Preheader: Tha ro-cheann post-d na gheàrr-chunntas goirid de shusbaint post-d a nochdas ri taobh no fon loidhne cuspair ann am bogsa a-steach teachdaiche post-d. Tha e na eileamaid chudromach a bheir buaidh air ìre fosgailte do phuist-d nuair a thèid a bharrrachadh. Bidh a’ mhòr-chuid de luchd-dèiligidh a’ toirt a-steach HTML agus CSS gus dèanamh cinnteach gu bheil an teacsa ro-cheann air a chuir air dòigh ceart.
<!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>
- Cruth aon-colbh: Tha e nas fhasa puist-d a tha air an dealbhadh le cruth aon-cholbh a leughadh air innealan gluasadach. Bu chòir an susbaint a bhith air a chuir air dòigh ann an òrdugh loidsigeach agus air a thaisbeanadh ann an cruth sìmplidh, furasta a leughadh. Ma tha grunn cholbhan agad, faodaidh tu a bhith a’ cleachdadh CSS na colbhan a chuir air dòigh gu gràsmhor ann an cruth aon cholbh.
Seo an Cruth post-d HTML is e sin 2 cholbh air an deasg agus a’ tuiteam gu aon cholbh air scrionaichean gluasadach:
<!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>
Seo an Cruth post-d HTML is e sin 3 cholbh air an deasg agus a’ tuiteam gu aon cholbh air scrionaichean gluasadach:
<!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>
- Modh aotrom is dorcha: As bidh teachdaichean post-d a’ toirt taic do mhodh aotrom is dorcha CSS
prefers-color-scheme
gus coinneachadh ri roghainnean an neach-cleachdaidh. Dèan cinnteach gun cleachd thu seòrsaichean ìomhaighean far a bheil cùl-raon follaiseach agad. Seo eisimpleir còd.
<!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>
- Cruthan mòra, so-leughaidh: Bu chòir meud a’ chruth-clò agus an stoidhle a thaghadh gus an teacsa a dhèanamh furasta a leughadh air scrion bheag. Cleachd co-dhiù meud cruth-clò 14pt agus seachain clòidean a tha doirbh a leughadh air scrionaichean beaga. Tha coltas ann gum bi clòthan a chleachdar gu cumanta a’ toirt seachad gu cunbhalach thar diofar teachdaichean post-d, agus mar sin tha cleachdadh Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, agus Trebuchet MS mar chlàran sàbhailte. Ma chleachdas tu cruth-clò àbhaisteach, dèan cinnteach gu bheil cruth-clò fallback air a chomharrachadh nad 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>
- Cleachdadh as fheàrr de dhealbhan: Faodaidh dealbhan amannan luchdaidh a lughdachadh agus is dòcha nach seall iad gu ceart air a h-uile inneal gluasadach. Cleachd ìomhaighean gu gann, agus dèan cinnteach gu bheil iad meud agus air a dhlùthadh airson coimhead gluasadach. Dèan cinnteach gun lìon thu a-steach an teacsa alt airson na h-ìomhaighean agad ma bhios an neach-dèiligidh post-d gam bacadh. Bu chòir a h-uile dealbh a stòradh agus iomradh a thoirt orra bho làrach-lìn tèarainte (SSL). Seo eisimpleir de chòd de dhealbhan freagairteach ann am post-d HTML.
<!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>
- Glan gairm-gu-gnìomh (CTA): Tha CTA soilleir agus follaiseach cudromach ann am post-d sam bith, ach tha e gu sònraichte cudromach ann am post-d càirdeil gluasadach. Dèan cinnteach gu bheil an CTA furasta a lorg agus gu bheil e mòr gu leòr airson a bhith air a bhriogadh air inneal gluasadach. Ma bheir thu a-steach putanan, faodaidh tu dèanamh cinnteach gu bheil thu air an sgrìobhadh ann an CSS le tagaichean stoidhle in-loidhne cuideachd:
<!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>
- Susbaint goirid agus pongail: Cùm susbaint a’ phuist-d goirid agus chun a’ phuing. Faodaidh an ìre caractar airson post-d HTML atharrachadh a rèir an neach-dèiligidh post-d a thathar a’ cleachdadh. Ach, bidh a’ mhòr-chuid de luchd-cleachdaidh post-d a’ cur crìoch meud as àirde airson puist-d, mar as trice eadar 1024-2048 kilobytes (KB), a tha a’ toirt a-steach an dà chuid an còd HTML agus ìomhaighean no ceanglachan sam bith. Cleachd fo-chinn, puingean peileir, agus dòighean cruthachaidh eile gus an susbaint a dhèanamh furasta a sganadh fhad ‘s a tha thu a’ scrolladh agus a ’leughadh air scrion bheag.
- Feartan eadar-ghnìomhach: gabhail a-steach eileamaidean eadar-ghnìomhach bidh sin a’ glacadh aire an neach-clàraidh agad ag àrdachadh ìrean conaltraidh, tuigse agus tionndaidh bhon phost-d agad. GIFs beòthail, timers cunntadh sìos, bhideothan, agus eileamaidean eile a’ faighinn taic bhon mhòr-chuid de luchd-dèiligidh post-d fòn cliste.
- Pearsanachadh: Le bhith a’ pearsanachadh beannachd agus susbaint neach-clàraidh sònraichte faodaidh e conaltradh a bhrosnachadh gu mòr, dìreach dèan cinnteach gum faigh thu ceart e! E.g. Tha e cudromach gun tèid thu air ais mura h-eil dàta ann an raon ciad ainm.
- Susbaint fiùghantach: Faodaidh sgaradh agus gnàthachadh an t-susbaint na h-ìrean dì-chlàraidh agad a lughdachadh agus do luchd-aontachaidh a chumail an sàs.
- Amalachadh iomairt: Tha comas aig a’ mhòr-chuid de sholaraichean seirbheis post-d an latha an-diugh cuir a-steach gu fèin-ghluasadach Ceistean iomairt UTM airson a h-uile ceangal gus an urrainn dhut post-d fhaicinn mar sheanal ann an anailisean.
- Ionad Roghainn: Tha margaidheachd post-d ro chudromach airson dìreach dòigh-obrach tarraing-a-steach no tarraing a-mach airson puist-d. Tha a bhith a’ toirt a-steach ionad roghainn far am faod na fo-sgrìobhaichean agad atharrachadh cho tric sa gheibh iad puist-d agus dè an susbaint a tha cudromach dhaibh na dhòigh air leth airson prògram post-d làidir a chumail le luchd-aontachaidh an sàs!
- Deuchainn, deuchainn, deuchainn: Dèan cinnteach gun dèan thu deuchainn air do phost-d air iomadh inneal no cleachd tagradh gu ro-shealladh air na puist-d agad thairis air teachdaichean post-d gus dèanamh cinnteach gu bheil e a’ coimhead math agus ag obair gu ceart air diofar mheudan sgrion agus siostaman obrachaidh mus cuir thu. Litmus ag aithris gu bheil na 3 àrainneachdan fosgailte gluasadach as mòr-chòrdte fhathast mar an ceudna: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Cuideachd, cuir a-steach atharrachaidhean deuchainn de na loidhnichean cuspair agad agus an t-susbaint agad gus na h-ìrean fosgailte is cliog agad a leasachadh. Bidh mòran de àrd-ùrlaran post-d a-nis a’ toirt a-steach deuchainnean fèin-ghluasadach a nì sampall den liosta, a chomharraicheas atharrachadh a bhuannaicheas, agus a chuireas am post-d as fheàrr chun luchd-aontachaidh a tha air fhàgail.
Ma tha do chompanaidh a’ strì le bhith a’ dealbhadh, a’ dèanamh deuchainn, agus a’ cur an gnìomh puist-d freagairteach gluasadach a tha a’ stiùireadh conaltradh, na bi leisg fios a chuir chun chompanaidh agam. DK New Media tha eòlas aige ann a bhith a’ buileachadh cha mhòr a h-uile solaraiche seirbheis post-d (gu sòn- raichte).