Email Marketing & ΑυτοματισμόςΜάρκετινγκ για κινητά και tablet

16 Βέλτιστες πρακτικές ηλεκτρονικού ταχυδρομείου HTML φιλικών προς κινητά που μεγιστοποιούν την τοποθέτηση και την αφοσίωση στα Εισερχόμενα

Το 2023, είναι πιθανό ότι το κινητό θα ξεπεράσει τον επιτραπέζιο υπολογιστή ως την κύρια συσκευή για το άνοιγμα email. Στην πραγματικότητα, το HubSpot το βρήκε αυτό 46 τοις εκατό όλων των μηνυμάτων ηλεκτρονικού ταχυδρομείου που ανοίγουν εμφανίζονται τώρα στο κινητό. Εάν δεν σχεδιάζετε μηνύματα ηλεκτρονικού ταχυδρομείου για κινητά, αφήνετε πολλά χρήματα και πολλά χρήματα στο τραπέζι.

  1. Έλεγχος ταυτότητας email: Εξασφαλίζοντας τη δική σας τα email επικυρώνονται στον τομέα αποστολής και IP Η διεύθυνση είναι κρίσιμης σημασίας για να φτάσετε στα εισερχόμενα και όχι να δρομολογηθεί σε φάκελο ανεπιθύμητης ή ανεπιθύμητης αλληλογραφίας. Είναι επίσης σημαντικό, φυσικά, να παρέχετε έναν τρόπο εξαίρεσης από το email χρησιμοποιώντας μια πλατφόρμα που ενσωματώνει έναν σύνδεσμο κατάργησης εγγραφής.
  2. Ανταποκρίσιμος σχεδιασμός: Η HTML email θα πρέπει να είναι σχεδιασμένο να ανταποκρίνεται, πράγμα που σημαίνει ότι μπορεί να προσαρμοστεί στο μέγεθος της οθόνης της συσκευής στην οποία προβάλλεται. Αυτό διασφαλίζει ότι το email φαίνεται καλό τόσο σε επιτραπέζιους όσο και σε κινητές συσκευές.
  3. Σαφής και συνοπτική γραμμή θέματος: Μια σαφής και συνοπτική γραμμή θέματος είναι σημαντική για τους χρήστες κινητών, επειδή μπορούν να δουν μόνο τις πρώτες λίγες λέξεις της γραμμής θέματος στο παράθυρο προεπισκόπησης email τους. Θα πρέπει να είναι σύντομο και να αντικατοπτρίζει με ακρίβεια το περιεχόμενο του email. Το βέλτιστο μήκος χαρακτήρων μιας γραμμής θέματος email μπορεί να ποικίλλει ανάλογα με διάφορους παράγοντες, όπως το περιεχόμενο email, το κοινό και το πρόγραμμα-πελάτη email που χρησιμοποιείται. Ωστόσο, οι περισσότεροι ειδικοί συνιστούν να διατηρείτε τις γραμμές θέματος του email σύντομες και ακριβείς, συνήθως μεταξύ 41-50 χαρακτήρων ή 6-8 λέξεων. Σε κινητές συσκευές, οι γραμμές θέματος που ξεπερνούν τους 50 χαρακτήρες ενδέχεται να αποκοπούν και σε ορισμένες περιπτώσεις, ενδέχεται να εμφανίζουν μόνο τις πρώτες λίγες λέξεις της γραμμής θέματος. Αυτό μπορεί να δυσκολέψει τον παραλήπτη να κατανοήσει το κύριο μήνυμα του email και μπορεί να μειώσει την πιθανότητα να ανοίξει το email.
  4. Προκεφαλίδα: Μια προεπικεφαλίδα email είναι μια σύντομη περίληψη του περιεχομένου ενός email που εμφανίζεται δίπλα ή κάτω από τη γραμμή θέματος στα εισερχόμενα ενός προγράμματος-πελάτη email. Είναι ένα σημαντικό στοιχείο που μπορεί να επηρεάσει τον ρυθμό ανοίγματος των email σας όταν βελτιστοποιηθεί. Οι περισσότεροι πελάτες ενσωματώνουν HTML και CSS για να διασφαλίσουν ότι το κείμενο προεπικεφαλίδας έχει ρυθμιστεί σωστά.
<!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>
  1. Διάταξη μονής στήλης: Τα μηνύματα ηλεκτρονικού ταχυδρομείου που έχουν σχεδιαστεί με διάταξη μιας στήλης είναι ευκολότερα στην ανάγνωση σε κινητές συσκευές. Το περιεχόμενο θα πρέπει να οργανωθεί με λογική σειρά και να παρουσιάζεται σε απλή, ευανάγνωστη μορφή. Εάν έχετε πολλές στήλες, η χρήση του CSS μπορεί να οργανώσει με χάρη τις στήλες σε διάταξη μιας στήλης.

Εδώ είναι ένα Διάταξη email 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>

Εδώ είναι ένα Διάταξη email 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>
  1. Light and Dark Mode: γέφυρα οι πελάτες email υποστηρίζουν τη φωτεινή και σκοτεινή λειτουργία CSS 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>
  1. Μεγάλες, ευανάγνωστες γραμματοσειρές: Το μέγεθος και το στυλ της γραμματοσειράς θα πρέπει να επιλέγονται για να διευκολύνουν την ανάγνωση του κειμένου σε μια μικρή οθόνη. Χρησιμοποιήστε μέγεθος γραμματοσειράς τουλάχιστον 14 pt και αποφύγετε τη χρήση γραμματοσειρών που είναι δύσκολο να διαβαστούν σε μικρές οθόνες. Οι γραμματοσειρές που χρησιμοποιούνται συνήθως έχουν μεγάλη πιθανότητα να αποδίδονται με συνέπεια σε διαφορετικούς πελάτες email, επομένως η χρήση των Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma και Trebuchet MS είναι συνήθως ασφαλείς γραμματοσειρές. Εάν χρησιμοποιείτε μια προσαρμοσμένη γραμματοσειρά, βεβαιωθείτε ότι έχετε προσδιορίσει μια εναλλακτική γραμματοσειρά στο 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>
  1. Βέλτιστη χρήση εικόνων: Οι εικόνες μπορεί να επιβραδύνουν τους χρόνους φόρτωσης και ενδέχεται να μην εμφανίζονται σωστά σε όλες τις κινητές συσκευές. Χρησιμοποιήστε τις εικόνες με φειδώ και βεβαιωθείτε ότι έχουν μέγεθος και συμπιεσμένο για προβολή από κινητό. Φροντίστε να συμπληρώσετε το εναλλακτικό κείμενο για τις εικόνες σας σε περίπτωση που το πρόγραμμα-πελάτης email τις αποκλείσει. Όλες οι εικόνες πρέπει να αποθηκεύονται και να αναφέρονται από έναν ασφαλή ιστότοπο (SSL). Ακολουθεί ένα παράδειγμα κώδικα αποκριτικών εικόνων σε ένα email 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>
  1. Εκκαθάριση παρότρυνσης για δράση (CTA): Ένα σαφές και εμφανές CTA είναι σημαντικό σε κάθε email, αλλά είναι ιδιαίτερα σημαντικό σε ένα φιλικό προς κινητά email. Βεβαιωθείτε ότι το CTA είναι εύκολο να βρεθεί και ότι είναι αρκετά μεγάλο για να το κάνετε κλικ σε μια κινητή συσκευή. Εάν ενσωματώνετε κουμπιά, μπορείτε να βεβαιωθείτε ότι τα έχετε γραμμένα σε CSS με ενσωματωμένες ετικέτες στυλ επίσης:
<!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>
  1. Σύντομο και περιεκτικό περιεχόμενο: Κρατήστε το περιεχόμενο του email σύντομο και επίκαιρο. Το όριο χαρακτήρων για ένα email HTML μπορεί να διαφέρει ανάλογα με το πρόγραμμα-πελάτη email που χρησιμοποιείται. Ωστόσο, τα περισσότερα προγράμματα-πελάτες email επιβάλλουν ένα μέγιστο όριο μεγέθους για τα email, συνήθως μεταξύ 1024-2048 kilobyte (KB), το οποίο περιλαμβάνει τόσο τον κώδικα HTML όσο και τυχόν εικόνες ή συνημμένα. Χρησιμοποιήστε υπότιτλους, κουκκίδες και άλλες τεχνικές μορφοποίησης για να κάνετε το περιεχόμενο εύκολα σαρώσιμο κατά την κύλιση και την ανάγνωση σε μια μικρή οθόνη.
  2. Διαδραστικά στοιχεία: ενσωματώνοντας διαδραστικά στοιχεία που προσελκύουν την προσοχή του συνδρομητή σας θα αυξήσουν την αφοσίωση, την κατανόηση και τα ποσοστά μετατροπών από το email σας. Κινούμενα GIF, χρονόμετρα αντίστροφης μέτρησης, βίντεο και άλλα στοιχεία υποστηρίζονται από την πλειονότητα των προγραμμάτων-πελατών email smartphone.
  3. Εξατομίκευση: Η εξατομίκευση του χαιρετισμού και του περιεχομένου για έναν συγκεκριμένο συνδρομητή μπορεί να αυξήσει σημαντικά την αφοσίωση, απλά βεβαιωθείτε ότι το καταλαβαίνετε σωστά! Π.χ. Είναι σημαντικό να έχετε εναλλακτικά εάν δεν υπάρχουν δεδομένα σε ένα πεδίο ονόματος.
  4. Δυναμικό περιεχόμενο: Η τμηματοποίηση και η προσαρμογή του περιεχομένου μπορεί να μειώσει τα ποσοστά κατάργησης εγγραφής και να κρατήσει τους συνδρομητές σας αφοσιωμένους.
  5. Ενσωμάτωση καμπάνιας: Οι περισσότεροι σύγχρονοι πάροχοι υπηρεσιών email έχουν τη δυνατότητα αυτόματης προσθήκης Συμβολοσειρές ερωτημάτων καμπάνιας UTM για κάθε σύνδεσμο, ώστε να μπορείτε να βλέπετε το email ως κανάλι στα αναλυτικά στοιχεία.
  6. Κέντρο προτιμήσεων: Το μάρκετινγκ μέσω ηλεκτρονικού ταχυδρομείου είναι πολύ σημαντικό για μια απλή προσέγγιση επιλογής ή εξαίρεσης στα μηνύματα ηλεκτρονικού ταχυδρομείου. Η ενσωμάτωση ενός κέντρου προτιμήσεων όπου οι συνδρομητές σας μπορούν να αλλάζουν πόσο συχνά λαμβάνουν μηνύματα ηλεκτρονικού ταχυδρομείου και ποιο περιεχόμενο είναι σημαντικό για αυτούς είναι ένας φανταστικός τρόπος για να διατηρήσετε ένα ισχυρό πρόγραμμα email με αφοσιωμένους συνδρομητές!
  7. Δοκιμή, Δοκιμή, Δοκιμή: Φροντίστε να δοκιμάσετε το email σας σε πολλές συσκευές ή να χρησιμοποιήσετε μια εφαρμογή για να κάντε προεπισκόπηση των email σας σε προγράμματα-πελάτες email για να διασφαλίσετε ότι φαίνεται καλή και λειτουργεί σωστά σε διαφορετικά μεγέθη οθόνης και λειτουργικά συστήματα ΠΡΙΝ την στείλετε. Ηλιοτρόπιο αναφέρει ότι τα 3 πιο δημοφιλή ανοιχτά περιβάλλοντα για κινητά συνεχίζουν να είναι τα ίδια: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Επίσης, ενσωματώστε δοκιμαστικές παραλλαγές των γραμμών θέματος και του περιεχομένου σας για να βελτιώσετε τις αναλογίες ανοίγματος και κλικ προς αριθμό εμφανίσεων. Πολλές πλατφόρμες ηλεκτρονικού ταχυδρομείου ενσωματώνουν πλέον αυτοματοποιημένες δοκιμές που θα δειγματίζουν τη λίστα, θα προσδιορίζουν μια νικητήρια παραλλαγή και θα στέλνουν το καλύτερο email στους υπόλοιπους συνδρομητές.

Εάν η εταιρεία σας δυσκολεύεται να σχεδιάσει, να δοκιμάζει και να εφαρμόζει αποκριτικά μηνύματα ηλεκτρονικού ταχυδρομείου για κινητά που οδηγούν στην αφοσίωση, μη διστάσετε να επικοινωνήσετε με την εταιρεία μου. DK New Media έχει εμπειρία στην υλοποίηση σχεδόν κάθε παρόχου υπηρεσιών email (ESP).

Douglas Karr

Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

Σχετικά άρθρα

Επιστροφή στην κορυφή κουμπί
Κλεισιμο

Εντοπίστηκε μπλοκ διαφημίσεων

Martech Zone είναι σε θέση να σας παρέχει αυτό το περιεχόμενο χωρίς κόστος, επειδή δημιουργούμε έσοδα από τον ιστότοπό μας μέσω εσόδων από διαφημίσεις, συνδέσμων συνεργατών και χορηγιών. Θα εκτιμούσαμε εάν καταργούσατε το πρόγραμμα αποκλεισμού διαφημίσεων καθώς προβάλλετε τον ιστότοπό μας.