Η ανάπτυξη HTML email απαιτεί αμυντικές διατάξεις βασισμένες σε πίνακες για αξιόπιστη απόδοση σε προγράμματα-πελάτες email σε υπολογιστές και κινητά.
Ιδιομορφίες Clients και Μη Επιτρεπτό CSS
Ιδιότητες προς Αποφυγή
| Ιδιότητα & Εμβέλεια | Προβληματικοί Clients | Ασφαλής Εναλλακτική |
|---|---|---|
width σε p ή div |
Microsoft Outlook | Ορισμός width σε στοιχεία td |
padding σε p ή div |
Microsoft Outlook | Εφαρμογή padding σε κελιά td |
margin (όλες οι μορφές) |
Outlook, Hotmail | Χρήση κελιών πίνακα για διαστήματα |
background-image |
Outlook Windows desktop | Χρήση ετικετών Microsoft VML |
Εικόνες data-uri |
Webmail clients | Φιλοξενία εικόνων σε εξωτερικό HTTPS CDN |
Επιλογείς προς Αποφυγή
| Τύπος Επιλογέα | Προβληματικοί Clients |
|---|---|
| Ψευδοστοιχεία (::before, ::after) | Outlook, Yahoo, Gmail |
| Επιλογείς γειτονικών στοιχείων (E + F, E > F) | Outlook, Gmail App |
| Επιλογείς χαρακτηριστικών ([href^="https"]) | Παλαιότερες εφαρμογές webmail |
Βασικός κανόνας: Εφαρμόζετε πάντα όλο το CSS ενσωματωμένο σε γνωρίσματα style="..." σε κελιά πίνακα.
Βασικός Σκελετός Διάταξης Email
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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, initial-scale=1.0"/>
<title>Responsive Email</title>
<style type="text/css">
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="container" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td style="color: #333333; font-family: Arial, sans-serif; font-size: 16px; line-height: 24px;">
Το περιεχόμενο του email τοποθετείται εδώ.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>