16 најбољих пракси за ХТМЛ е-пошту прилагођену мобилним уређајима које максимално повећавају пласман и ангажовање пријемног сандучета
У 2023. је вероватно да ће мобилни надмашити десктоп као примарни уређај за отварање е-поште. У ствари, ХубСпот је то открио КСНУМКС одсто свих отварања е-поште сада се дешавају на мобилном телефону. Ако не дизајнирате имејлове за мобилне уређаје, остављате много ангажовања и новца на столу.
- Аутентификација е-поште: Обезбеђивање вашег мејлови су аутентификовани на домен за слање и IP адреса је критична за долазак до пријемног сандучета, а не усмерава се у фасциклу за смеће или нежељену пошту. Такође је битно, наравно, да обезбедите начин да одустанете од е-поште користећи платформу која укључује везу за одјаву.
- Нацрт са одзивом: ХТМЛ- емаил треба да буде дизајниран да реагује, што значи да се може прилагодити величини екрана уређаја на којем се гледа. Ово осигурава да е-пошта изгледа добро и на десктопу и на мобилним уређајима.
- Јасна и концизна тема: Јасна и концизна линија предмета је важна за кориснике мобилних уређаја јер могу да виде само првих неколико речи наслова у окну за преглед е-поште. Требало би да буде кратак и тачно одражава садржај е-поште. Оптимална дужина карактера за тему е-поште може да варира у зависности од бројних фактора, као што су садржај е-поште, публика и клијент е-поште који се користи. Међутим, већина стручњака препоручује да редови теме е-поште буду кратки и прецизни, обично између 41-50 знакова или 6-8 речи. На мобилним уређајима, редови за тему дужи од 50 знакова могу бити одсечени, а у неким случајевима могу да приказују само првих неколико речи наслова. Ово може отежати примаоцу да разуме главну поруку е-поште и може смањити вероватноћу отварања е-поште.
- Прехеадер: Претходно заглавље е-поште је кратак резиме садржаја е-поште који се појављује поред или испод наслова у пријемном сандучету клијента е-поште. То је важан елемент који може да утиче на брзину отварања ваших е-порука када се оптимизује. Већина клијената укључује ХТМЛ и ЦСС како би се осигурало да је текст предзаглавља правилно подешен.
<!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>
- Распоред у једној колони: Е-поруке које су дизајниране са распоредом у једној колони лакше се читају на мобилним уређајима. Садржај треба да буде организован у логичном низу и представљен у једноставном, лако читљивом формату. Ако имате више колона, коришћење ЦСС-а може елегантно организовати колоне у распореду једне колоне.
Ево једног ХТМЛ изглед е-поште то је 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>
Ево једног ХТМЛ изглед е-поште то је 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>
- Велики, читљиви фонтови: Величина и стил фонта треба изабрати тако да се текст лако чита на малом екрану. Користите величину фонта од најмање 14 пт и избегавајте коришћење фонтова које је тешко читати на малим екранима. Често коришћени фонтови имају велику вероватноћу да се доследно приказују у различитим клијентима е-поште, тако да су коришћење Ариал, Хелветица, Тимес Нев Роман, Георгиа, Вердана, Тахома и Требуцхет МС обично безбедни фонтови. Ако користите прилагођени фонт, уверите се да је резервни фонт идентификован у вашем ЦСС-у:
<!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>
- Оптимална употреба слика: Слике могу успорити време учитавања и можда се неће правилно приказати на свим мобилним уређајима. Користите слике штедљиво и уверите се да су величине и компримовани за мобилно гледање. Обавезно попуните алтернативни текст за своје слике у случају да их клијент е-поште блокира. Све слике треба да се чувају и позивају на безбедну веб локацију (ССЛ). Ево примера кода прилагодљивих слика у ХТМЛ е-поруци.
<!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>
- Обриши позив на акцију (ЦТА): Јасан и истакнут позив на акцију је важан у свакој е-поруци, али је посебно важан у е-поруци прилагођеној мобилним уређајима. Уверите се да је позив на акцију лако пронаћи и да је довољно велик да се кликне на мобилном уређају. Ако уградите дугмад, можете осигурати да су написана у ЦСС-у са уграђеним ознакама стила:
<!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>
- Кратак и концизан садржај: Нека садржај имејла буде кратак и тачан. Ограничење броја знакова за ХТМЛ е-пошту може да варира у зависности од клијента е-поште који се користи. Међутим, већина клијената е-поште намеће ограничење максималне величине за имејлове, обично између 1024-2048 килобајта (KB), који укључује и ХТМЛ код и све слике или прилоге. Користите поднаслове, тачке за набрајање и друге технике обликовања како бисте садржај лако скенирали док се померате и читате на малом екрану.
- Интерактивни елементи: укључивања интерактивни елементи који привлаче пажњу вашег претплатника повећаће ангажовање, разумевање и стопе конверзије ваше е-поште. Анимирани ГИФ, тајмере за одбројавање, видео записе и друге елементе подржава већина клијената е-поште за паметне телефоне.
- Персонализација: Персонализовање поздрава и садржаја за одређеног претплатника може значајно да подстакне ангажовање, само будите сигурни да сте то урадили како треба! На пример. Важно је имати резерве ако нема података у пољу за име.
- Динамички садржај: Сегментација и прилагођавање садржаја може смањити стопу одјављивања и задржати ваше претплатнике ангажованим.
- Интеграција кампање: Већина модерних провајдера услуга е-поште има могућност аутоматског додавања УТМ стрингови упита кампање за сваку везу тако да можете да видите е-пошту као канал у аналитици.
- Центар за преференције: Маркетинг путем е-поште је превише важан за приступ е-порукама који се могу укључити или искључити. Укључивање центра за преференције у којем ваши претплатници могу да промене колико често примају е-пошту и који им је садржај важан је фантастичан начин да задржите снажан програм е-поште са ангажованим претплатницима!
- Тест, Тест, Тест: Обавезно тестирајте своју е-пошту на више уређаја или користите апликацију за прегледајте своје имејлове на свим клијентима е-поште да бисте били сигурни да изгледа добро и правилно функционише на различитим величинама екрана и оперативним системима ПРЕ него што пошаљете. Лакмус извештава да су прва 3 најпопуларнија мобилна отворена окружења и даље иста: Аппле иПхоне (иОС Маил), Гоогле Андроид, Аппле иПад (иПадОС Маил). Такође, укључите тест варијације ваших тема и садржаја да бисте побољшали стопе отворености и учесталости кликова. Многе платформе за е-пошту сада укључују аутоматизовано тестирање које ће узорковати листу, идентификовати победничку варијацију и послати најбољу е-пошту преосталим претплатницима.
Ако се ваша компанија мучи са дизајнирањем, тестирањем и имплементацијом мобилних е-порука које подстичу ангажовање, не устручавајте се да контактирате моју фирму. DK New Media има искуство у имплементацији готово сваког провајдера услуга е-поште (ЕСП).