Το πρώτο πράγμα που έμαθα όταν ξεκίνησα να φτιάχνω newsletter, ήταν να γράφω κώδικα σαν να είμαι στο έτος 1999, με χρήση δηλαδή table και inline css.
Κάθε email client έχει τη δική του οπτική για το πώς θα διαβάσει την html, css και πώς θα αναπαραστήσει το email. Για παράδειγμα κάποιοι mail clients δεν αναγνωρίζουν το margin-top ή το padding σε tables, ή αν ξεπεράσει το email τα 102 kilobytes, το ‘κόβουν’.
Θα προσπαθήσω να σας κατευθύνω στο πώς να ξεπεράσουμε όλα αυτά τα προβλήματα και να μπορέσουμε να στείλουμε ένα αξιοπρεπές responsive email το οποίο θα είναι ένα υπέροχο “eye candy” για όλες τις συσκευές.
Το να επιχειρήσουμε να φτιάξουμε από την αρχή ένα 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).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="ink.css"> <!-- For testing only - Στη γραμμή αυτή γίνεται η σύνδεση με το css αρχείο μας -->
<style type="text/css">
/* Ink styles go here in production - Σε αυτή τη γραμμή θα τοποθετήσουμε την css μας όταν φτάσουμε στο τελικό στάδιο του newsletter*/
</style>
<style type="text/css">
/* Your custom styles go here */
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<!-- Email Content - Σε αυτή τη γραμμή θα μπεί το κυρίως μέρος του newsletter μας -->
</center>
</td>
</tr>
</table>
</body>
</html>
Το foundation δημιουργεί ένα email 580 px πλάτος και το χωρίζει σε 12 στήλες (columns).
Στο παράδειγμά μας θα εισάγουμε στη γραμμή 26 του boilerplate.html ένα κομμάτι κώδικα από το tutorial του foundation, το οποίο χωρίζει το email μας σε 2 μέρη. Το αριστερό μέρος αποτελείται από 8 στήλες και το δεξί μέρος από 4, σύνολο 12.
Θα δημιουργήσουμε δηλαδή το αρχείο example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="ink.css"> <!-- For testing only - Στη γραμμή αυτή γίνεται η σύνδεση με το css αρχείο μας -->
<style type="text/css">
/* Ink styles go here in production - Σε αυτή τη γραμμή θα τοποθετήσουμε την css μας όταν φτάσουμε στο τελικό στάδιο του newsletter*/
</style>
<style type="text/css">
/* Your custom styles go here */
</style>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<!-- Email Content -->
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Email Content -->
</center>
</td>
</tr>
</table>
</body>
</html>
Ανοίγοντας με κάποιο browser το αρχείο(example.html) που φτιάξαμε, θα δούμε το παράδειγμά μας με τις 8 στήλες και τις 4 στήλες. Αν δοκιμάσουμε να μικρύνουμε το παράθυρο του browser θα διαπιστώσουμε ότι το δεξί στοιχείο πέφτει κάτω από το αριστερό.
Το τελικό βήμα είναι να κάνουμε αντιγραφή όλη την css από το ink.css αρχείο και να την κάνουμε επικόλληση στη γραμμή 11. Με αυτόν τον τρόπο η γραμμή 7 δε μας χρειάζεται, οπότε τη σβήνουμε. Στο ίδιο αρχείο πλέον το οποίο θα ονομάσουμε final.html και θα είναι και το τελικό μας, περιέχεται όλη η html και η css.
Αφού έχουμε το τελικό αρχείο final.html, πρέπει τώρα να βάλουμε Inline, δηλαδή γραμμή – γραμμή τη css σε κάθε σειρά του κώδικά μας. Αυτή η μετατροπή χρειάζεται για να μπορέσει το email μας να παίξει σωστά σε μερικούς email clients που αφαιρούν τα <head> και <style> tags.
Υπάρχουν πολλά εργαλεία που το κάνουν αυτό, αλλά προτείνω να χρησιμοποιείτε τον CSS inliner της litmus.
Επιλέγοντας όλο τον κώδικα από το final.html , τον αντιγράφουμε και τον κάνουμε επικόλληση στο CSS inliner το οποίο μας παράγει αυτόματα το ολοκληρωμένο πλέον responsive newsletter.
Για αρχή φτιάχνουμε πολλούς λογαριασμούς 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 για να κάνετε τις δικές σας δοκιμές για τη δημιουργία ενός responsive newsletter.
