Πώς να δημιουργήσετε ένα προσαρμοσμένο μήνυμα ηλεκτρονικού ταχυδρομείου με το ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου
Η οικοδόμηση προτύπων e-mail είναι σωστά σκληρή. Η οικοδόμηση ευαίσθητων ηλεκτρονικών μηνυμάτων είναι ακόμη πιο δύσκολη.
Ευτυχώς, οι λαοί του είδους στο Zurb έχουν αναπτύξει ένα φανταστικό πλαίσιο που κάνει τη διαδικασία δημιουργίας ευαίσθητων ηλεκτρονικών μηνυμάτων ευκολότερη από ποτέ.
Ίδρυμα για μηνύματα ηλεκτρονικού ταχυδρομείου (πρώην Ink) είναι ένα πλαίσιο προσαρμοσμένο προσαρμοστικό για έναν σύγχρονο σχεδιαστή / προγραμματιστή που θέλει να χρησιμοποιήσει τα εργαλεία και τις τεχνολογίες του σήμερα για να δημιουργήσει πρότυπα ηλεκτρονικού ταχυδρομείου που να ανταποκρίνονται στο αύριο.
Οι αριθμοί δεν ψεύδονται
Σύμφωνα με το Zurb, το 54% των μηνυμάτων ηλεκτρονικού ταχυδρομείου ανοίγονται σε μια κινητή συσκευή και ο αριθμός αυτός πιθανόν να αυξηθεί. Με αυτό το στοιχείο στη θέση του, η ανάγκη για ένα ανταποκρινόμενο πρότυπο ηλεκτρονικού ταχυδρομείου είναι απαραίτητη. Το Zurb αναφέρει επίσης ότι το 75% των χρηστών του Gmail έχει πρόσβαση στον λογαριασμό του από την κινητή συσκευή του.
Ανεξάρτητα από τον τύπο του ηλεκτρονικού ταχυδρομείου που στάλθηκε, το Ίδρυμα για τα ηλεκτρονικά ταχυδρομεία σας καλύπτει. Στην πραγματικότητα, μόλις ξεκινήσετε το εύχρηστο οικοδόμο έργων σας, σας καλωσορίζουμε με δείγματα προτύπων για να αναφερθούν ή να προσαρμοστούν στο περιεχόμενο της καρδιάς σας.
Ξεκινώντας
Σε αυτό το άρθρο, θα σας δείξω πώς να έρθετε σε λειτουργία με το Ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας ένα προσαρμοσμένο πρότυπο που σχεδίασα για το δικό μου γραφείο μικρής επωνυμίας. Όπως συμβαίνει με οποιοδήποτε πλαίσιο, είναι επιτακτική ανάγκη να αναφερθώ απόδειξη με έγγραφα . Δεν θα ξεπεράσω κάθε λεπτομέρεια ως Zurb έχει ήδη αλλά αυτός ο οδηγός θα είναι αρκετός για να χτυπήσει το έδαφος σε λειτουργία.
Κωδικός πηγής
Μπορείτε να βρείτε τον τελικό πηγαίο κώδικα σε αυτό το έργο GitHub .
Εγκατάσταση
Για να ξεκινήσετε μπορείτε να επιλέξετε να χρησιμοποιήσετε παραδοσιακά CSS ή Sass . Θα το χρησιμοποιήσω Sass .
Υπάρχουν πολλοί λόγοι που σας προτείνω να πάτε αυτή τη διαδρομή σε αντίθεση με την παραδοσιακή CSS . Αυτοί οι λόγοι περιλαμβάνουν:
- Περισσότερος έλεγχος των εικαστικών στυλ του πλαισίου
- Μια ολοκληρωμένη διαδικασία κατασκευής, συμπεριλαμβανομένης της σύνταξης Sass και της συμπίεσης εικόνων
- Ένα έθιμο
HTMLγλώσσα που είναι γνωστή ως inky, πράγμα που σημαίνει ότι δεν χρειάζεται να γράφετε στο τραπέζι τις σχετικές διατάξεις με το χέρι. - Ένα ενσωματωμένο inliner για τη διανομή του CSS σας ως inline CSS
- Ζωντανή επαναφόρτωση
- Ράμπες χειρολαβής
Σημείωση - Το Sass έκδοση απαιτεί Node.js τρέχω. Φροντίστε να το εγκαταστήσετε πριν προχωρήσετε.
Εγκαταστήστε το CLI Foundation και δημιουργήστε ένα νέο έργο
Η διαδικασία εγκατάστασης χρησιμοποιεί το Ίδρυμα CLI. Για να το χρησιμοποιήσετε, ανοίξτε το πρόγραμμα γραμμής εντολών που θέλετε και πληκτρολογήστε τα εξής:
Bash $ npm install --global foundation-cliΕάν εμφανίσετε τυχόν σφάλματα δικαιωμάτων, προσπαθήστε να προθέσετε την ίδια εντολή με το sudo . Θα σας ζητηθεί να εισαγάγετε τον κωδικό πρόσβασης του συστήματός σας.
Με την εγκατάσταση του CLI Foundation μπορείτε τώρα να δημιουργήσετε ένα κενό project Foundation for emails. Βεβαιωθείτε ότι μεταβαίνετε στο ( cdinto ) το φάκελο στον οποίο θέλετε να εγκαταστήσετε το έργο και στη συνέχεια εκτελέστε την ακόλουθη εντολή:
Bash $ foundation new --framework emailsΤο CLI θα πρέπει να σας ζητήσει ένα όνομα έργου (τηλεφώνησα στο ενημερωτικό μου δελτίο ). Αυτό το όνομα είναι αυτό που ο φάκελος ολόκληρου του έργου θα χαρακτηριστεί ως. Αφού οριστεί, θα εγκατασταθεί ένας αριθμός εξαρτήσεων. (Αυτό θα μπορούσε να διαρκέσει για λήψη.)
Μόλις ολοκληρωθεί η λήψη, πρέπει να δείτε τα εξής:
Bash You’re all set!✓ New project folder created.✓ Node modules installed.✓ Bower components installed.Now run foundation watch while inside the folder. cd στο φάκελο του έργου σας πληκτρολογώντας cd newsletter . Το όνομα του έργου σας μπορεί να διαφέρει σε σύγκριση με το δικό μου, αλλά αν ακολουθείτε θα πρέπει να πάτε.
Τρέχοντας το διακομιστή και τα στοιχεία συγκέντρωσης
Από μέσα στο τερματικό εκτελέστε την εντολή:
bash $ npm startΑυτό θα πυροδοτήσει τη διαδικασία κατασκευής που ανέφερα προηγουμένως. Η διαδικασία δημιουργίας θα αναλύσει την HTML, θα μεταγλωττίσει το Sass, θα συμπιέσει εικόνες και θα ανοίξει ένα διακομιστή. Το προεπιλεγμένο πρόγραμμα περιήγησης πρέπει να ανοίξει μια νέα καρτέλα στο αρχείο index.html από τη διεύθυνση localhost: 3000 . Από αυτή τη σελίδα, μπορείτε να επισκεφθείτε το πρότυπο δείγματα Ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου που παρέχονται μαζί με την εγκατάσταση.
Αξιολόγηση του σχεδιασμού
Με την εγκατάσταση του Ιδρύματος για τα μηνύματα ηλεκτρονικού ταχυδρομείου και την εκτέλεση του έργου μας στον εξυπηρετητή που παρέχεται από το πλαίσιο, είμαστε έτοιμοι να ασχοληθούμε λίγο περισσότερο με το χειρισμό του σχεδιασμού που παρουσιάζεται παρακάτω.
Ως επί το πλείστον, ο σχεδιασμός είναι ελάχιστος με περιεχόμενο που περιέχει κράτησης θέσης για ένα ηλεκτρονικό μήνυμα τύπου ηλεκτρονικού ταχυδρομείου. Πηγαίνοντας προς τα εμπρός, θα τροποποιήσουμε στοιχεία μέσα στο πρότυπο για να κάνουμε οποιεσδήποτε αλλαγές. Είναι λίγο πιο χέρια από ένα WYSIWYG οικοδόμος ηλεκτρονικού ταχυδρομείου, όπως τα προεπιλεγμένα πρότυπα MailChimp για παράδειγμα, αλλά για χάρη της προσαρμοσμένης επωνυμίας, αξίζει τον κόπο. Νομίζω ότι οι περισσότεροι χρήστες θα συμφωνούσαν. Μπορείτε σίγουρα να επεκτείνετε αυτό για να χρησιμοποιήσετε τον επεξεργαστή μέσα στο Mailchimp, αλλά αυτό είναι ένα θέμα για μια άλλη φορά.
Ξεκινώντας φρέσκο
Υποθέτοντας ότι χρησιμοποιείτε την έκδοση Sass , το Ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου συνοδεύεται από Inky HTML, το οποίο είναι δική του δημιουργία. Αυτή η HTML είναι υπεύθυνη για την καθιστώντας ένα τραπέζι γραφής και μια σύνθετη διάταξη πίνακα.
ο απόδειξη με έγγραφα για το Ίδρυμα fro Emails είναι το καλύτερο μέρος για να μάθετε όλα όσα πρέπει να ξέρετε για το έθιμο Inky HTML που μπορείτε να χρησιμοποιήσετε στα δικά σας έργα. Φροντίστε να το αναφέρετε συχνά.
Θα εργαστούμε στο εσωτερικό του src φακέλου στο φάκελο του έργου μας. Αυτά τα αρχεία παρακολουθούνται μέσω του gulp.js και μερικά ενσωματωμένα πρόσθετα. Όταν γίνονται αλλαγές στον πρότυπο κώδικα ή / και σε στυλ όλα τα αρχεία στο φάκελο dist ενημερώνονται ανάλογα. Δεν θα πάω βαθιά στο πώς όλα αυτά λειτουργούν αλλά θυμάμαι όταν ήμουν καινούργιος σε αυτό που φαινόταν σαν μαγικό!
Δείκτης
Η σελίδα ευρετηρίου που βλέπετε βρίσκεται στο src / layouts / index-layout.html . Το Ίδρυμα για τα ηλεκτρονικά ταχυδρομεία κάνει χρήση του Χειρολαβές που σας επιτρέπει να κάνετε templating μέσα στο βασικό HTML σελίδες. Για παράδειγμα, μπορείτε να δημιουργήσετε μια μερική HTML αρχείο που συμπεριλαμβάνεται δυναμικά σε άλλο αρχείο.
Σημειώστε την ετικέτα {{> body}} . Όλο το περιεχόμενο εισάγεται ουσιαστικά εδώ, τελικά, χάρη στον διαχωρισμό HTML που διατίθεται μέσα στο πλαίσιο.
Σελίδες
Κάθε σελίδα που βλέπετε στο src / pages / είναι αυτό που αρχικά εμφανίζεται όταν ξεκινάτε για πρώτη φορά $ npm . Κάθε σελίδα είναι ένα πρότυπο δείγματος που παρέχεται από τον Zurb.
Αντιγράψτε τα περιεχόμενα του newsletter.html και δημιουργήστε ένα νέο αρχείο που ονομάζεται branded-newsletter.html . Επικολλήστε τα περιεχόμενα μέσα. Μέσα σε αυτό το αρχείο, θα δημιουργήσουμε το πρότυπο που μοιραστήκαμε προηγουμένως.
Μέσα στο αρχείο, θα πρέπει να δείτε πολλές ξένες ετικέτες HTML. Αυτά είναι μέρος του Inky HTML. Βασικά με τη χρήση τους, μπορείτε να ξεφύγετε χωρίς να χρειάζεται να κωδικοποιήσετε φυσικά τις διατάξεις πίνακα. (Δεν μπορείτε να χρησιμοποιήσετε divs μέσα από τα μηνύματα ηλεκτρονικού ταχυδρομείου όπως θα κάνατε ιστοσελίδες · το ίδιο ισχύει και για πολλούς CSS ιδιότητες.)
Ακολουθεί μια σύντομη επισκόπηση των ετικετών που θα αξιοποιήσουμε περισσότερο:
- Ένα στοιχείο περιτύλιξης το οποίο έχει ένα πλάτος ρύθμισης. - απαραίτητη για την περιτύλιξη στηλών με περιεχόμενο παρόμοιο με πλωτό πλέγμα σε ιστότοπους.
- όπου το μεγαλύτερο μέρος του περιεχομένου σας θα ζήσει. Αυτά μπορούν να προσαρμοστούν χρησιμοποιώντας μια διάταξη 12 στηλών. Συμπεριφέρονται σαν ένα επιπλέων ή καμπυλωμένο div, αλλά περιλαμβάνουν τραπέζια. - Κάθετη απόσταση για τα πρότυπα ηλεκτρονικού ταχυδρομείου. Πολλοί πελάτες αλληλογραφίας δεν σέβονται το περιθώριο ή το padding μέσω CSS. Αυτή είναι μια εξαιρετική λύση γι 'αυτό. Ορίστε οποιοδήποτε μέγεθος προσθέτοντας το χαρακτηριστικό όπως αυτό: . - - Δημιουργήστε ένα κουμπί με πίνακες.
Πάνω από αυτές τις ετικέτες υπάρχουν επιπλέον κλάσεις CSS που μπορείτε να προσθέσετε, να προσαρμόσετε και να επεκτείνετε μέσω του Sass.
Σκαλωσιά του προτύπου του ενημερωτικού δελτίου
Για χάρη της συντομογραφίας, συνοψίζω τη διαδικασία κωδικοποίησης και σας παρουσιάζω όλα τα HTML προτού τα στυλίσω. Αυτό μου επιτρέπει να οικοδομήσω ένα σκελετό των ειδών για το πρότυπο και να ανησυχείτε για τα στυλ αργότερα. Παρακάτω είναι το HTML Καταλήξαμε για το σχέδιο. Αυτό το πρότυπο ζει με τον κατάλογο σελίδων και συμπεριλαμβάνεται στο layout / index-layout.html όπου βλέπετε την ετικέτα {{> body}} .
html
Email not displaying correctly? https://coupleofcreatives.com" class=logo>
|
Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Τα μαχαίρια είναι διαφορετικά και δεν είναι τόσο μαλακά όσο και τα μαλάκια. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Τα μακεδόνες είναι πολύ διαφορετικά από το μικρότερο.
Πρόσφατη μελέτη περίπτωσης
Οικογενειακή οδοντιατρική του Wildwood
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, λέει ότι το τρέχον εμπόριο, tortor mauris καρύκευμα nibh, το fermentum massa justo sit amet risus.
Από το blog
Αυτό είναι ένα κεφάλι σε μια εξωτερική σύνδεση Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, λέει ότι το τρέχον εμπόριο, tortor mauris καρύκευμα nibh, το fermentum massa justo sit amet risus. Ο ιστότοπός του είναι τοποθετημένος ως εξής:
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, λέει ότι το τρέχον εμπόριο, tortor mauris καρύκευμα nibh, το fermentum massa justo sit amet risus. Ο ιστότοπός του είναι τοποθετημένος ως εξής:
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, λέει ότι το τρέχον εμπόριο, tortor mauris καρύκευμα nibh, το fermentum massa justo sit amet risus. Ο ιστότοπός του είναι τοποθετημένος ως εξής:
Παρακολουθήστε το τελευταίο μας βίντεο
Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, λέει ότι το τρέχον εμπόριο, tortor mauris καρύκευμα nibh, το fermentum massa justo sit amet risus. Ο ιστότοπός του είναι τοποθετημένος ως εξής:
Ακολουθήστε μας στο instagram
|
Ανάγκη μάρκετινγκ; Μίσθωση αυτό το δημιουργικό δίδυμο
Λάβατε αυτό το μήνυμα ηλεκτρονικού ταχυδρομείου επειδή είστε εγγεγραμμένοι για να λαμβάνετε ενημερώσεις από εμάς. Κάντε κλικ εδώ για να καταργήσετε την εγγραφή.
μεσα στην HTML θα δείτε πολλές από τις προσαρμοσμένες ετικέτες που αναφέρθηκαν προηγουμένως. ο spacer στοιχείο, για παράδειγμα, χρησιμοποιώ πολύ για να δημιουργήσω κατακόρυφη απόσταση. Το κάνω αυτό απλώς και μόνο επειδή δεν είναι σε όλους τους πελάτες ηλεκτρονικού ταχυδρομείου το περιθώριο κέρδους και το padding Για να εξοικονομήσετε την ασάφεια το στοιχείο διαχωριστικού βοηθά εξαιρετικά.
Προσθήκη των Στυλ
Από τη στιγμή που χρησιμοποιώ την έκδοση Sass του Ιδρύματος για τα μηνύματα ηλεκτρονικού ταχυδρομείου, μπορώ να δημιουργήσω στοιχεία και να τα εισάγω στο αρχείο master.scss, το οποίο σε αντάλλαγμα καταρτίζεται στο φάκελο dist ως app.css .
Χρησιμοποιώ μια γραμματοσειρά που ονομάζεται Ιδανικό Sans . Δυστυχώς, μπορώ μόνο να το χρησιμοποιήσω στον καθορισμένο τομέα που σημαίνει ότι δεν θα μπορείτε να το χρησιμοποιήσετε για τις επικεφαλίδες στο τέλος σας. Αν ακολουθείτε κατά μήκος των επικεφαλίδων, θα έχετε Arial ως εφεδρικό για τη βασική γραμματοσειρά.
Οι περισσότερες προσαρμογές που μπορείτε να κάνετε στα στυλ που είναι ενσωματωμένα στο πλαίσιο βρίσκονται στο assets/scss/_settings.scss . Αυτό το αρχείο έχει μια ποικιλία μεταβλητών έτοιμη να προσαρμοστεί ώστε να ταιριάζει με το δικό σας branding.
Εκτός από την προσαρμογή αυτών των ρυθμίσεων, δημιούργησα κάποια δικά μου μέρη. Εισήγαγα αυτά τα αρχεία στο αρχείο app.scss .
Ανταποκρινόμενα μηνύματα ηλεκτρονικού ταχυδρομείου
Το Ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου έχει υποστήριξη για αποκριμένα μηνύματα ηλεκτρονικού ταχυδρομείου από το κουτί. Χρησιμοποιώντας το πακέτο
html Column 1 Column 2
Με βάση το μέγεθος οθόνης του χρήστη, αυτές οι στήλες θα εμφανίζονται σε πλάτος 50% σε μεγαλύτερες οθόνες και πλάτους 100% σε μικρότερες οθόνες. Αν είστε εξοικειωμένοι με τα δημοφιλή πλαίσια CSS όπως το Bootstrap ή το Foundation, αυτό πρέπει να είναι αρκετά εύκολο να το καταλάβετε.
Χρήση εικόνων σε μηνύματα ηλεκτρονικού ταχυδρομείου
Οι εικόνες πρέπει να φορτωθούν από έναν διακομιστή ιστού χρησιμοποιώντας απόλυτα μονοπάτια url και κατά προτίμηση από τον ίδιο τομέα με το email του ατόμου που το στέλνει. Έτσι, αν έστειλα ένα email από [προστατευμένο με ηλεκτρονικό ταχυδρομείο] {$lang_domain} στους συνδρομητές μου οι εικόνες θα πρέπει να ζουν κάτω από το ίδιο {$lang_domain} όνομα τομέα.
Με αυτόν τον τρόπο εξαλείφεται η πιθανότητα να στείλει εσφαλμένα το email σας σε φάκελο ανεπιθύμητης αλληλογραφίας και εμφανίζεται επίσης ως πιο επαγγελματικός.
Alt ετικέτες είναι ένα must
Εάν δεν χρησιμοποιείτε κανονικά ετικέτες alt (δεν ξέρω γιατί δεν θα) θα πρέπει να σε μηνύματα ηλεκτρονικού ταχυδρομείου. Πολλά προγράμματα-πελάτες αλληλογραφίας δεν φορτώνουν εικόνες από προεπιλογή και εξαρτώνται από τον χρήστη. Οι ετικέτες Alt μπορούν να σας βοηθήσουν να περιγράψετε την εικόνα πριν το βλέπει ο χρήστης. Αυτό είναι τόσο μεγάλη για την προσβασιμότητα και ένα χαριτωμένο fallback για όσους δεν ενδιαφέρονται για τη φόρτωση εικόνων στα μηνύματα που λαμβάνουν.
Δομικά αρχεία παραγωγής και δοκιμές
Τα μηνύματα ηλεκτρονικού ταχυδρομείου που βασίζονται στην παραγωγή πρέπει να έχουν το CSS. Το Inlining είναι η διαδικασία ορισμού των στυλ στο ίδιο το στοιχείο παρά η σύνδεση από ένα εξωτερικό φύλλο στυλ. Το Ίδρυμα για τα μηνύματα ηλεκτρονικού ταχυδρομείου έχει ένα εύχρηστο χαρακτηριστικό οικοδόμησης που το κάνει αυτό για σας. Τα τελικά αρχεία καταρτίζονται και διαγράφονται στο φάκελο dist .
Για να δημιουργήσετε αρχεία παραγωγής, θα θέλετε να σκοτώσετε όλους τους διακομιστές που εκτελούνται ήδη πληκτρολογώντας το ctrl + c στο πρόγραμμα τερματικού σας. Από εκεί τύπο:
Bash $ npm run buildΌταν ανοίγει το μήνυμα ηλεκτρονικού ταχυδρομείου στο πρόγραμμα περιήγησης, θα πρέπει να δείτε το ίδιο όπως και πριν. Αλλά, αν κοιτάξετε προσεκτικά την πηγή της σελίδας, θα δείτε ένα χάος κώδικα. Αυτό είναι το αποτέλεσμα της διαδικασίας κατασκευής και υποθέτοντας ότι όλα φαίνονται καλά, είναι έτοιμα να χρησιμοποιηθούν στο φυσικό περιβάλλον.
Δοκιμές
Δεν μπορώ να τονίσω πόσο σημαντικό είναι να δοκιμάσετε σε όσες πλατφόρμες ηλεκτρονικού ταχυδρομείου μπορείτε. Ο σχεδιασμός σας πιθανόν να φαίνεται διαφορετικός σε όλους τους, αλλά ο στόχος είναι να δημιουργηθεί μια λύση που τουλάχιστον φαίνεται συνεπής και ευανάγνωστη στις περισσότερες πλατφόρμες.
Μπορείτε να χρησιμοποιήσετε ένα εργαλείο που ονομάζεται Ηλιοτρόπιο για αυτή τη δοκιμή. Υπάρχει μια δωρεάν έκδοση του εργαλείου που σας επιτρέπει να αντιγράψετε και να επικολλήσετε τον κωδικό σας και να στείλετε ένα μήνυμα ηλεκτρονικού ταχυδρομείου στον εαυτό σας ή σε συνάδελφο. Βεβαιωθείτε ότι έχετε κάνει αυτό το βήμα. Τα μηνύματα ηλεκτρονικού ταχυδρομείου που αποστέλλονται προφανώς δεν μπορούν να επεξεργαστούν μετά το γεγονός.