Πώς να φτιάξετε Responsive Newsletter

24 Ιαν, 2016 | Tech News

Καν’ το όπως το 1999

Το πρώτο πράγμα που έμαθα όταν ξεκίνησα να φτιάχνω newsletter, ήταν να γράφω κώδικα σαν να είμαι στο έτος 1999, με χρήση δηλαδή table και inline css.

Κάθε email client έχει τη δική του οπτική για το πώς θα διαβάσει την html, css και πώς θα αναπαραστήσει το email. Για παράδειγμα κάποιοι mail clients δεν αναγνωρίζουν το margin-top ή το padding σε tables, ή αν ξεπεράσει το email τα 102 kilobytes, το ‘κόβουν’.

Θα προσπαθήσω να σας κατευθύνω στο πώς να ξεπεράσουμε όλα αυτά τα προβλήματα και να μπορέσουμε να στείλουμε ένα αξιοπρεπές responsive email το οποίο θα είναι ένα υπέροχο “eye candy” για όλες τις συσκευές.

Responsive template

Το να επιχειρήσουμε να φτιάξουμε από την αρχή ένα responsive newsletter είναι αρκετά δύσκολο και συνεπώς θα προτιμήσουμε ένα έτοιμο template. Με ένα απλό search στο google θα βρείτε διάφορα. Αυτό που χρησιμοποιώ εγώ είναι το zurb foundation. Το foundation for emails είναι ένα framework που μας παρέχει  ένα responsive grid system σχεδιασμένο για email και τις αντίστοιχες css classes.

Στην καρτέλα download κατεβάζουμε το zip αρχείο που περιέχει έτοιμο το “templates/boilerplate.html” και το “css/ink.css” καθώς και κάποια παραδείγματα.

Βάζουμε στον ίδιο φάκελο αυτά τα δύο αρχεία και τα ανοίγουμε με έναν επεξεργαστή κειμένου (atom).

Το foundation δημιουργεί ένα email 580px πλάτος και το χωρίζει σε 12 στήλες(columns).

Στο παράδειγμά μας θα εισάγουμε στη γραμμή 26 του boilerplate.html ένα κομμάτι κώδικα από το tutorial του foundation, το οποίο χωρίζει το email μας σε 2 μέρη. Το αριστερό μέρος αποτελείται από 8 στήλες και το δεξί μέρος από 4, σύνολο 12.

Θα δημιουργήσουμε δηλαδή το αρχείο example.html

Ανοίγοντας με κάποιο browser το αρχείο(example.html) που φτιάξαμε, θα δούμε το παράδειγμά μας με τις 8 στήλες και τις 4 στήλες. Αν δοκιμάσουμε να μικρύνουμε το παράθυρο του browser θα διαπιστώσουμε ότι το δεξί στοιχείο πέφτει κάτω από το αριστερό.

Το τελικό βήμα είναι να κάνουμε αντιγραφή όλη την css από το ink.css αρχείο και να την κάνουμε επικόλληση στη γραμμή 11. Με αυτόν τον τρόπο η γραμμή 7 δε μας χρειάζεται, οπότε τη σβήνουμε. Στο ίδιο αρχείο πλέον το οποίο θα ονομάσουμε final.html και θα είναι και το τελικό μας, περιέχεται όλη η html και η css.

CSS Inliner

Αφού έχουμε το τελικό αρχείο final.html, πρέπει τώρα να βάλουμε Inline, δηλαδή γραμμή – γραμμή τη css σε κάθε σειρά του κώδικά μας. Αυτή η μετατροπή χρειάζεται για να μπορέσει το email μας να παίξει σωστά σε μερικούς email clients που αφαιρούν τα <head> και <style> tags.

Υπάρχουν πολλά εργαλεία που το κάνουν αυτό, αλλά προτείνω να χρησιμοποιείτε τον CSS inliner της litmus.

Επιλέγοντας όλο τον κώδικα από το  final.html , τον αντιγράφουμε και τον κάνουμε επικόλληση στο CSS inliner το οποίο μας παράγει αυτόματα το ολοκληρωμένο πλέον responsive newsletter.

Email testing

Για αρχή φτιάχνουμε πολλούς λογαριασμούς email σε διαφορετικούς email clients. Οι πιο βασικοί είναι: gmail (desktop,mobile), outlook, yahoo, apple mail, mozilla thunderbird. Αν καταφέρουμε το email μας να φαίνεται σωστά στους παραπάνω, έχουμε καλύψει ένα μεγάλο κομμάτι χρηστών.

Ένα πολύ δυνατό εργαλείο για δοκιμές είναι το “Litmus” όπου ανεβάζουμε έτοιμο το email σε html και μπορούμε να δούμε πώς εμφανίζεται οπτικά σε όλους τους mail clients(desktop,mobile)

Είναι αρκετά ακριβό (80$ το μήνα) αλλά μπορεί κάποιος να το δοκιμάσει δωρεάν για 7 ημέρες, χρονικό διάστημα ικανό για να πάρουμε μια πρώτη εικόνα και να κάνουμε αλλαγές στο βασικό μας template.

Έχοντας έτοιμο το email μας σε html αρχείο με την css inline, αρχίζουμε τις δοκιμές.

Δεν έχει σημασία ο τρόπος καθώς μπορούμε να το κάνουμε είτε με μία-μία αποστολή (putsmail), είτε με μαζικές αποστολές (moosend, mailchimp), είτε με εικονικές (litmus), αλλά σε κάθε περίπτωση πρέπει να δοκιμάσουμε το email μας πριν το στείλουμε επίσημα ως newsletter.

Εδώ θα βρείτε το αναλυτικό tutorial για να κάνετε τις δικές σας δοκιμές.