Κατανόηση των προκλήσεων (και των απογοητεύσεων) του σχεδίου ηλεκτρονικού ταχυδρομείου HTML

Εάν ανοίξετε ένα σύστημα διαχείρισης περιεχομένου για τη δημιουργία ιστοσελίδων, είναι μια αρκετά απλή διαδικασία. Τα σύγχρονα προγράμματα περιήγησης ιστού υποστηρίζουν HTML, CSS και JavaScript σε α αυστηρός σύνολο προτύπων Ιστού. Και, είναι πραγματικά μόνο μια χούφτα προγράμματα περιήγησης για τα οποία πρέπει να ανησυχούν οι σχεδιαστές. Υπάρχουν εξαιρέσεις, φυσικά… και μερικές απλές λύσεις ή λειτουργίες που αφορούν συγκεκριμένα αυτά τα προγράμματα περιήγησης.

Λόγω των συνολικών προτύπων, είναι πολύ εύκολο να αναπτυχθούν προγράμματα δημιουργίας σελίδων σε συστήματα διαχείρισης περιεχομένου. Τα προγράμματα περιήγησης συμμορφώνονται με HTML5, CSS και JavaScript… και οι προγραμματιστές μπορούν να δημιουργήσουν απίστευτα ισχυρές λύσεις για τη δημιουργία ιστοσελίδων που ανταποκρίνονται σε συσκευές και συνεπείς σε όλα τα προγράμματα περιήγησης. Πριν από δύο δεκαετίες, σχεδόν κάθε σχεδιαστής ιστοσελίδων χρησιμοποιούσε λογισμικό επιτραπέζιου υπολογιστή για την ανάπτυξη ιστοσελίδων. Τώρα, είναι πολύ ασυνήθιστο για έναν σχεδιαστή ιστού να αναπτύσσει μια ιστοσελίδα – τις περισσότερες φορές, αναπτύσσει πρότυπα και χρησιμοποιεί συντάκτες σε συστήματα περιεχομένου για να συμπληρώσει το περιεχόμενο. Οι συντάκτες ιστοτόπων είναι φανταστικοί.

Αλλά οι συντάκτες email έχουν μείνει θλιβερά πίσω. Να γιατί…

Ο σχεδιασμός μηνυμάτων ηλεκτρονικού ταχυδρομείου HTML είναι πολύ πιο περίπλοκος από ό,τι για έναν ιστότοπο

Εάν η εταιρεία σας θέλει να έχει σχεδιαστεί ένα όμορφο email HTML, η διαδικασία είναι εκθετικά πιο περίπλοκη από τη δημιουργία μιας ιστοσελίδας για διάφορους λόγους:

• Χωρίς Πρότυπα – ΔΕΝ υπάρχει αυστηρή τήρηση οποιουδήποτε ιστού πρότυπα από προγράμματα-πελάτες email που εμφανίζουν email HTML. Στην πραγματικότητα, εικονικά κάθε πελάτη email και κάθε έκδοση κάθε προγράμματος-πελάτη email ενεργεί διαφορετικά. Μερικοί θα τιμήσουν το CSS, τις εξωτερικές γραμματοσειρές και τη σύγχρονη HTML. Άλλοι τιμούν κάποιο ενσωματωμένο στυλ, εμφανίζουν μόνο μια συλλογή γραμματοσειρών και αγνοούν τα πάντα εκτός από δομές που βασίζονται σε τραπέζι. Είναι πραγματικά πολύ γελοίο σε αυτό το σημείο να μην ασχολείται κανείς με αυτό το θέμα. Ως αποτέλεσμα, η σχεδίαση προτύπων που αποδίδονται με συνέπεια σε πελάτες και συσκευές έχει γίνει μεγάλη επιχείρηση και μπορεί να είναι αρκετά ακριβή.
• Ασφάλεια πελάτη ηλεκτρονικού ταχυδρομείου – Μόλις αυτήν την εβδομάδα, το Apple Mail ενημερώθηκε για να αποκλείει όλες τις εικόνες σε μηνύματα ηλεκτρονικού ταχυδρομείου HTML από προεπιλογή που δεν είναι ενσωματωμένες στο email. Είτε τους δίνετε άδεια να φορτώνουν ένα email κάθε φορά είτε πρέπει να ενεργοποιήσετε τις ρυθμίσεις για να απενεργοποιήσετε αυτήν τη ρύθμιση. Μαζί με τις ρυθμίσεις ασφαλείας του προγράμματος-πελάτη email, υπάρχουν και εταιρικές ρυθμίσεις.
• Ασφάλεια IT – Η ομάδα IT σας μπορεί να αναπτύξει αυστηρούς κανόνες σχετικά με το ποια αντικείμενα μπορούν πραγματικά να αποδοθούν σε ένα email. Εάν οι εικόνες σας, για παράδειγμα, προέρχονται από έναν συγκεκριμένο τομέα που δεν περιλαμβάνεται στη λίστα επιτρεπόμενων σε ένα εταιρικό τείχος προστασίας, οι εικόνες απλώς δεν θα εμφανίζονται στο email σας. Κατά καιρούς, έπρεπε να αναπτύξουμε μηνύματα ηλεκτρονικού ταχυδρομείου και να φιλοξενήσουμε όλες τις εικόνες στον διακομιστή της εταιρείας, έτσι ώστε οι υπάλληλοί τους να μπορούν να δουν τις εικόνες.
• Πάροχοι υπηρεσιών email – Για να κάνουν τα πράγματα χειρότερα, τα προγράμματα δημιουργίας email που οι πάροχοι υπηρεσιών email (ESPιθ) στην πραγματικότητα εισάγει προβλήματα αντί να τα περιορίζει. Ενώ προωθούν τον συντάκτη τους είναι Αυτό που βλέπετε είναι αυτό που παίρνετε (WYSIWYG), το αντίθετο συμβαίνει συχνά με τη σχεδίαση email. Θα κάνετε προεπισκόπηση του μηνύματος ηλεκτρονικού ταχυδρομείου στην πλατφόρμα του και, στη συνέχεια, ο παραλήπτης του ηλεκτρονικού ταχυδρομείου βλέπει όλα τα είδη προβλημάτων σχεδιασμού. Οι εταιρείες συχνά επιλέγουν άγνωστα ένα πρόγραμμα επεξεργασίας πλούσιου σε χαρακτηριστικά αντί για ένα κλειδωμένο πρόγραμμα επεξεργασίας πιστεύοντας ότι το ένα έχει περισσότερες δυνατότητες από το άλλο. Το αντίθετο ισχύει… εάν θέλετε μηνύματα ηλεκτρονικού ταχυδρομείου που αποδίδονται με συνέπεια σε όλα τα προγράμματα-πελάτες ηλεκτρονικού ταχυδρομείου, όσο πιο απλά τόσο το καλύτερο γιατί λιγότερα μπορεί να πάνε στραβά.
• Απόδοση πελάτη ηλεκτρονικού ταχυδρομείου – Υπάρχουν εκατοντάδες προγράμματα-πελάτες email, καθένα από τα οποία αποδίδει διαφορετικά την HTML σε υπολογιστές, εφαρμογές, κινητά και προγράμματα-πελάτες webmail. Ενώ το έξυπνο πρόγραμμα επεξεργασίας κειμένου στον πάροχο υπηρεσιών email σας μπορεί να έχει μια ρύθμιση για να βάζει μια επικεφαλίδα στο email σας… η επένδυση, τα περιθώρια, το ύψος γραμμής και το μέγεθος γραμματοσειράς μπορεί να διαφέρουν σε κάθε πρόγραμμα-πελάτη email. Ως αποτέλεσμα, πρέπει να υποτιμάτε το HTML και να κωδικοποιείτε κάθε μεμονωμένο στοιχείο διαφορετικά (δείτε το παρακάτω παράδειγμα) – και συχνά να γράφετε σε εξαιρέσεις που αφορούν συγκεκριμένα το πρόγραμμα-πελάτη email – για να λάβετε ένα μήνυμα ηλεκτρονικού ταχυδρομείου που θα αποδίδεται με συνέπεια. Δεν υπάρχουν απλοί τύποι μπλοκ, πρέπει να κάνετε διατάξεις με βάση τον πίνακα που ισοδυναμούν με την κατασκευή για τον Ιστό πριν από τριάντα χρόνια. Αυτός είναι ο λόγος για τον οποίο κάθε νέα διάταξη απαιτεί τόσο ανάπτυξη όσο και δοκιμή μεταξύ προγραμμάτων-πελάτη και συσκευής αλληλογραφίας. Αυτό που βλέπετε στα εισερχόμενά σας μπορεί να είναι εντελώς διαφορετικό από αυτό που βλέπω στα εισερχόμενά μου. Αυτός είναι ο λόγος που η απόδοση εργαλείων όπως Email On Acid or Ηλιοτρόπιο είναι απαραίτητο για να διασφαλίσετε ότι τα νέα σας σχέδια λειτουργούν σε όλους τους πελάτες email. Ακολουθεί μια σύντομη λίστα δημοφιλών πελατών email και των μηχανών απόδοσης τους:
  • Χρήση Apple Mail, Outlook για Mac, Android Mail και iOS Mail WebKit.
  • Χρήση του Outlook 2000, 2002 και 2003 Internet Explorer.
  • Χρήση του Outlook 2007, 2010 και 2013 Το Microsoft Word (ναι, Word!).
  • Οι πελάτες webmail χρησιμοποιούν την αντίστοιχη μηχανή του προγράμματος περιήγησής τους (για παράδειγμα, το Safari χρησιμοποιεί το WebKit και το Chrome χρησιμοποιεί το Blink).

Ένα παράδειγμα HTML για Web Vs. ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ

Εάν θέλετε ένα παράδειγμα που δείχνει την πολυπλοκότητα του σχεδιασμού στο ηλεκτρονικό ταχυδρομείο έναντι του ιστού, εδώ είναι ένα τέλειο παράδειγμα από το άρθρο του Mailbakery 19 Μεγάλες διαφορές μεταξύ email και HTML Web:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Πώς να αποφύγετε προβλήματα σχεδίασης email

Τα προβλήματα σχεδιασμού email μπορούν να αποφευχθούν ακολουθώντας μια αξιοπρεπή διαδικασία:

1. Σχεδιασμός προτύπων – Δημιουργήστε ένα πρότυπο με διαφορετικές διατάξεις και μπλοκ περιεχομένου που καλύπτουν κάθε στυλ που θα θέλατε να δημιουργήσετε ποτέ στα σχέδια email σας. Όταν υλοποιούμε έναν πελάτη, τον πιέζουμε πάντα να το κάνει σχεδιάστε ένα email για το μέλλον – όχι μόνο την επόμενη καμπάνια email που θα σταλεί. Με αυτόν τον τρόπο, μπορούμε να σχεδιάσουμε, να αναπτύξουμε, να δοκιμάσουμε και να εφαρμόσουμε πλήρως τις απαραίτητες λύσεις πριν στέλνουν ποτέ αυτό το πρώτο email.
2. Δοκιμή προτύπων – Η κατανόηση των προγραμμάτων-πελατών email που χρησιμοποιούν οι συνδρομητές σας και η διασφάλιση ότι το email σας HTML έχει δοκιμαστεί πλήρως σε κινητά και επιτραπέζιους υπολογιστές είναι κρίσιμης σημασίας πριν από την ανάπτυξη οποιουδήποτε προτύπου. Μπορούμε να σχεδιάσουμε ένα ηλεκτρονικό ταχυδρομείο κυριολεκτικά από μια διάταξη του Photoshop… αλλά το να το τεμαχίσουμε και να το κόψουμε σε κύβους σε πρόγραμμα-πελάτη πολλαπλών email είναι απαραίτητο για την ανάπτυξη σχεδίων email που είναι βέλτιστα και συνεπή.
3. Εσωτερικός έλεγχος – Μόλις το πρότυπό σας σχεδιαστεί και δοκιμαστεί, θα πρέπει να αποσταλεί σε μια εσωτερική αρχική λίστα εντός του οργανισμού για έλεγχο και έγκριση. Μπορεί ακόμη και να θέλετε να ξεκινήσετε με ένα πολύ περιορισμένο υποσύνολο ατόμων για να βεβαιωθείτε πρώτα ότι δεν υπάρχουν ζητήματα τείχους προστασίας ή ασφάλειας που σχετίζονται με την εσωτερική απόδοση του email. Εάν αυτό δημιουργεί ένα παράδειγμα σε έναν νέο πάροχο υπηρεσιών email, ενδέχεται να βρείτε ακόμη και ορισμένα ζητήματα φιλτραρίσματος ή αποκλεισμού που σχετίζονται με τη λήψη του email σας στα εισερχόμενα.
4. Εκδόσεις προτύπου – Μην αλλάζετε τις διατάξεις ή τα σχέδιά σας χωρίς να εργαστείτε σε μια νέα έκδοση του προτύπου σας που μπορεί να σχεδιαστεί, να δοκιμαστεί σωστά και να αναπτυχθεί. Πολλές επιχειρήσεις αγαπούν τα μοναδικά σχέδια για κάθε καμπάνια… αλλά αυτό απαιτεί να σχεδιάζεται, να αναπτύσσεται και να αναπτύσσεται κάθε email για κάθε καμπάνια. Αυτό προσθέτει πολύ χρόνο στην εσωτερική διαδικασία μάρκετινγκ μέσω email. Και, κινδυνεύετε να μην κατανοήσετε ποια στοιχεία στο email σας έχουν καλή απόδοση σε σχέση με αυτά που δεν έχουν. Η συνέπεια δεν είναι απλώς ένας τρόπος για να διευκολύνετε τη διαδικασία, είναι επίσης σημαντική για τη συμπεριφορά των συνδρομητών σας.
5. Εξαιρέσεις παρόχου υπηρεσιών email – Σχεδόν κάθε πάροχος υπηρεσιών email έχει ένα μέσο για να αντιμετωπίσει τα ζητήματα που εισάγει το πρόγραμμα δημιουργίας email του. Μπορούμε συχνά να προσθέσουμε ακατέργαστο CSS σε έναν λογαριασμό – ή ακόμα και να έχουμε ένα μπλοκ περιεχομένου που πρέπει να περιλαμβάνεται σε κάθε email – προκειμένου η εταιρεία να χρησιμοποιήσει το ενσωματωμένο πρόγραμμα επεξεργασίας email και να μην σπάσει τη σχεδίαση του email σας. Φυσικά, αυτό μπορεί να απαιτεί κάποια εκπαίδευση και έλεγχο της διαδικασίας για την ανάπτυξη αυτών των βημάτων για να διασφαλιστεί ότι τηρούνται. Ή – μπορεί κυριολεκτικά απλώς να θέλετε να αναπτύξετε τη σχεδίαση email σας σε μια λύση που αποδεδειγμένα λειτουργεί σε πελάτες και συσκευές και, στη συνέχεια, να την επικολλήσετε ξανά στον πάροχο υπηρεσιών email σας.

Πλατφόρμες σχεδίασης email

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

Το Stripo δεν είναι απλώς ένα πρόγραμμα δημιουργίας email, έχει επίσης μια βιβλιοθήκη με περισσότερα από 900 πρότυπα που μπορούν εύκολα να εισαχθούν. Αφού σχεδιάσετε το email, μπορείτε να στείλετε email σε 60+ ESP και σε πελάτες email, συμπεριλαμβανομένων MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook και Gmail. Το καλύτερο από όλα τα πρότυπα Stripo συνοδεύονται από τις δοκιμές απόδοσης email που περιλαμβάνονται, ώστε να μπορείτε να βεβαιωθείτε ότι έχουν δοκιμαστεί και λειτουργούν με συνέπεια σε πάνω από 40 πελάτες email.

Είσοδος στο The Stripo Editor Demo

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