16 Īmēra HTML Friendly Pukoro Nga Mahi Pai e Whakanuia ai te Whakanohonga Pouakauru me te Whakauru
I te tau 2023, tera pea ka nui ake te waea pūkoro i te papamahi hei taputapu tuatahi mo te whakatuwhera imeera. Inaa, i kitea e HubSpot tera 46 ōrau o nga imeera katoa e tuwhera ana ka puta i runga waea pūkoro. Mena kaore koe i te hoahoa i nga imeera mo te waea pūkoro, ka waiho e koe he maha o nga mahi me nga moni kei runga i te tepu.
- Īmēra Motuhēhēnga: Te whakarite i to kua whakamotuhēhēhia ngā īmēra ki te rohe tuku me IP Ko te wahitau he mea nui kia tae atu ki te pouakaroto, kia kaua e tukuna ki te kōpaki paraurehe, ki te kōpaki spam. He mea nui ano hoki, me whakarato koe i tetahi huarahi ki te whakaputa i te imeera ma te whakamahi i tetahi papaaho e whakauru ana i tetahi hononga wetewete.
- Hoahoa Whakautu: te HTML me penei te imeera i hangaia hei whakautu, ko te tikanga ka taea te whakatika ki te rahi o te mata o te taputapu e tirohia ana. Ma tenei ka pai te ahua o te imeera i runga i te papamahi me nga taputapu pūkoro.
- Rarangi kaupapa marama me te poto: He mea nui te rarangi kaupapa marama me te poto mo nga kaiwhakamahi waea pūkoro na te mea ka kite noa ratou i nga kupu tuatahi o te rarangi kaupapa kei roto i ta ratou pihanga arokite imeera. Me poto me te whakaatu tika i nga korero o te imeera. Ko te roanga tino pai o te rarangi kaupapa imeera ka rereke i runga i te maha o nga mea, penei i te ihirangi imeera, te hunga whakarongo, me te kaihoko imeera e whakamahia ana. Heoi, ko te nuinga o nga tohunga e kii ana kia poto nga rarangi kaupapa imeera me te tohu, ko te tikanga kei waenga i nga tohu 41-50, 6-8 kupu ranei. I runga i nga taputapu waea, ka tapahia nga rarangi kaupapa he roa ake i te 50 nga tohu, a, i etahi wa, ka whakaatu noa i nga kupu tuatahi o te rarangi kaupapa. He uaua tenei mo te kaiwhiwhi ki te mohio ki te karere matua o te imeera me te whakaiti i te tupono ka whakatuwherahia te imeera.
- Panemua: He whakarāpopototanga poto o te ihirangi o te imeera ka puta ki te taha, ki raro ranei i te rarangi kaupapa i roto i te pouakaroto a te kaihoko imeera. He huānga nui tera ka pa ki te reiti tuwhera o o imeera ina whakatikahia. Ko te nuinga o nga kiritaki e whakauru ana i te HTML me te CSS hei whakarite kia tika te whakatakotoranga o te tuhinga o mua.
<!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>
- Tahora tīwae kotahi: Ko nga imeera kua hoahoatia me te whakatakotoranga pou-kotahi he ngawari ake te panui i runga i nga taputapu pūkoro. Me whakarite nga ihirangi i roto i te raupapa arorau me te whakaatu i roto i te whakatakotoranga ngawari, ngawari ki te panui. Mena he maha nga pou, ma te whakamahi i te CSS ka taea te whakarite i nga pou ki te whakatakotoranga pou kotahi.
Anei tetahi tahora īmēra HTML e 2 nga pou kei runga papamahi ka tiango ki te pou kotahi i runga i nga mata pūkoro:
<!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>
Anei tetahi tahora īmēra HTML e 3 nga pou kei runga papamahi ka tiango ki te pou kotahi i runga i nga mata pūkoro:
<!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>
- Aratau Maama me te Pouri: te nuinga Ka tautoko nga kaihoko imeera i te aratau marama me te pouri CSS
prefers-color-scheme
ki te whakatutuki i nga hiahia o te kaiwhakamahi. Kia kaha ki te whakamahi i nga momo whakaahua kei a koe he papamuri marama. Anei he tauira waehere.
<!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>
- Nga momotuhi nui, ka taea te panui: Me whiriwhiri te rahi momotuhi me te ahua kia ngawari ai te panui o te tuhinga ki runga mata iti. Whakamahia te rahi o te momotuhi 14pt iti rawa me te karo i te whakamahi momotuhi uaua ki te panui i runga i nga mata iti. Ko nga momotuhi e whakamahia ana he nui te ahua ki te whakaputa i nga wa katoa ki nga kaihoko imeera rereke, no reira ko te whakamahi i te Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, me Trebuchet MS he momotuhi haumaru. Mena kei te whakamahi koe i te momotuhi ritenga, me mohio kei te tautuhia he momotuhi takahuri ki to 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>
- Te whakamahi pai o nga whakaahua: Ka taea e nga whakaahua te whakaroa i nga waa uta, ka kore pea e whakaatu tika ki nga taputapu pūkoro katoa. Kia iti te whakamahi i nga whakaahua, me te whakarite kia rite te rahi me te whakahekehia mo te tirohanga pūkoro. Kia mahara ki te whakaki i te kuputuhi teitei mo o whakaahua mena ka aukatihia e te kaihoko imeera. Ko nga whakaahua katoa me penapena me te tuku mai i tetahi paetukutuku haumaru (SSL). Anei te tauira waehere o nga whakaahua whakautu i roto i te imeera 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>
- Ūkuia te karanga-ki-mahi (CTA): He mea nui te CTA maamaa me te rongonui i roto i nga imeera katoa, engari he mea tino nui i roto i te imeera ratarata-pukoro. Kia mohio kei te ngawari te rapu CTA me te nui kia paatohia i runga i te taputapu pūkoro. Mena ka whakauruhia e koe nga patene, ka taea e koe te whakarite kua tuhia e koe ki te CSS me nga tohu momo raina:
<!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>
- He ihirangi poto me te poto: Puritia nga korero o te imeera kia poto, kia tika hoki. Ko te tepe tohu mo te imeera HTML ka rereke i runga i te kaihoko imeera e whakamahia ana. Heoi, ko te nuinga o nga kaihoko imeera ka whakatau i te tepe rahi morahi mo nga imeera, i waenga i te 1024-2048 kiropaita (KB), kei roto ko te waehere HTML me etahi whakaahua, taapiri ranei. Whakamahia nga upoko-iti, nga tohu matā, me etahi atu tikanga whakahōputu kia ngawari te tirotiro i te ihirangi i te wa e panuku ana me te panui i runga i te mata iti.
- Huānga tauwhitiwhiti: whakauru huānga pāhekoheko e hopu ana i te aro o to kaiohauru ka piki ake te urunga, te maarama, me te reiti whakawhiti mai i to imeera. He GIF e whai ake, Ka tautokohia e te nuinga o nga kaihoko imeera waea atamai nga taima tatau, ataata, me etahi atu huānga.
- Whaiaro: Ko te whakawhaiaro i te mihi me te ihirangi mo te kaitango motuhake ka kaha te akiaki i te whakauru, me tino mohio kei te tika koe! Hei tauira. He mea nui te whai whakamuri mena karekau he raraunga i te mara ingoa tuatahi.
- Ihirangi Hihiko: Ko te wehewehenga me te whakaritenga o te ihirangi ka taea te whakaiti i to reiti whakakore i te ohauru me te pupuri i o kaiohauru.
- Whakauru Whakatairanga: Ko te nuinga o nga kaiwhakarato ratonga imeera hou he kaha ki te taapiri aunoa UTM nga aho uiui whakahau mo ia hononga kia taea ai e koe te tiro i te imeera hei hongere i roto i nga tātaritanga.
- Pokapū Manakohanga: He mea nui rawa te hokohoko imeera mo te huarahi whakauru-a-waho ranei ki nga imeera. Ko te whakauru i tetahi pokapu manakohanga ka taea e o kaiohauru te whakarereke i te maha o nga wa e whiwhi ai ratou i nga imeera me nga mea he mea nui ki a raatau he huarahi tino pai ki te pupuri i tetahi kaupapa imeera kaha me nga kaiohauru kua uru!
- Whakamātautau, Whakamātautau, Whakamātautau: Kia mohio koe ki te whakamatautau i to imeera i runga i nga taputapu maha ka whakamahi ranei i tetahi tono ki arokite i o imeera puta noa i nga kaihoko imeera kia pai ai te ahua me te mahi tika i runga i nga rahi mata rereke me nga punaha whakahaere i mua i to tuku. Litmus E ai ki nga korero ko te 3 tino rongonui o nga taiao tuwhera pūkoro kei te noho tonu: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ano, whakauruhia nga rereketanga whakamatautau o o rarangi kaupapa me o ihirangi hei whakapai ake i to reiti tuwhera me te panui-a-roto. He maha nga papaaho imeera kua whakauruhia he whakamatautau aunoa hei whakatauira i te raarangi, tautuhi i te rereketanga toa, ka tukuna te imeera pai ki nga kaiohauru e toe ana.
Mena kei te raru to kamupene ki te hoahoa, ki te whakamatautau me te whakatinana i nga imeera urupare waea e akiaki ana i te whakauru, kaua koe e mangere ki te whakapiri atu ki taku umanga. DK New Media he wheako ki te whakatinana tata ki nga kaiwhakarato ratonga imeera katoa (ESP).