Πώς να δημιουργήσετε και να στείλετε ένα προσαρμοσμένο email HTML

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

Δημιουργήστε το πρότυπο email χρησιμοποιώντας HTML

Το πρότυπο email βασίζεται σε παραδοσιακές τεχνικές HTML. Θα εργάζεστε με πίνακες και στοίβαγμα σειρών τραπεζιών και δεδομένα πίνακα όλη την ώρα. Το βασικό πρότυπο email HTML μοιάζει με αυτό:

...
...
...
...
...
...
...




...

Παραγωγή:

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

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

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

 Λογότυπο και ημερομηνία μέσα στην ετικέτα 
 

















05 Δεκεμβρίου 2021

Τώρα ξέρετε πώς να τοποθετείτε ετικέτες HTML και να δημιουργείτε μια καλή δομή για το πρότυπο email σας. Ας προχωρήσουμε για να κατανοήσουμε καλύτερα το στυλ του email.

Δώστε στυλ στο HTML email σας

Το στυλ ενός email HTML είναι μια δυσκίνητη εργασία, καθώς μπορείτε να χρησιμοποιήσετε μόνο ενσωματωμένο CSS. Επίσης, θα χρειαστεί να επαναλάβετε το στυλ για κάθε στοιχείο εάν έχει παρόμοιο στυλ. Εάν δεν είστε εξοικειωμένοι με τα Cascading Style Sheets, εξερευνήστε ξεκινώντας με το CSS.

Προεπισκόπηση:

 05 Δεκεμβρίου 2021 






































γεια John Doe



Σας ευχαριστούμε που επισκεφθήκατε την ιστοσελίδα μας. Ελπίζουμε να μάθατε κάτι νέο σήμερα.





 Η γνώμη σας έχει σημασία για εμάς! 

 Βαθμολογήστε τα άρθρα μας εδώ. 


012345678910

Παραγωγή:

Αν θέλεις, μπορείς πρόσβαση στον πλήρη κώδικα στο GitHub και κλωνοποιήστε το αποθετήριο για να το χρησιμοποιήσετε.

Αποστολή της αλληλογραφίας

Τώρα κάντε αντιγραφή-επικόλληση ολόκληρου του κώδικα από το GitHub. Εάν χρησιμοποιείτε VS Code, ανοίξτε το αρχείο HTML χρησιμοποιώντας την επέκταση διακομιστή ζωντανού και αντιγράψτε το περιεχόμενο κάνοντας κλικ στο Ctrl + A>Ctrl + C. Ανοίξτε το Gmail και συντάξτε ένα νέο email. Επικολλήστε το περιεχόμενο και εισαγάγετε το αναγνωριστικό αλληλογραφίας του παραλήπτη. Στείλτε το email και θα λάβετε τα αποτελέσματα όπως φαίνεται παρακάτω:

Δοκιμάστε τον κώδικα σε διαφορετικές συσκευές για να δείτε πώς φαίνεται και πώς συμπεριφέρεται. Προσαρμόστε το email σας HTML και κάντε το καθαρό, απλό και ανταποκρινόμενο.

Τροποποίηση υπαρχόντων προτύπων email

Η δημιουργία ενός email HTML από το μηδέν απαιτεί σταθερή πρόσφυση στο HTML και στο ενσωματωμένο CSS. Θα μπορούσατε επίσης να τροποποιήσετε ένα υπάρχον πρότυπο email και να το προσαρμόσετε σύμφωνα με τις ανάγκες σας. Λάβετε υπόψη ότι τα μηνύματα ηλεκτρονικού ταχυδρομείου HTML τείνουν να χρειάζονται μερικά δευτερόλεπτα για να φορτωθούν. Σχεδιάστε, σχεδιάστε, κωδικοποιήστε και πραγματοποιήστε ενδελεχείς δοκιμές για να αποφύγετε τυχόν ασυνέπειες στον τελικό χρήστη. Μπορείτε να μάθετε περισσότερα για το σημασιολογικό HTML και το CSS για να γράψετε καλύτερο και πιο προσιτό κώδικα.

Naincy Mourya (Δημοσιεύτηκαν 17 άρθρα)

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

Περισσότερα από τη Naincy Mourya