Gələnlər qutusunun yerləşdirilməsi və əlaqəni maksimuma çatdıran 16 Mobil Dost HTML E-poçt Ən Yaxşı Təcrübələri
2023-cü ildə mobil telefonun e-poçtun açılması üçün əsas cihaz kimi masaüstünü ötəcəyi ehtimal edilir. Əslində HubSpot bunu tapdı 46 faiz bütün e-poçtların indi mobildə açılır. Mobil üçün e-poçt dizaynı yaratmırsınızsa, masada çoxlu nişan və pul qoyursunuz.
- E-poçt Doğrulaması: Sizin təmin edilməsi e-poçtlar təsdiqlənir göndərən domenə və IP ünvan gələnlər qutusuna daxil olmaq üçün vacibdir və lazımsız və ya spam qovluğuna yönləndirilmir. Əlbətdə ki, abunədən çıxmaq linkini özündə birləşdirən platformadan istifadə edərək e-poçtdan imtina etmək üçün vasitə təqdim etməyiniz də vacibdir.
- Cavab verici dizayn: The HTML e-poçt olmalıdır cavab vermək üçün nəzərdə tutulmuşdur, bu o deməkdir ki, o, baxıldığı cihazın ekran ölçüsünə uyğunlaşa bilər. Bu, e-poçtun həm masaüstü, həm də mobil cihazlarda yaxşı görünməsini təmin edir.
- Aydın və qısa mövzu xətti: Mobil istifadəçilər üçün aydın və qısa mövzu xətti vacibdir, çünki onlar e-poçtun önizləmə panelində mövzu xəttinin yalnız ilk bir neçə sözünü görə bilərlər. Qısa olmalı və e-poçtun məzmununu dəqiq əks etdirməlidir. E-poçt mövzu xəttinin optimal simvol uzunluğu e-poçt məzmunu, auditoriya və istifadə olunan e-poçt müştərisi kimi bir sıra amillərdən asılı olaraq dəyişə bilər. Bununla belə, əksər ekspertlər e-poçtun mövzu sətirlərini qısa və dəqiq, adətən 41-50 simvol və ya 6-8 söz arasında saxlamağı tövsiyə edir. Mobil cihazlarda 50 simvoldan uzun olan mövzu sətirləri kəsilə bilər və bəzi hallarda mövzu xəttinin yalnız ilk bir neçə sözünü göstərə bilər. Bu, alıcının e-poçtun əsas mesajını başa düşməsini çətinləşdirə bilər və e-poçtun açılma ehtimalını azalda bilər.
- Önbaşlıq: E-poçtun ön başlığı e-poçt müştərisinin gələnlər qutusunda mövzu xəttinin yanında və ya altında görünən e-poçtun məzmununun qısa xülasəsidir. Optimallaşdırıldıqda e-poçtlarınızın açıq sürətinə təsir edə biləcək vacib elementdir. Müştərilərin əksəriyyəti ilkin başlıq mətninin düzgün qurulmasını təmin etmək üçün HTML və CSS-dən istifadə edir.
<!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>
- Tək sütunlu düzən: Bir sütunlu tərtibatla hazırlanmış e-poçtları mobil cihazlarda oxumaq daha asandır. Məzmun məntiqi ardıcıllıqla təşkil edilməli və sadə, asan oxunan formatda təqdim edilməlidir. Bir neçə sütununuz varsa, CSS-dən istifadə edərək sütunları tək sütunlu düzümdə zərif şəkildə təşkil edə bilərsiniz.
İşdə bir HTML e-poçt düzümü bu, masaüstündə 2 sütundur və mobil ekranlarda bir sütuna yığılır:
<!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>
İşdə bir HTML e-poçt düzümü bu, masaüstündə 3 sütundur və mobil ekranlarda bir sütuna yığılır:
<!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>
- İşıq və qaranlıq rejimi: körpü e-poçt müştəriləri işıq və qaranlıq rejimi dəstəkləyir CSS
prefers-color-scheme
istifadəçi üstünlüklərini uyğunlaşdırmaq üçün. Şəffaf bir fonun olduğu yerlərdə şəkil növlərindən istifadə etdiyinizə əmin olun. Budur bir kod nümunəsi.
<!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>
- Böyük, oxunaqlı şriftlər: Şriftin ölçüsü və üslubu mətnin kiçik ekranda oxunmasını asanlaşdırmaq üçün seçilməlidir. Ən azı 14pt şrift ölçüsündən istifadə edin və kiçik ekranlarda oxunması çətin olan şriftlərdən istifadə etməyin. Tez-tez istifadə olunan şriftlərin müxtəlif e-poçt müştəriləri arasında ardıcıl şəkildə göstərilmə ehtimalı yüksəkdir, ona görə də Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma və Trebuchet MS-dən istifadə adətən təhlükəsiz şriftlərdir. Fərdi şriftdən istifadə edirsinizsə, CSS-də müəyyən edilmiş ehtiyat fontunuz olduğundan əmin olun:
<!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>
- Şəkillərdən optimal istifadə: Şəkillər yükləmə vaxtını ləngidə bilər və bütün mobil cihazlarda düzgün göstərilməyə bilər. Şəkillərdən qənaətlə istifadə edin və onların ölçülü və ölçülü olduğundan əmin olun sıxılmışdır mobil baxmaq üçün. E-poçt müştərisi onları bloklayacağı təqdirdə şəkilləriniz üçün alternativ mətni doldurmağınızdan əmin olun. Bütün şəkillər saxlanılmalı və təhlükəsiz internet saytından istinad edilməlidir (SSL). Budur HTML e-poçtunda cavab verən şəkillərin nümunə kodu.
<!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>
- Fəaliyyətə çağırışı təmizləyin (CTA): Aydın və görkəmli CTA istənilən e-poçtda vacibdir, lakin mobil dostluq e-poçtunda xüsusilə vacibdir. CTA-nın asanlıqla tapıldığından və mobil cihazda kliklənmək üçün kifayət qədər böyük olduğundan əmin olun. Düymələri birləşdirsəniz, onları CSS-də daxili stil teqləri ilə yazmağınızdan əmin ola bilərsiniz:
<!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>
- Qısa və qısa məzmun: E-poçtun məzmununu qısa və əsas tutun. HTML e-poçtu üçün simvol limiti istifadə olunan e-poçt müştərisindən asılı olaraq dəyişə bilər. Bununla belə, əksər e-poçt müştəriləri e-poçtlar üçün adətən 1024-2048 kilobayt (KB), həm HTML kodunu, həm də istənilən şəkilləri və ya qoşmaları ehtiva edir. Kiçik ekranda sürüşdürərkən və oxuyarkən məzmunu asanlıqla skan etmək üçün alt başlıqlardan, işarə nöqtələrindən və digər formatlaşdırma üsullarından istifadə edin.
- İnteraktiv elementlər: daxil interaktiv elementlər Abunəçinizin diqqətini cəlb edən e-poçtunuzdan əlaqə, anlayış və dönüşüm nisbətlərini artıracaq. Animated GIF-lər, geri sayım taymerləri, videolar və digər elementlər smartfon e-poçt müştərilərinin əksəriyyəti tərəfindən dəstəklənir.
- Fərdiləşdirmə: Müəyyən bir abunəçi üçün salam və məzmunun fərdiləşdirilməsi əlaqəni əhəmiyyətli dərəcədə artıra bilər, sadəcə bunu düzgün başa düşdüyünüzə əmin olun! Məs. Ad sahəsində heç bir məlumat yoxdursa, ehtiyatların olması vacibdir.
- Dinamik Məzmun: Məzmunun seqmentləşdirilməsi və fərdiləşdirilməsi abunəlikdən çıxma dərəcələrinizi azalda və abunəçilərinizi məşğul saxlaya bilər.
- Kampaniya inteqrasiyası: Müasir e-poçt xidməti təminatçılarının əksəriyyəti avtomatik olaraq əlavə etmək imkanına malikdir UTM kampaniya sorğu sətirləri e-poçtu analitikada kanal kimi görə bilməniz üçün hər bir link üçün.
- Üstünlük Mərkəzi: E-poçt marketinqi yalnız e-poçtlara qoşulma və ya imtina yanaşması üçün çox vacibdir. Abunəçilərinizin e-məktubları nə qədər tez-tez qəbul etdiklərini və onlar üçün hansı məzmunun vacib olduğunu dəyişə biləcəyi üstünlük mərkəzini daxil etmək, məşğul olan abunəçilərlə güclü e-poçt proqramı saxlamaq üçün fantastik bir yoldur!
- Test, Test, Test: E-poçtunuzu birdən çox cihazda sınadığınızdan və ya tətbiqdən istifadə etdiyinizdən əmin olun e-poçt müştəriləri arasında e-poçtlarınızı önizləyin göndərməzdən ƏVVƏL onun yaxşı görünməsini və müxtəlif ekran ölçülərində və əməliyyat sistemlərində düzgün işləməsini təmin etmək üçün. Lakmus xəbər verir ki, ilk 3 ən populyar mobil açıq mühit eyni olmaqda davam edir: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Həmçinin, açıq və klikləmə nisbətlərinizi yaxşılaşdırmaq üçün mövzu xətlərinizin və məzmununuzun test variasiyalarını daxil edin. Bir çox e-poçt platformaları indi siyahıdan nümunə götürəcək, qalib variasiyanı müəyyən edəcək və qalan abunəçilərə ən yaxşı e-poçtu göndərəcək avtomatlaşdırılmış testləri özündə birləşdirir.
Əgər şirkətiniz nişanlanmaya səbəb olan mobil cavab verən e-poçtların dizaynı, sınaqdan keçirilməsi və tətbiqi ilə mübarizə aparırsa, mənim firmamla əlaqə saxlamaqdan çəkinməyin. DK New Media faktiki olaraq hər bir e-poçt xidməti provayderinin tətbiqində təcrübəyə malikdir (ESP).