16 Mobile Friendly HTML Email Fa'ata'ita'iga Sili e Fa'ateleina le Tu'uina ma Fa'auiga
I le 2023, e foliga mai o le telefoni feaveaʻi o le a sili atu i luga o le komepiuta e avea ma masini muamua mo le tatalaina o imeli. O le mea moni, na maua e HubSpot lena mea 46 pasene o imeli uma matala ua tupu nei i luga o le telefoni feaveaʻi. Afai e te le o mamanuina imeli mo telefoni feaveaʻi, o loʻo e tuʻuina le tele o faʻamau ma tupe i luga o le laulau.
- Email Authentication: Mautinoa lou imeli e fa'amaonia i le vaega e auina atu ma IP O le tuatusi e taua tele i le o'o atu i le pusa meli ae le o le alu atu i se pusa lapisi po'o spam. E taua foi, ioe, ia e tuʻuina atu se auala e filifili ai mai le imeli e faʻaaoga ai se faʻavae e aofia ai se fesoʻotaʻiga e le faʻamaonia.
- Fuafuaga Tali: le HTML imeli e tatau fuafuaina e tali atu, o lona uiga e mafai ona fetuunai i le lau tele o le masini o loʻo vaʻaia ai. O lenei mea e faʻamautinoa ai e foliga lelei le imeli i luga o le komepiuta ma masini feaveaʻi.
- Fa'amatalaga manino ma manino mataupu: E taua tele se laina mataupu manino ma pupuu mo tagata fa'aoga feavea'i aua e na'o nai upu muamua o le laina mataupu latou te va'aia i totonu o la latou fa'aaliga muamua imeli. E tatau ona fa'apuupuu ma fa'aalia sa'o le anotusi o le imeli. Ole umi ole amio ole laina ole imeli e mafai ona fesuisuiai e faalagolago ile tele o mea, e pei ole imeli meli, le au maimoa, ma le imeli o loʻo faʻaaogaina. Ae ui i lea, o le tele o tagata atamamai e fautuaina le faʻapuupuu o laina mataupu imeli ma i le tulaga, masani i le va o 41-50 mataitusi poʻo 6-8 upu. I masini feavea'i, e mafai ona motusia laina autu e umi atu nai lo le 50 mataitusi, ma i nisi tulaga, e ono fa'aalia na'o nai upu muamua o le laina autu. O lenei mea e mafai ona faigata ai i le tagata e mauaina ona malamalama i le savali autu o le imeli ma e ono faʻaitiitia ai le avanoa e tatalaina ai le imeli.
- Ulutala: Ole fa'auluulu ole imeli ole fa'amatalaga pu'upu'u ole anotusi ole imeli o lo'o fa'aalia i tafatafa po'o lalo ole laina mataupu ile pusa meli a le tagata fa'atau imeli. Ose elemene taua e mafai ona a'afia ai le avanoa tatala o au imeli pe a fa'alelei. Ole tele o tagata fa'atau e tu'ufa'atasia le HTML ma le CSS e fa'amautinoa ai o lo'o fa'atulaga lelei le tusitusiga muamua.
<!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>
- Fa'atonu koluma tasi: O imeli e faʻatulagaina ma se faʻasologa o le koluma e tasi e faigofie ona faitau i masini feaveaʻi. O le anotusi e tatau ona faʻatulagaina i se faʻasologa talafeagai ma tuʻuina atu i se faʻaoga faigofie, faigofie ona faitau. Afai e tele au koluma, o le fa'aogaina o le CSS e mafai ona fa'atulaga lelei ia koluma i se fa'asologa o koluma e tasi.
O le mea lenei HTML fa'atulagaina imeli e 2 koluma i luga o le desktop ma pa'u i le tasi koluma i luga o lau telefoni feaveai:
<!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>
O le mea lenei HTML fa'atulagaina imeli e 3 koluma i luga o le desktop ma pa'u i le tasi koluma i luga o lau telefoni feaveai:
<!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>
- Faiga Malamalama ma Pogisa: aupito e lagolagoina e tagata imeli le tulaga malamalama ma le pogisa CSS
prefers-color-scheme
e fa'aogaina mana'oga o le tagata fa'aoga. Ia mautinoa e fa'aoga ituaiga ata e iai sau fa'amatalaga manino. O se fa'ata'ita'iga fa'ailoga.
<!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>
- Mata'itusi tetele ma mafai ona faitau: E tatau ona filifilia le tele o le vai papatisoga ma le sitaili e faafaigofie ai ona faitau le tusitusiga i luga o se tamai lau. Fa'aoga a itiiti ifo i le 14pt le tele o le font ma aloese mai le fa'aogaina o mataitusi e faigata ona faitau i luga o lau laiti. O fonuka e masani ona fa'aogaina e maualuga le avanoa e tu'uina atu ai i taimi uma i luga o fa'atau imeli eseese, o le fa'aaogaina o Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, ma Trebuchet MS e masani lava ona saogalemu fonuka. Afai e te fa'aogaina se fa'amanu masani, ia mautinoa e i ai se fa'ailoga fa'afo'i e iloa i lau 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>
- Fa'aoga lelei o ata: O ata e mafai ona fa'agesegese taimi o uta ma atonu e le fa'aalia lelei i masini feavea'i uma. Fa'aaoga fa'aitiiti ata, ma ia mautinoa e lapopo'a ma faʻamalosi mo le va'aiga feavea'i. Ia mautinoa e faʻatumu le alt text mo au ata i le tulaga e poloka ai e le kalani imeli. O ata uma e tatau ona teuina ma faʻasino mai se upega tafaʻilagi malupuipuia (SSL). Ole fa'ata'ita'iga code o ata tali mai ile imeli 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>
- Fa'amanino le vala'au e fai (CTA): O se CTA manino ma taʻutaʻua e taua i soʻo se imeli, ae e sili ona taua ile imeli feaveaʻi. Ia mautinoa o le CTA e faigofie ona maua ma e lava lona telē e kiliki i luga o se masini feaveaʻi. Afai e te faʻapipiʻiina faʻamau, e mafai ona e mautinoa o loʻo e tusia i le CSS faʻatasi ai ma pine faʻailoga inline:
<!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>
- Mea pu'upu'u ma fa'a'oto: Fa'amaumau mea o lo'o i totonu ole imeli ia fa'apuupuu ma fa'atatau. Ole tapula'a ole amio mo se imeli HTML e mafai ona fesuisuia'i e fa'atatau ile imeli ile fa'aaogaina. Ae ui i lea, o le tele o tagata imeli e tuʻuina atu se tapulaa maualuga mo imeli, masani i le va o le 1024-2048 kilobytes (KB), lea e aofia uma ai le HTML code ma soʻo se ata poʻo mea faʻapipiʻi. Fa'aaogā ulutala, fa'ailoga pulu, ma isi faiga fa'apena e fa'afaigofie ai le su'esu'eina o mea a'o ta'avale ma faitau i luga o se lau la'ititi.
- Elemene fegalegaleai: tuufaatasia elemene fegalegaleai e pu'eina le manatu o lau tagata fai saofaga o le a fa'ateleina le fa'auiga, malamalama, ma fua faatatau o le liua mai lau imeli. Animasi GIF, fa'asologa o taimi, vitio, ma isi elemene e lagolagoina e le tele o tagata fa'atau imeli telefoni.
- Faʻapitoa: O le fa'avasegaina o le fa'afeiloa'iga ma le anotusi mo se tagata fai saofaga fa'apitoa e mafai ona fa'aosoina le fa'auiga, ia mautinoa e te sa'o! Eg. E taua le i ai o fa'aletonu pe afai e leai ni fa'amatalaga ile igoa muamua.
- Fa'atosina o mea: O le fa'avasegaina ma le tu'ufa'atasiga o mea e mafai ona fa'aitiitia ai lau tau e le'i lesitalaina ma fa'aauau pea ona fa'agaoioi lau au fai saofaga.
- Tu'ufa'atasiga Fa'asalalauga: Ole tele ole 'au'aunaga imeli fa'aonaponei e iai le agava'a e fa'apipi'i otometi UTM campaign querystrings mo so'otaga uma ina ia mafai ona e va'ai imeli o se auala i au'ili'iliga.
- Nofoaga Autu: E taua tele le maketiina o imeli mo na'o se filifiliga i totonu po'o le opt-out i imeli. O le tu'ufa'atasia o se nofoaga autu e fiafia i ai e mafai ai e lau au fai saofaga ona suia le tele o taimi latou te mauaina ai imeli ma o le a le mea e taua ia i latou o se auala sili lea e tausia ai se polokalame imeli malosi ma le au fai saofaga!
- Su'ega, Su'ega, Su'ega: Ia mautinoa e faʻataʻitaʻi lau imeli ile tele o masini pe faʻaoga se talosaga i mua'i va'ai au imeli i fa'atau imeli ina ia mautinoa e foliga lelei ma galue lelei i luga o le tele o lau mata eseese ma faiga faʻaogaina AO LEʻI auina atu. Litmus lipoti o le pito i luga 3 sili ona lauiloa feaveaʻi siosiomaga tatala e faaauau pea ona tutusa: Apple iPhone (iOS Meli), Google Android, Apple iPad (iPadOS Meli). Fa'apena fo'i, tu'ufa'atasia su'ega su'ega o au laina mataupu ma anotusi e fa'aleleia atili ai lau tau tatala ma kiliki. O le tele o fa'asalalauga imeli ua tu'ufa'atasia nei fa'ata'ita'iga otometi e fa'ata'ita'i ai le lisi, fa'ailoa se suiga manumalo, ma lafo le imeli sili i tagata o lo'o totoe.
Afai o loʻo tauivi lau kamupani i le mamanuina, suʻega, ma le faʻatinoina o imeli tali feaveaʻi o loʻo faʻauluina le faʻauiga, aua le faʻatuai e faʻafesoʻotaʻi laʻu kamupani. DK New Media ei ai le poto masani i le faʻatinoina o toetoe lava o tuʻuina atu auaunaga imeli (ESP).