16 Hababka ugu Fiican ee Emailka Saaxiibtinimada leh ee Mobile-ka ee Sareeya Meelaynta iyo Ka-qaybgalka Sanduuqa-gelinta
2023, waxaa suurtogal ah in mobilku dhaafo desktop-ka oo ah aaladda koowaad ee furitaanka iimaylka. Dhab ahaantii, HubSpot wuu helay taas boqolkiiba 46 Dhammaan emailada furan hadda waxay ku dhacaan mobilada. Haddi aanad iimaylka u samaynayn mobilka, waxa aad kaga tagaysaa wax badan oo ka qaybqaadasho iyo lacag miiska saaran.
- Xaqiijinta iimaylka: Hubinta inaad emails waa la xaqiijiyay ku dir domainka iyo IP ciwaanku waxa uu muhiim u yahay in la gaadho sanduuqa-mailka ee aan loo gudbin qashinka junk ama spamka. Sidoo kale waa lama huraan, dabcan, inaad bixiso hab aad uga bixi karto iimaylka adigoo isticmaalaya goob ay ku jirto xiriirinta ka bixida.
- Naqshadeynta Jawaabta: The HTML iimaylka waa inuu ahaadaa loogu talagalay inay noqoto mid ka jawaaba, taas oo macnaheedu yahay in ay la qabsan karto cabbirka shaashadda qalabka lagu eegayo. Tani waxay hubinaysaa in iimaylka uu si fiican ugu muuqdo desktop-ka iyo aaladaha mobilada labadaba.
- Xariiq mawduuc oo cad oo kooban: Mawduuc cad oo kooban ayaa muhiim u ah isticmaalayaasha mobilada sababtoo ah waxa laga yaabaa inay kaliya ku arkaan dhawrka kelmadood ee ugu horreeya ee mawduuca muraayadda horudhaca iimaylka. Waa in ay ahaataa mid kooban oo si sax ah uga tarjumaysa nuxurka iimaylka. Dhererka dabeecadda ugu habboon ee khadka mawduuca iimaylka way kala duwanaan kartaa iyadoo ku xidhan dhawr arrimood, sida waxa ku jira iimaylka, dhagaystayaasha, iyo macmiilka iimaylka ee la isticmaalayo. Si kastaba ha ahaatee, khubarada intooda badani waxay ku talinayaan in la dhigo mawduuca emailka gaaban iyo barta, sida caadiga ah inta u dhaxaysa 41-50 xaraf ama 6-8 kelmadood. Aaladaha mobaylada, xariiqyada mawduucyada ka dheer 50 xaraf ayaa laga yaabaa inay go'aan, mararka qaarkoodna, waxa laga yaabaa inay muujiyaan oo keliya dhawrka eray ee xariiqda mawduuca. Tani waxay ku adkeyn kartaa qaataha inuu fahmo fariinta ugu muhiimsan ee iimaylka waxaana laga yaabaa inay yaraato suurtagalnimada in iimaylka la furo.
- Madax hore: Madaxa hore ee iimaylka waa koobid kooban oo ku saabsan nuxurka iimaylka ee ka muuqda dhinaca ama ka hooseeya khadka mawduuca ee sanduuqa macmiilka iimaylka. Waa shay muhiim ah oo saamayn kara heerka furan ee iimayladaada marka la hagaajiyo. Macaamiisha intooda badani waxay ku daraan HTML iyo CSS si loo hubiyo in qoraalka madax-hore si habboon loo dejiyay.
<!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>
- Qaabka hal tiir: Iimayllada loo qaabeeyey qaab hal-tix ah ayaa fudud in lagu akhriyo aaladaha mobilada. Waxa ku jira waa in loo habeeyaa si iskuxig ah oo macquul ah oo lagu soo bandhigaa qaab fudud, si sahlan loo akhriyi karo. Haddii aad leedahay tiirar badan, ka faa'iidaysiga CSS waxa ay si xarrago leh u habayn kartaa tiirarka qaab hal-column ah.
Waa tan Qaabaynta iimaylka HTML taasi waa 2 tiir oo miiska saaran oo ku dumay hal tiir oo shaashadaha mobilada ah:
<!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>
Waa tan Qaabaynta iimaylka HTML taasi waa 3 tiir oo miiska saaran oo ku dumay hal tiir oo shaashadaha mobilada ah:
<!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>
- Qaabka Iftiinka iyo Madow: Inta badan macaamiisha iimaylka waxay taageeraan habka iftiinka iyo mugdiga CSS
prefers-color-scheme
si loo waafajiyo dookhyada isticmaalaha. U hubso inaad isticmaasho noocyada sawirka halka aad asal hufan ku leedahay. Waa kan tusaale kood.
<!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>
- Far waaweyn, oo la akhriyi karo: Cabbirka farta iyo qaabka waa in la doortaa si qoraalka looga dhigo mid fudud oo shaashad yar laga akhriyi karo. Isticmaal ugu yaraan cabbir 14pt ah kana fogow isticmaalka xarfaha ay adagtahay in wax laga akhriyo shaashadaha yaryar. Farshaxanada sida caadiga ah loo isticmaalo waxay leeyihiin suurtogalnimo sare oo si joogta ah loogu gudbiyo macaamiisha kala duwan ee iimaylka, markaa isticmaalka Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, iyo Trebuchet MS waa xarfo badbaado leh. Haddii aad isticmaasho far gaar ah, hubi inaad haysato farta dib-u-dhaca ah ee lagu aqoonsaday CSS kaaga:
<!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>
- Isticmaalka ugu wanaagsan ee sawirada: Sawiradu waxay hoos u dhigi karaan wakhtiyada rarka waxaana laga yaabaa inaysan si sax ah uga muuqan dhammaan aaladaha mobilada. U isticmaal sawirada si yar, oo hubi in ay cabbiran yihiin iyo isku buuqsan daawashada mobilada. Hubi inaad u buuxiso qoraalka alt sawiradaada haddii ay dhacdo in macmiilka iimaylka uu xannibo iyaga. Dhammaan sawirada waa in la kaydiyaa lagana tixraacaa degel ammaan ah (SSL). Waa kan tusaalaha koodka sawirada jawaabaha ee iimaylka 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>
- Nadiifi wicitaanka-ficilkaCTA): CTA cad oo caan ah ayaa muhiim u ah iimayl kasta, laakiin waxay si gaar ah muhiim ugu tahay iimaylka saaxiibtinimada leh. Hubi in CTA ay fududahay in la helo iyo in ay weyn tahay oo ku filan in lagu riixo aaladda moobaylka. Haddii aad ku darto badhamada, waxaad xaqiijin kartaa in lagugu qoray CSS oo leh summada xariijinta:
<!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>
- Qoraal gaaban oo kooban: Nuxurka iimaylka ka dhig mid gaaban oo barta. Xadka xuruufta iimaylka HTML way kala duwanaan kartaa iyadoo ku xidhan iimaylka macmiilka la isticmaalayo. Si kastaba ha ahaatee, macaamiisha iimaylka intooda badani waxay soo rogaan xadka ugu sarreeya ee emayllada, caadi ahaan inta u dhaxaysa 1024-2048 kilobytes (KB), oo ay ku jiraan koodka HTML iyo wixii sawir ama lifaaq ah labadaba. Isticmaal cinwaan-hoosaadyo, dhibcaha rasaasta, iyo farsamooyinka qaabaynta kale si aad nuxurka uga dhigto mid si fudud loo sawiri karo marka la rogrogayo oo wax ku akhrinayo shaashad yar.
- Walxaha is dhexgalka: daraya xubno is dhexgal ah taas oo qabsata dareenka macaamiishaada waxay kor u qaadi doontaa ka-qaybgalka, fahamka, iyo heerka beddelka iimaylkaaga. GIF-yada Animated, Saacadaha tirinta, fiidyaha, iyo walxaha kale waxaa taageera inta badan macaamiisha iimaylka casriga ah.
- Shaqsi Ahaan: Shakhsiyaynta salaanta iyo waxa ku jira macaamiil gaar ah waxay si weyn u kicin kartaa ka qaybgalka, kaliya iska hubi inaad saxan tahay! Tusaale. Lahaanshaha dib-u-dhac haddii aysan jirin xog ku jirta goobta magaca koowaad waa muhiim.
- Mawduuca firfircoon: Kala qaybinta iyo habaynta waxa ku jira waxa ay yarayn kartaa sicirka is-diiwaangelintaada iyo ka dhigista macaamiishaada inay ku hawlan yihiin.
- Isku-dhafka Ololaha: Inta badan adeeg bixiyayaasha iimaylka casriga ah waxay awood u leeyihiin inay si toos ah ugu lifaaqaan Xadhiga su'aalaha ololaha UTM xiriir kasta si aad u arki karto iimaylka kanaal ahaan falanqaynta.
- Xarunta Dookhyada: Suuqgeynta iimaylka ayaa aad muhiim u ah kaliya ka bixista ama ka bixista habka iimaylada. Ku darida xarun dookh halkaasoo macaamiishaadu ay bedeli karaan inta jeer ee ay helaan iimaylka iyo waxa ku jira ee muhiimka u ah iyaga waa hab cajiib ah oo lagu ilaaliyo barnaamijka iimaylka xooggan ee macaamiisha ku hawlan!
- Tijaabi, Tijaabi, Tijaabi: Hubi inaad ku tijaabiso iimaylkaaga aalado badan ama aad isticmaasho codsi si aad u isticmaasho dib u eeg iimayladaada dhamaan macaamiisha iimaylka si loo hubiyo in ay u muuqato mid wanaagsan oo si sax ah ugu shaqeyneysa cabbirrada shaashadda iyo nidaamyada kala duwan KA HOR intaadan dirin. Litmus ayaa sheegaysa in 3da deegaan ee ugu caansan mobilada furan ay sii ahaanayaan sidii hore: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Sidoo kale, ku dar kala duwanaanshiyaha imtixaanada ee khadadka mawduucaaga iyo waxa ku jira si aad u horumariso qiimayaashaada furan iyo gujisyada. Meelo badan oo iimaylo ah ayaa hadda ku jira imtixaan otomaatig ah kuwaas oo muunad ka qaadi doona liiska, aqoonsan doona kala duwanaanshaha guusha, oo u diri doona iimaylka ugu fiican macaamiisha hadhay.
Haddii shirkaddaadu ay la daalaa dhacayso naqshadaynta, tijaabinta, iyo hirgelinta fariimaha mobaylka ee ka jawaabaya ee keenaya ka-qaybgalka, ha ka waaban inaad la xidhiidho shirkaddayda. DK New Media waayo-aragnimo u leeyahay hirgelinta dhammaan adeeg bixiyayaasha iimaylka (gaar ahaan).