Guide de conception du courrier réactif: rendez vos e-mails parfaitement présents sur une variété d'appareils

Points de base

• Alors que les appareils mobiles deviennent populaires dans la lecture par e-mail, la mise en page réactive du courrier doit prendre en compte les caractéristiques des appareils mobiles. Cela nécessite de réorganiser le contenu du courrier et d'organiser les cellules à l'origine horizontalement verticalement sur l'appareil mobile.
• La disposition du courrier à une seule colonne (contenant généralement une seule image de titre) ne nécessite pas de réarrangement des éléments, ajustez simplement la largeur pour correspondre à la taille de l'appareil. Il s'agit d'un design évolutif plut?t que d'un design réactif.
• La disposition du courrier multicolonne doit réorganiser les colonnes à mesure que la largeur du périphérique diminue. Cela peut être réalisé en utilisant des tables imbriquées ou en modifiant la propriété display de la cellule de table. Ce dernier est plus élégant et utilise des règles CSS natives.
• Les images dans les e-mails réactifs ne nécessitent que une technologie réactive classique (img {max-width: 100%;}). Cependant, à l'aide de requêtes multimédias, une image peut être cachée et une autre image peut être utilisée à la place comme image d'arrière-plan.

Dans les articles précédents sur la rédaction du communiqué de presse, nous avons appris quelques conseils qui peuvent changer considérablement la fa?on dont vos e-mails apparaissent dans différents clients.

De plus, nous devons considérer les appareils mobiles, qui sont de plus en plus utilisés dans la lecture des e-mails. Cela soulève le problème de la création de dispositions réactives pour les e-mails.

Puisque nous savons que les modèles de messagerie sont construits avec des tables HTML et ont des CS en ligne, notre travail est un peu plus compliqué que d'habitude:

• Les règles CSS en ligne ont des valeurs de spécificité élevées (elles gagnent toujours).
Les tableaux
• ne sont pas con?us pour les combinaisons de mise en page, nous devons donc prêter attention à la combinaison des e-mails et nous rappeler que les cellules (positionnement horizontal naturel) doivent être organisées verticalement sur les appareils mobiles.
• Bien s?r, nous ne pouvons pas utiliser JavaScript.

Heureusement, la plupart des appareils mobiles ont une forte compatibilité avec les règles CSS modernes, afin que nous puissions facilement résoudre tous ces problèmes avec les requêtes médiatiques, utiliser beaucoup de déclarations !important (pour remplacer les styles en ligne) et faire attention à l'arrangement du contenu soigneusement.

Pour de tels projets, il est important d'adopter une approche "d'abord mobile", en évitant les dispositions qui ne peuvent pas être organisées correctement sur de petits appareils.

Veuillez noter que même dans cet article, nous ne discutons que des problèmes réactifs, le courrier mobile réactif n'est pas nécessairement un bon courrier. La conception efficace des e-mails mobiles implique de nombreux éléments, notamment la taille des polices, les combinaisons de mise en page, et plus encore: ce sont des taches très importantes, que nous couvrirons dans un autre article.

Mode de mise en page du courrier

à propos de la réactivité, nous pouvons identifier deux types de courrier: une colonne unique et plusieurs colonnes.

Disposition d'une seule colonne

La disposition d'une seule colonne (généralement une seule image de titre) n'a aucun besoin spécial. Comme ils n'ont pas besoin de réorganiser les éléments, nous devons juste noter que toutes les largeurs sont élégamment dégradés pour correspondre à la taille des appareils. Ce n'est pas une conception réactive, mais un exemple classique d'une conception évolutive (voir évolutif, fluide ou réactif: comprendre comment déplacer le courrier).

Disposition d'une seule colonne

Pour vous assurer que votre e-mail est redimensionné correctement, il vous suffit de régler la largeur du tableau:

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

Vous devez également redimensionner l'image (voir le paragraphe "About Image" à la fin de cet article) et redimensionner la police, mais il n'y a pas d'autres besoins spéciaux.

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

Disposition multicolonne

La disposition multicolonne nécessite un réarrangement des colonnes à mesure que la largeur du périphérique diminue. Que vous utilisiez deux, trois ou plus de colonnes, vous devez les afficher verticalement au lieu de horizontalement.

Il existe deux fa?ons simples d'y parvenir:

en utilisant des tables imbriquées

1. Modifiez la propriété
de la cellule de table.
2. display
Disposition de la table imbriquée

Les combinaisons de courriels nécessitent généralement l'utilisation de tables imbriquées. Ceci est toujours considéré comme le meilleur moyen d'assurer la compatibilité des clients, mais en revanche, le code généré est très déroutant et en fait difficile à lire.

L'astuce consiste à utiliser l'attribut

, ce qui fait aligner horizontalement la table.

Chaque élément doit avoir une largeur table align="left" spécifique

, et leur somme doit être la même que leur valeur de conteneur.

Lorsque la largeur du périphérique diminue, nous devons redimensionner le conteneur et forcer toutes les colonnes de table à 100% de largeur.

Cette technique garantit une compatibilité avec la plupart des clients: j'ai testé les fichiers de démonstration en simple et tous les clients obtiennent de bons résultats, permettant l'avertissement suivant:

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

Outlook 2007, 2010 et 2013 (ces versions d'Outlook utilisent Microsoft Word comme moteur de rendu: voir le guide de différence de rendu du client Microsoft sur le blog de Litmus);

La version la plus ancienne de Lotus Notes;

Gmail Android App.
• C'est un bon point de départ (voir ci-dessous pour certains des résultats du test), nous devons également considérer que ce test est construit avec des tables vides: ajouter du contenu (et plus de tables imbriquées !!) Vous devriez être en mesure de Corrigez toutes les erreurs et faites en sorte que cette technologie fonctionne correctement avec tous les clients.

Partie des résultats des tests de compatibilité des clips

Modifiez la propriété d'affichage d'une cellule de table

La deuxième méthode de construction de messages multi-colonnes est plus élégante et utilise des règles CSS natives.

Cette technique implique de modifier les propriétés display de la cellule de table par défaut lorsque la largeur du périphérique est réduite (vous pouvez trouver de nombreux exemples sur ReactiveEmailPatterns.com). Cela fait que les cellules se réinscrivent verticalement:

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

Les résultats de ce test sont très bons: tous les clients rendent correctement le courrier du test (parfois il y a des erreurs subtiles), mais n'oubliez pas que nous avons essayé le courrier vide et que les résultats peuvent varier après l'ajout de contenu.

sur les images

Dans le courrier réactif, les images nécessitent uniquement la technologie réactive classique que nous utilisons actuellement sur le Web (img {max-width: 100%;}).

Cependant, comme suggéré dans le guide de conception du courrier réactif de Campaign Monitor, en utilisant les requêtes multimédias, vous pouvez masquer une image et la remplacer par une autre image comme image d'arrière-plan.

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

N'oubliez pas que même les images cachées via CSS se chargeront sur le client, alors soyez conscient de cela.

Une bonne option consiste à utiliser la même image pour la balise img et background-image Source. Vous devez préparer une image à usage multiple à utiliser dans toutes ces gammes, comme l'exemple suivant:

Après avoir sélectionné l'image appropriée, vous pouvez l'utiliser pour de nombreux points d'arrêt de la requête multimédia. Une fois que vous êtes prêt, il vous suffit d'ajouter une petite quantité de règles CSS:

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

Vous pouvez également ajouter l'attribut background-size pour ajuster chaque vue de point d'arrêt (notez la prise en charge du client pour cette règle).

Malheureusement, il est peu probable que cela résout tous vos besoins pour les appareils à haute densité, mais cela peut réduire le nombre de fichiers chargés pour tous les autres cas.

Conclusion

donc, y a-t-il une technologie de création de messagerie unique, polyvalente et la meilleure réactive?

Habituellement, la réponse est non. Chaque projet nécessite une approche différente et il existe différentes meilleures solutions . La vraie réponse est de ma?triser une gamme de techniques utiles et d'essayer constamment de nouvelles méthodes.

Ressources

• http://ipnx.cn/link/f663b8c9b8331a8c625007b4337601ec
• http://ipnx.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• http://ipnx.cn/link/ae0de04da95f06c3c85934ea84bcccc0
• http://ipnx.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• http://ipnx.cn/link/3d4233a54febe35fbf7749c3affb8e15
• http://ipnx.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• http://ipnx.cn/link/7006bc554a1a9de85c416551c10368e2

Les questions fréquemment posées sur la construction du courrier réactif

(La section FAQ fournie dans le texte d'origine est omise ici, car le contenu de cette partie est moins difficile à réécrire et est plus long que les autres parties du texte d'origine. Pour éviter une sortie trop longue, elle est omise ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!