16 د ګرځنده دوستانه HTML بریښنالیک غوره کړنې چې د انباکس ځای پرځای کول او ښکیلتیا اعظمي کوي
په 2023 کې، دا احتمال لري چې ګرځنده به د بریښنالیک پرانیستلو لپاره د لومړني وسیله په توګه ډیسټاپ ته لاړ شي. په حقیقت کې، HubSpot دا وموندله 46 په سلو کې د ټولو بریښنالیکونو خلاصیدل اوس په ګرځنده تلیفون کې پیښیږي. که تاسو د موبایل لپاره بریښنالیکونه نه ډیزاین کوئ، تاسو په میز کې ډیری مشغولیت او پیسې پریږدئ.
- د بریښنالیک تصدیق: ستاسو ډاډ ترلاسه کول بریښنالیکونه تصدیق شوي د لیږلو ډومین ته او IP پته د انبکس ته د رسیدو لپاره خورا مهم دی او د جنک یا سپیم فولډر ته نه لیږدول کیږي. دا هم اړینه ده، البته، چې تاسو د یو پلیټ فارم په کارولو سره د بریښنالیک څخه د انتخاب کولو وسیله چمتو کړئ چې د غړیتوب لینک شاملوي.
- ځواب ویل ډیزاین: د د HTML بریښنالیک باید وي د ځواب ویونکي لپاره ډیزاین شوی، د دې معنی دا ده چې دا کولی شي د وسیلې د سکرین اندازې سره تنظیم کړي چیرې چې دا لیدل کیږي. دا ډاډ ورکوي چې بریښنالیک دواړه په ډیسټاپ او ګرځنده وسیلو کې ښه ښکاري.
- روښانه او لنډه موضوع کرښه: د ګرځنده کاروونکو لپاره روښانه او جامع موضوع کرښه مهمه ده ځکه چې دوی ممکن یوازې د خپل بریښنالیک مخکتنې پین کې د موضوع کرښې لومړۍ څو کلمې وګوري. دا باید لنډ وي او په سمه توګه د بریښنالیک مینځپانګې منعکس کړي. د بریښنالیک موضوع لاین غوره کرکټر اوږدوالی د یو شمیر فاکتورونو پورې اړه لري ، لکه د بریښنالیک مینځپانګه ، لیدونکي ، او د بریښنالیک پیرودونکي کارول کیږي. په هرصورت، ډیری ماهرین وړاندیز کوي چې د بریښنالیک موضوع لینونه لنډ او ټکي ته وساتئ، په ځانګړې توګه د 41-50 حروف یا 6-8 کلمو ترمنځ. په ګرځنده وسیلو کې، د موضوع کرښې چې له 50 حروف څخه اوږد وي کیدای شي قطع شي، او په ځینو مواردو کې، ممکن یوازې د موضوع کرښې لومړنۍ څو کلمې ښکاره کړي. دا کولی شي د ترلاسه کونکي لپاره د بریښنالیک اصلي پیغام پوهیدل ستونزمن کړي او ممکن د بریښنالیک خلاصیدو احتمال کم کړي.
- مخکینی سرلیک: د بریښنالیک پری هیډر د بریښنالیک مینځپانګې لنډ لنډیز دی چې د بریښنالیک پیرودونکي په ان باکس کې د موضوع لیکې سره نږدې یا لاندې ښکاري. دا یو مهم عنصر دی چې کولی شي ستاسو د بریښنالیکونو خلاص نرخ اغیزه وکړي کله چې مطلوب وي. ډیری پیرودونکي HTML او CSS شاملوي ترڅو ډاډ ترلاسه کړي چې مخکینۍ متن په سمه توګه تنظیم شوی.
<!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>
- د واحد کالم ترتیب: بریښنالیکونه چې د واحد کالم ترتیب سره ډیزاین شوي په ګرځنده وسیلو کې لوستل اسانه دي. محتوا باید په منطقي ترتیب کې تنظیم شي او په ساده، د لوستلو اسانه بڼه کې وړاندې شي. که تاسو ډیری کالمونه لرئ، د CSS کارول کولی شي کالمونه په یو واحد کالم ترتیب کې تنظیم کړي.
دلته دی د HTML بریښنالیک ترتیب دا په ډیسټاپ کې 2 کالمونه دي او په ګرځنده سکرینونو کې یو کالم ته سقوط کوي:
<!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>
دلته دی د HTML بریښنالیک ترتیب دا په ډیسټاپ کې 3 کالمونه دي او په ګرځنده سکرینونو کې یو کالم ته سقوط کوي:
<!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>
- رڼا او تیاره حالت: تر ټولو د بریښنالیک پیرودونکي د سپک او تیاره حالت ملاتړ کوي سی ایس ایس
prefers-color-scheme
د کارونکي غوره توبونو د ځای په ځای کولو لپاره. ډاډ ترلاسه کړئ چې د عکس ډولونه وکاروئ چیرې چې تاسو شفاف شالید لرئ. دلته د کوډ مثال دی.
<!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>
- لوی، د لوستلو وړ فونټونه: د فونټ اندازه او سټایل باید غوره شي ترڅو متن په کوچني سکرین کې لوستل اسانه کړي. لږترلږه د 14pt فونټ اندازه وکاروئ او د فونټونو کارولو څخه ډډه وکړئ چې په کوچنیو سکرینونو کې لوستل ستونزمن وي. په عام ډول کارول شوي فونټونه په مختلف بریښنالیک پیرودونکو کې په دوامداره توګه د رینډر کولو ډیر احتمال لري، نو د ایریل، هیلویټیکا، ټایمز نیو رومن، جورجیا، ورډانا، تاهوما، او Trebuchet MS کارول عموما خوندي فونټونه دي. که تاسو دودیز فونټ کاروئ، ډاډ ترلاسه کړئ چې ستاسو په 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>
- د انځورونو غوره کارول: انځورونه کولی شي د بار کولو وخت ورو کړي او ممکن په ټولو ګرځنده وسیلو کې په سمه توګه ښکاره نشي. انځورونه په کمه توګه وکاروئ، او ډاډ ترلاسه کړئ چې دوی اندازه او اندازه دي کمپل شوی د ګرځنده لیدو لپاره. ډاډ ترلاسه کړئ چې د خپلو عکسونو لپاره alt متن ډک کړئ په هغه صورت کې چې د بریښنالیک پیرودونکي دوی بلاک کړي. ټول انځورونه باید ذخیره شي او د خوندي ویب پاڼې څخه راجع شي (ایس ایس). دلته په 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>
- د زنګ وهلو پاکول (CTA): یو روښانه او مهم CTA په هر بریښنالیک کې مهم دی، مګر دا په ځانګړې توګه د ګرځنده دوستانه بریښنالیک کې مهم دی. ډاډ ترلاسه کړئ چې CTA موندل اسانه دي او دا دومره لوی دی چې په ګرځنده وسیله کې کلیک وکړئ. که تاسو تڼۍ شاملې کړئ، تاسو کولی شئ ډاډ ترلاسه کړئ چې تاسو یې په CSS کې د انلاین سټایل ټګونو سره هم لیکلي دي:
<!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>
- لنډ او لنډ منځپانګه: د بریښنالیک مینځپانګه لنډ او ټکي ته وساتئ. د HTML بریښنالیک لپاره د کرکټر حد ممکن د بریښنالیک پیرودونکي کارول شوي پورې اړه ولري. په هرصورت، ډیری بریښنالیک پیرودونکي د بریښنالیکونو لپاره د اندازې اعظمي حد محدودوي، په ځانګړې توګه د 1024-2048 کیلوبایټ ترمنځ (KB)، کوم چې دواړه HTML کوډ او کوم عکسونه یا ضمیمې شاملې دي. فرعي سرلیکونه، د بلیټ ټکي، او د فارمیټ کولو نور تخنیکونه وکاروئ ترڅو مینځپانګه په اسانۍ سره سکین شي پداسې حال کې چې په کوچني سکرین کې سکرول او لوستل کیږي.
- متقابل عناصر: شاملول متقابل عناصر دا چې ستاسو د پیرودونکي پام ځانته راولي ستاسو د بریښنالیک څخه ښکیلتیا، درک، او د تبادلې نرخونه به لوړ کړي. متحرک GIFs، د شمیرنې ټایمرونه ، ویډیوګانې او نور عناصر د ډیری سمارټ فون بریښنالیک پیرودونکو لخوا ملاتړ کیږي.
- شخصي کول: د یو ځانګړي پیرودونکي لپاره د سلام او مینځپانګې شخصي کول کولی شي د پام وړ ښکیلتیا رامینځته کړي ، یوازې ډاډ ترلاسه کړئ چې تاسو یې سم ترلاسه کوئ! د بیلګې په توګه. که چیرې د لومړي نوم په ساحه کې هیڅ معلومات شتون ونلري نو د شاتګ درلودل مهم دي.
- متحرک مواد: د مینځپانګې قطع کول او تنظیم کول کولی شي ستاسو د غړیتوب نرخونه کم کړي او ستاسو پیرودونکي بوخت وساتي.
- د کمپاین ادغام: ډیری عصري بریښنالیک خدمت چمتو کونکي په اتوماتيک ډول ضمیمه کولو وړتیا لري د UTM کمپاین پوښتنلیکونه د هر لینک لپاره نو تاسو کولی شئ بریښنالیک په تحلیلونو کې د چینل په توګه وګورئ.
- د غوره توب مرکز: د بریښنالیک بازار موندنه د بریښنالیکونو لپاره یوازې د غوره کولو یا غوره کولو طریقې لپاره خورا مهم دی. د غوره توب مرکز شاملول چیرې چې ستاسو پیرودونکي کولی شي بدلون ومومي چې دوی څو ځله بریښنالیکونه ترلاسه کوي او کوم مینځپانګې د دوی لپاره مهم دي د ښکیل پیرودونکو سره د قوي بریښنالیک برنامه ساتلو لپاره په زړه پوری لاره ده!
- ازموینه، ازموینه، ازموینه: ډاډ ترلاسه کړئ چې خپل بریښنالیک په ډیری وسیلو کې معاینه کړئ یا یو غوښتنلیک وکاروئ خپل بریښنالیکونه د بریښنالیک پیرودونکو په اوږدو کې وګورئ د دې لپاره چې ډاډ ترلاسه کړئ چې دا ښه ښکاري او په مختلف سکرین اندازو او عملیاتي سیسټمونو کې ستاسو له لیږلو دمخه په سمه توګه کار کوي. لیتوس راپور ورکوي چې غوره 3 خورا مشهور ګرځنده خلاص چاپیریالونه ورته دوام لري: Apple iPhone (iOS Mail) ، ګوګل Android ، Apple iPad (iPadOS Mail). همچنان ، ستاسو د موضوع لینونو او مینځپانګې ازموینې تغیرات شامل کړئ ترڅو ستاسو خلاص او د کلیک له لارې نرخونه ښه کړي. ډیری بریښنالیک پلیټ فارمونه اوس اتومات ازموینه شامله کوي چې لیست به نمونه کړي ، ګټونکي تغیرات وپیژني ، او پاتې پیرودونکو ته غوره بریښنالیک واستوي.
که ستاسو شرکت د ګرځنده ځواب ویونکي بریښنالیکونو ډیزاین کولو، ازموینې او پلي کولو سره مبارزه کوي چې د ښکیلتیا لامل کیږي، زما د شرکت سره اړیکه ونیسئ. DK New Media د هر بریښنالیک خدمت چمتو کونکي پلي کولو کې تجربه لري (ESP).