Voici quelques conseils pour créer la lettre réactive parfaite.
Les grands services de courrier ont un éditeur de blocs intégré. Il collecte des e-mails réactifs simples et cela est inclus dans le prix de l'abonnement. Cela ne fonctionnera pas de remplir une lettre créative complexe dans l'éditeur - c'est le travail du concepteur et du concepteur de la mise en page. Commençons par déterminer quelle lettre est classée comme complexe et laquelle est simple.
Ensuite, il y a les « chips ». Quelque part, vous pouvez définir la taille exacte des blocs individuels, mais quelque part vous ne le pouvez pas. Dans un éditeur, vous ne pouvez collecter que des lettres sur une colonne, dans l'autre, il n'y a aucune restriction sur le nombre de colonnes. Dans certains éditeurs, vous pouvez même personnaliser les blocs à afficher sur la version de bureau et ceux uniquement sur les appareils mobiles.
Le designer et le maquettiste proposent des solutions individuelles, l'éditeur propose des solutions standards. Gardez à l'esprit que lors de l'assemblage d'une lettre dans l'éditeur, vous êtes de toute façon limité, par exemple, par le jeu de polices et leurs tailles.
Le concepteur le fera comme vous le vouliez. Le concepteur de la mise en page réfléchira à la façon de réorganiser les blocs sur les appareils mobiles - comme vous l'aviez prévu. Lorsque vous travaillez dans un éditeur de blocs, vous vous appuyez sur les solutions apportées par les développeurs.
L'éditeur adapte la lettre selon son propre algorithme, l'algorithme ne peut pas être modifié.
Si vous avez élaboré la structure, écrit le texte et récupéré les images, il vous faudra de trente minutes à deux heures pour créer une lettre. Rappelons que vous ne payez pas la mise en page, le travail avec l'éditeur est inclus dans le coût du compte.
Une équipe d'un designer indépendant et d'un maquettiste rédigera une lettre en deux ou trois jours, cela coûtera de 5 000 à 15 000 roubles. Si vous commandez en agence, c'est beaucoup plus cher. Rappelez-vous l'histoire de l'introduction? Pour Sergei, le choix est évident : il récupérera lui-même la lettre, dans sa situation c'est moins cher et plus rapide.
Il est préférable de rédiger une simple lettre réactive dans l'éditeur intégré. Si vous voulez des solutions non standard, externalisez.
Comment assembler une lettre dans l'éditeur intégré
Ceux qui assemblent une lettre dans l'éditeur n'ont pas besoin de connaître le code. La seule chose dont vous avez besoin est de réfléchir à la structure de la lettre, de prendre des images et d'écrire le texte. Pas de composition "manuelle" - vous assemblerez une lettre à partir de blocs, comme dans le générateur de page de destination.
Étape 1. Aperçu ou prototype de la lettre
Commencez par un brouillon, dessinez un schéma de la future lettre sur papier : où sera le titre, où est l'image, où est le bouton, etc. Si vous avez le temps, montez un prototype à part entière en Balsamiq ou NinjaMock . Ce n'est pas une honte de montrer un tel prototype au réalisateur et de le transférer dans le travail du designer.
Étape 2. Mise en page de la lettre dans l'éditeur
- Ajoutez le nombre requis de colonnes en fonction d'un schéma ou d'un prototype prêt à l'emploi
- Faites glisser les éléments nécessaires dans le corps de la lettre
Habituellement, le principe du glisser-déposer fonctionne dans les éditeurs intégrés. Si ce n'est pas le cas, consultez les articles de la base de connaissances - les principes de travail dans l'éditeur y sont décrits.
- Personnaliser le contenu des éléments : remplissage, espacement, alignement et style
Ici, vous entrez le texte requis, ajoutez une photo ou une illustration, avec ou sans liens. N'oubliez pas que vous pouvez ajouter une image animée, la plupart des éditeurs prennent en charge le format GIF.
N'allez pas trop loin avec la taille du fichier. Les clients de messagerie n'aiment pas les lettres "lourdes" et peuvent masquer leur contenu sous le bouton "Afficher complètement" - comme, par exemple, Gmail. Sélectionnez les fichiers de sorte que la lettre finie ne pèse pas plus de 600 Ko, c'est la taille optimale.
N'oubliez pas de personnaliser les boutons et d'y ajouter des liens de navigation.
Étape 3. Vérification de la réactivité dans l'éditeur intégré
Lorsque l'e-mail est prêt, vérifiez comment il apparaît sur différents appareils.
Dans 90% des cas, tout sera en ordre, les blocs seront "reconstruits" automatiquement. Si la mise en page "vole" toujours ou si le résultat ne vous convient pas, vérifiez les valeurs des retraits dans les blocs, ils devraient être les mêmes. Si un bloc recule de 10 points et l'autre de 30, il se peut qu'ils ne soient pas réorganisés correctement dans la version mobile. Si les deux blocs reculent de 10 points, tout ira probablement bien.
Étape 4. Vérification de l'adaptabilité sur les services tiers
Vérifiez le résultat via Litmus ou Email on Acid. Ces services vous montreront comment l'e-mail sera affiché sur différents appareils, dans différents navigateurs et différents clients de messagerie.
Dans certains éditeurs, la vérification via Litmus est intégrée par défaut. Si votre éditeur n'a pas cette option, envoyez une copie test de la lettre à un e-mail spécial, qui vous sera remis après votre inscription auprès de Litmus.
Le service est payant, un abonnement mensuel à Litmus commence à partir de 79 $, à Email on Acid - à partir de 45 $. Si vous envoyez une lettre une fois par mois, cela peut coûter cher. En dernier recours, essayez Browser Shots, c'est vieux et peu pratique, mais gratuit. N'oubliez pas que ces services ne sont pas garantis à 100 %. Même si tout va bien dans Litmus, ce n'est pas une raison pour démarrer la liste de diffusion tout de suite. Envoyez la lettre à votre courrier personnel et ouvrez-la là-bas.
Choisissez un éditeur qui montre à quoi ressemble la lettre sur différents appareils. Idéal si l'éditeur est intégré au service Litmus. S'il n'y a pas d'intégration, vérifiez l'adaptabilité manuellement via courrier personnel.
Comment évaluer le résultat du travail - le vôtre ou un concepteur de mise en page
Si vous récupérez la lettre vous-même, vérifiez l'adaptabilité à l'intérieur de l'éditeur et regardez la lettre dans votre courrier personnel - cela suffit. Si vous souhaitez tester l'adaptabilité sur de nombreux appareils, navigateurs et clients de messagerie à la fois - alors achetez un compte dans Litmus ou Email on Acid, voyez le résultat ici.
Ceux qui sous-traitent la mise en page n'ont pas besoin d'acheter de compte, demandez au concepteur de la mise en page des captures d'écran de Litmus. S'il est un professionnel, alors il vérifie les lettres sur ces services, l'envoi d'une capture d'écran n'est pas un problème pour lui.Lors de la vérification, examinez de plus près les clients de messagerie, la plupart des jambages apparaissent ici. Assurez-vous de vérifier comment un e-mail s'ouvre dans Outlook, Gmail, Yandex et Mail.ru - ce sont les clients de messagerie les plus populaires en Russie.
Ne perdez pas de temps à corriger la mise en page si elle s'affiche incorrectement sur le troisième iPhone, dans la septième version d'Internet Explorer ou dans le client de messagerie The Bat. Oui, il y aura toujours ceux qui utiliseront le troisième iPhone, mais ils sont minoritaires. Cela vaut-il la peine de repenser la mise en page pour 1 à 2 % de la base totale ? Dépend de la quantité et de la "qualité" de la base.
Nous espérons que vous l'avez segmenté et que vous savez tout sur vos abonnés. Si 1-2% représente 10 000 personnes, alors cela en vaut la peine. Si vous travaillez en b2b et que ces 1 à 2% sont des sociétés de gestion, des propriétaires d'entreprise et d'autres clients VIP, vous devrez adapter des lettres pour eux.
Assurez-vous que la lettre est correctement affichée dans Outlook, Gmail, Yandex et Mail.ru - cela suffit.
Mémo du commerçant
- Décidez du format de la lettre, de ce qu'elle sera : standard et simple ou complexe et créatif. Donnez des lettres avec une structure complexe au designer et au maquettiste. Collectez les courriers simples dans l'éditeur du service de mailing, ils sont adaptés par défaut.
- Vérifiez le résultat dans l'éditeur intégré et, si votre budget le permet, sur des services tiers. Lorsque vous acceptez une lettre d'un concepteur de mise en page, demandez des captures d'écran qui confirment que la lettre s'affiche correctement - au moins dans les clients de messagerie et les navigateurs populaires.
- Assurez-vous de consulter la lettre par courrier personnel, au moins dans les principaux clients de messagerie et à partir des modèles actuels de smartphones sur iOS et Android.
Plus
L'un des lecteurs du blog du Web Council a demandé à parler de la mise en page des lettres de la liste de diffusion. Moi-même, je ne le fais pratiquement pas. Je me souviens qu'à un moment donné, je jouais avec des modèles pour Subscribe.ru, et je me souviens que c'était une entreprise morne. Le problème est que les services de messagerie ne fonctionnent pas bien avec la mise en page par blocs. Et encore pire avec les styles CSS. Tant d'années ont passé et les choses sont toujours là. Maintenant, l'écrasante majorité des lettres pour les envois sont composées de la même manière à l'ancienne - en utilisant des tableaux. Et c'est en 2016, lorsque html5, css3 et autres douceurs modernes pilotent les sites depuis longtemps.
En principe, des articles exhaustifs sur la mise en page des lettres sont déjà sur Habré, ici et ici. Je recommande également de lire un habitant local nommé Arthur Koch, qui a écrit de nombreux articles utiles sur la mise en page des lettres. Exemples : lien 1, lien 2.
Mais pour que le poste ne s'avère pas vide, je vais néanmoins exposer brièvement les principaux points de la mise en page des lettres pour les newsletters par e-mail.
Tout d'abord, vous devez oublier la disposition des blocs et une feuille de style distincte. Tout est disposé dans des tableaux et les styles sont écrits directement sur place, ou autrement - Inline. Cela ressemble à quelque chose comme ça :
Deuxièmement, vous devez toujours forcer la réinitialisation des valeurs des retraits, des marges et des bordures, car chaque client de messagerie essaie de les afficher à sa manière :
Troisièmement, vous n'avez pas à vous soucier des balises doctype, head et body. Sans doctype, vos lettres seront les mêmes partout, la tête et le corps sont presque inutiles, car sera encore coupé par la plupart des services postaux (preuve).
Quatrièmement, si vous utilisez des images en lettres, assurez-vous d'écrire leurs tailles.
mise en page adaptative des lettres
Très souvent, les expéditeurs bloquent les images dans les lettres et si vous ne définissez pas leur taille, la lettre aura l'air maladroite. Assurez-vous également d'ajouter style = "display: block ;. Cela éliminera les problèmes d'indentation incompréhensible (par exemple, dans gmail):
Et n'utilisez en aucun cas des images à un seul pixel comme espaceurs pour les cellules du tableau ! Votre lettre est garantie de finir dans le spam. Si vous avez besoin d'un espaceur, vous devez utiliser une image avec des dimensions d'au moins 20x20 pixels, qui dans les styles doivent être forcées à une taille de 1x1 pixel.
Cinquièmement, il est possible de créer une mise en page adaptative pour les lettres. Il a l'air tout aussi maladroit que tous les travaux avec des tables en général, mais sans poisson... Vous le comprenez vous-même. En bref, pour que votre lettre ait un semblant de réactivité, sa partie contenu doit être encadrée avec une balise centrale avec des styles appropriés :
Et enfin, quelques liens utiles. Ici, vous pouvez voir quelles balises sont prises en charge par différents services de messagerie. Et ici, vous trouverez quelques autres choses utiles - "Caractéristiques de la mise en page des lettres HTML".
Si l'article vous a été utile, merci de le noter et de le partager sur les réseaux sociaux :
(2 voix, moyenne :
Entrées associées :
Mise en page des e-mails responsives : mémo d'un marketeur
La plupart des e-mails ne s'affichent pas correctement sur les appareils mobiles. Les dessins divergent et le texte doit être fait défiler et mis à l'échelle. Une mise en page réactive est essentielle pour que les e-mails s'affichent correctement sur différentes plates-formes.
Ce cours s'adresse aux codeurs HTML, aux développeurs et aux spécialistes du marketing par e-mail ayant des connaissances de base en HTML et CSS. Vous apprendrez ce que sont la disposition mobile et fluide, l'adaptation des blocs et des flancs. Apprenez à préparer des images pour les lettres et envisagez des outils de mise en page de base.
Après le cours, vous serez en mesure de créer des lettres qui s'afficheront aussi bien sur les ordinateurs que sur les appareils mobiles.
2. Caractéristiques de la mise en page réactive
3. Approches de l'adaptation des e-mails
4. Modèle d'e-mail réactif de base
5. Techniques d'adaptation mobile
6. Outils de mise en page HTML
7. Résumé du cours
8. E-mail marketing responsive : test final
Les possibilités infinies de mise en page créative des newsletters électroniques, l'utilisation d'éléments graphiques et de contenus intéressants attirent l'attention du client. De tels e-mails ne sont pas envoyés au spam.
Création d'une lettre postale
Pour une application réussie du système d'email marketing, il ne suffit pas d'avoir une simple logique de newsletter et une lettre avec une offre.
30 modèles d'e-mails réactifs gratuits
Pour attirer l'attention, les informations doivent être présentées dans un bel "emballage", avec les bons liens et des images attrayantes. La première impression de la lettre est l'enveloppe extérieure, le remplissage est secondaire.
Les utilisateurs reçoivent environ une centaine de lettres chaque jour, vous devez attirer l'attention du public avec un titre et une proposition "lumineux" et passionnants à l'intérieur. Pour réussir la mise en œuvre de la conception et de la mise en page des lettres à adresser, vous devez réfléchir à une stratégie de mise en œuvre du projet :
- réfléchir à une idée et construire correctement une série de lettres ;
- mettre en avant l'essentiel, gagner la confiance du client en proposant un produit intéressant ;
- les lettres doivent encourager l'action, motiver à acheter un produit;
- design attrayant, les professionnels feront la mise en page html des lettres pour l'envoi.
Les experts s'occuperont de la mise en page réactive des e-mails afin que le design soit parfait sur n'importe quel appareil. Si votre boutique en ligne n'a pas d'identité d'entreprise, nous réaliserons une mise en page générale de la lettre de marque, qui servira de base pour l'envoi. Le marketing est la capacité d'évoquer des émotions chez une personne, de former un désir d'acheter quelque chose. Nous sommes des professionnels dans ce domaine, donc le résultat de notre travail est toujours excellent.
Mise en page des lettres html
- L'idée de promouvoir un produit/service et sa mise en œuvre au format texte.
- Conception de lettre pour l'envoi.
- Mise en page des e-mails.
- Test du résultat sur toutes les plateformes et services de messagerie.
L'effet maximal des lettres peut être atteint si chaque maillon du processus exécute la tâche de manière claire et efficace. Un maquettiste et des concepteurs professionnels prendront en charge la personnalisation de la fonctionnalité et de la base technique de la lettre, en tenant compte de la mise en page pour des clients de messagerie spécifiques. La lettre s'affichera correctement sur toutes les plateformes - c'est ce qu'on appelle le cross-mailing.
Des modèles simples et reconnaissables, la bonne largeur, des informations sur l'entreprise et un formulaire de désinscription - lorsque tout cela est pris en compte, votre newsletter inspirera confiance, et le client ne pensera même pas à cliquer sur le bouton "spam".
Qu'est ce que tu obtiens?
- Des courriers croisés rédigés selon toutes les règles
- Beau design précis
- CTR élevé
- Faible taux de désabonnements, s'ajoutant au spam
- Texte bien pensé, ciblant les newsletters
- Segmentation efficace
- Affichage correct des lettres dans la plupart des clients de messagerie
- Configuration technique correcte du processus d'envoi
Il n'y a pas que l'esthétique qui compte - la fonctionnalité est importante. Si vous êtes prêt à commencer à bien rédiger vos lettres - nous vous invitons à une consultation gratuite.
Matériel mis à jour 20/06/2018
La mise en page des lettres diffère de la mise en page Web habituelle en raison des particularités d'interprétation dans diverses interfaces Web et clients de messagerie.
Jetons un coup d'œil à des exemples sur la façon d'obtenir un bon affichage de la lettre dans toutes sortes de FAI et de clients de messagerie.
À quoi ressemble un modèle d'e-mail responsive générique :
|
Pour résoudre le problème de la mise à l'échelle automatique des e-mails dans iOS 10 et iOS 11, nous avons ajouté :
Exemple d'erreur de mise à l'échelle automatique
Le prochain hack :
Webkit-text-size-adjust : aucun ; -ms-text-size-adjust : aucun ;
empêche les appareils iOS de modifier le contenu de la lettre pour plus de lisibilité. Cela contredit généralement la conception et peut casser la mise en page :
Passons au corps de la lettre - la section du corps. La couleur d'arrière-plan de l'interface Web peut être différente, vous devez donc tout envelopper dans un tableau avec la couleur d'arrière-plan souhaitée, même si elle est blanche, comme dans ce cas :
| … |
En raison de la prise en charge limitée des propriétés de style, telles que max-width, par les clients de messagerie Outlook 2007-2016, ainsi que par les clients de messagerie de type IE Outlook 2003 et Lotus Mail, il est nécessaire de créer une structure de table auxiliaire dans les commentaires conditionnels qui limitera la largeur du message dans ces clients de messagerie :
| Bloc1 | Bloc2 |
Code compris entre :
sera ignoré par tous les clients de messagerie, à l'exception d'Outlook 2007-2016 et des clients de messagerie de type IE.
Et chacun des blocs aura la structure suivante :
| Bloquer |
De plus, dans les lettres, il y a parfois une situation où les blocs sont décalés, cependant, lors de la reconstruction, il est conseillé de préserver la séquence logique des blocs et de reconstruire non pas le bloc droit sous le gauche, mais vice versa - le bloc gauche sous la droite. Cela peut être fait en changeant la direction du texte, il ressemblera à ceci:
|
Autres éléments et techniques
Pré-en-tête invisible
Presque toutes les interfaces Web affichent également le premier texte à côté de la ligne d'objet :
Dans les listes de diffusion, il s'agit généralement d'informations techniques, telles que "se désinscrire" et "ouvrir dans un navigateur", qui ne motivent clairement pas l'abonné à ouvrir la lettre, cependant, en contrôlant le texte affiché, vous pouvez augmenter considérablement les chances de ouvrant la lettre.
Pour ce faire, ajoutez un code avec la structure suivante au tout début du corps html de la lettre :
L'utilisation d'un pré-en-tête invisible peut avoir un impact négatif sur la délivrabilité, utilisez donc cette technique avec soin et surveillez attentivement la délivrabilité via le postmaster.
Vidéo dans les e-mails
Cependant, le client de messagerie standard Mail a recommencé à lire la vidéo html5 - un lien direct vers la vidéo youtube, placé sur l'image.
Avec cette implémentation, la vidéo sera affichée sur une couche dans les interfaces Web Mail.ru (environ 55%) et Gmail (environ 14%). Dans le même temps, sur la plupart des appareils mobiles, la vidéo sera ouverte dans l'application Youtube, sans ouvrir de navigateur.
L'inconvénient de cette approche est l'impossibilité de collecter des statistiques sur les clics, puisque le lien vers Youtube doit être direct, et le suivi des clics pour cet envoi devra être désactivé dans votre ESP.
Essai
L'étape la plus importante de la mise en page consiste à tester les lettres. Le meilleur moyen reste encore de vérifier manuellement l'affichage de la lettre dans diverses interfaces web et clients de messagerie, cela peut aider à envoyer une mise en page "brute" de lettres sous forme d'archive. Vous devez savoir quelles plateformes vos abonnés utilisent, quels fournisseurs de messagerie ils préfèrent et vérifier manuellement au moins les plus populaires.
Pour accélérer le processus de test, vous pouvez utiliser les services Litmus et EmailOnAcid, mais cela n'élimine pas la nécessité de vérifier manuellement l'affichage de chaque lettre individuelle.
L'article mentionnait certains services, ressources et outils qui seront sans aucun doute utiles pour un concepteur de lettres et pas seulement. Voici une petite liste de ressources utiles.
Outils et services :
Email Buttons est un générateur de boutons utilisant VML.
- Insertion d'images de fond dans les e-mails à l'aide de VML.
Litmus - tester l'affichage des lettres.
Email On Acid est une alternative à Litmus : tester l'affichage des emails.
Matériaux utiles :
Blog Litmus est le leader du marché des tests de messagerie. Des cas intéressants et les dernières nouvelles du monde du marketing par e-mail et de la mise en page des e-mails.
Blog Email On Acid - des cas intéressants et les dernières nouvelles du monde du marketing par e-mail et de la mise en page des e-mails.
- le premier blog sur le marketing par e-mail, explique comment rendre les e-mails efficaces.
Le blog de Tod - des cas intéressants et des documents utiles sur la mise en page et le développement.
- Traduction
Quiconque lit périodiquement son courrier sur son téléphone sait que l'expérience peut être aussi agréable que carrément horrible. Le fait qu'un e-mail d'une liste de diffusion ait fière allure sur un bureau ne signifie pas que tout ira bien dans un client de messagerie mobile - sur un petit écran, il y a souvent des problèmes avec les polices, l'affichage des colonnes et la mise en page des modèles tout simplement vers le bas.
Pourquoi vous devez adapter les e-mails aux appareils mobiles
Une proportion importante de l'audience de diverses sociétés de marketing par e-mail consulte les e-mails sur des appareils mobiles. Une étude de Campaign Monitor de 2011 a révélé que près de 20 % des ouvertures d'e-mails se sont produites sur des smartphones et des tablettes, contre seulement 4 % en 2009. Près de 90 % de ces découvertes ont été faites sur des appareils iOS. Maintenant, les chiffres sont encore plus élevés.Dans ce didacticiel, nous examinerons plusieurs façons d'améliorer l'affichage sur les appareils mobiles (de l'utilisation de requêtes multimédias pour une mise en page réactive à des techniques plus avancées). De plus, nous examinerons divers problèmes de conception qui se posent au stade de la planification d'une liste de diffusion, ainsi que de la manière de placer des formulaires d'abonnement pour recevoir des lettres sur les smartphones et les tablettes.
Techniques de conception
Avant de plonger dans le monde de la composition de lettres, parlons de l'aspect visuel de cette affaire. Un point intéressant est que lors de l'analyse du matériel, nous allons créer deux versions de la même lettre - un modèle est conçu pour bien paraître sur les clients de messagerie de bureau, et le second doit être agréable à lire sur les appareils avec de petits écrans.Par exemple, voici à quoi pourrait ressembler une telle lettre dans Outlook :
Vous trouverez ci-dessous le même e-mail, mais ouvert dans l'application Mail pour iPhone. La différence entre les deux modèles est clairement visible. La version mobile est plus étroite, elle comporte moins d'éléments visuels optionnels, mais elle est aussi facile à lire que la version desktop. La différence d'apparence entre les deux options mobiles réside dans l'utilisation de CSS.
La lettre de droite n'est pas différente de celle de gauche, mais aucun CSS n'a été utilisé dans sa mise en page. Certaines parties du texte se sont avérées trop petites et il est presque impossible pour l'utilisateur de comprendre ce qui y est écrit - c'est le problème des millions de lettres d'information que les propriétaires d'appareils mobiles reçoivent chaque jour.
Éléments à prendre en compte lors de la création de modèles
Créer des e-mails qui ont fière allure sur mobile est beaucoup plus difficile que d'utiliser simplement du CSS personnalisé. A noter aussi pour d'autres choses :- Sur les appareils mobiles, les modèles à une seule colonne ne dépassant pas 500 à 600 pixels fonctionnent mieux. Ils sont plus faciles à lire, et même s'il y a quelques défauts, tous les "bancs" sont en tout cas plus beaux.
- Selon les directives d'Apple, la zone cible minimale pour les boutons et les liens doit être de 44 x 44 pixels. Il n'y a rien de plus "hors d'usage" qu'un tas de petits liens difficiles d'accès sur un petit écran d'un appareil mobile.
- La police minimale affichée sur un iPhone est de 13 pixels. Il est nécessaire de prendre ce fait en compte lors de la création du texte de la lettre - si le texte du modèle est tapé dans une police plus petite, il sera automatiquement agrandi, ce qui peut casser toute la mise en page.
- La lettre doit être concise et toutes les informations importantes doivent être placées en haut de celle-ci. Le défilement sur les écrans tactiles avec votre doigt est plus difficile que sur un bureau avec une souris.
- Si possible, utilisez la propriété display: none; pour masquer les éléments de modèle facultatifs. Les boutons de partage des réseaux sociaux sont appropriés sur un ordinateur de bureau, mais ils ne sont pas toujours pratiques à utiliser sur un smartphone.
Maintenant que nous avons couvert certains des problèmes de conception importants pour les listes de diffusion mobiles, nous pouvons passer directement aux divers aspects de leur mise en page.
Composition des e-mails mobiles
En ce qui concerne les styles mobiles, le plus souvent, ce n'est pas un fichier de style séparé qui est visé, mais des requêtes multimédias. Voici à quoi ils ressemblent :
Examinons de plus près le fonctionnement de la déclaration @media. Tout d'abord, afin de créer du CSS "mobile", vous devez implémenter un critère selon lequel le client de messagerie déterminera les styles à utiliser.
Pour ce faire, l'opérateur d'écran @media only est utilisé - il indique que le client de messagerie doit être affiché à l'écran (au lieu d'être, par exemple, imprimé sur une imprimante). Après cela, dans l'exemple de code ci-dessus, nous définissons la largeur d'écran maximale de l'appareil à 480 pixels. Ceci est important car de nombreux appareils mobiles (mais pas tous) ont une zone d'affichage à l'écran de 480 pixels ou moins.
C'est pourquoi max-device-width: 480px est souvent utilisé (c'est aussi la largeur d'affichage des iPhones précédents en mode paysage), mais vous pouvez étendre la description pour couvrir d'autres tailles d'écran :
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 480px) -hauteur : 240px) (...)
Revenons au modèle d'e-mail mobile discuté ci-dessus. Voici à quoi cela ressemble dans Apple Mail :
Cet exemple utilise la classe contenttable sur des tableaux HTML contenant du texte et des images. Voici un exemple de code :
Cette classe joue un rôle intéressant - lorsque l'e-mail est ouvert sur un appareil avec un écran de 480 pixels ou plus, cela n'affecte rien. Cependant, lorsque l'écran est de 480 ou moins, la largeur du tableau est réduite à 320 pixels. Les sélecteurs d'attributs sont utilisés pour éviter un problème inhabituel dans Yahoo mail. Sinon, le CSS "normal" est utilisé. De plus, vous pouvez inclure les annonces suivantes :
@media only screen et (max-device-width: 480px) (/ * les styles CSS spécifiques aux mobiles vont ici * / table (width: 325px! important;) img (width: 325px! important;) p (display: none! important;))
Ensuite, nous examinerons des techniques plus sophistiquées pour adapter les e-mails mobiles aux appareils mobiles.
Créez des mises en page de colonnes réactives à deux pour une
L'utilisation de modèles à une colonne est un bon moyen d'optimiser vos campagnes par e-mail pour les appareils mobiles. Cela étant dit, il existe des moyens de créer des mises en page réactives à deux colonnes sans avoir à utiliser de longs CSS dans les requêtes multimédias.La disposition à deux colonnes vous permet de mettre plus de contenu en haut du message affiché dans les clients de messagerie de bureau ou Web, mais la lecture et la navigation de tels e-mails sur des appareils mobiles restent un plaisir. Vous pouvez résoudre ce problème avec le bon vieux code.
La règle d'or de la mise en page des e-mails est la suivante : "Dans la mesure du possible, utilisez HTML au lieu de CSS." Le degré de prise en charge de CSS par différents clients de messagerie peut varier considérablement, mais ils fonctionnent tous de la même manière avec HTML. Par exemple, des attributs comme align = "left" et cellpadding = "10" sont des outils beaucoup plus fiables que leurs homologues CSS float: left; et rembourrage : 10px ; ... Ce sont les attributs qui seront utilisés lors de la création de lettres au format "deux pour une colonne".
Voici à quoi pourrait ressembler une lettre similaire dans Outlook 2007 :
L'exemple ci-dessus utilise une table de conteneur de 640 pixels de large qui contient deux tables de 320 pixels qui forment des colonnes. Ces colonnes ont cellpadding = "20" - ceci est fait pour que le contenu ne colle pas aux bordures.
Lors du codage pour le Web, ils utilisent généralement float: left; pour aligner les colonnes. Cependant, align = "left" peut être utilisé à la place. Étant donné que la largeur de la table conteneur est égale ou supérieure à la largeur combinée des deux tables imbriquées, l'utilisation de HTML fonctionne bien. Vous trouverez ci-dessous un code simplifié pour un modèle similaire à deux colonnes :
|
Le résultat ressemble à ceci :
Le tableau conteneur fait 640 pixels de large, la mise en page sera donc sur deux colonnes. Mais dans le cas où la largeur de l'écran est inférieure à cela, alors le contenu de la colonne de droite sera "enroulé" sous la gauche. Si vous rendez la largeur des tableaux imbriqués égale à 320 pixels, alors lorsqu'ils sont affichés sur un appareil mobile, vous obtiendrez une lettre à une colonne qui n'a pas du tout besoin d'être "zoomée". Cet effet peut être obtenu en ajoutant une ligne de requête média au code HTML :
Premier titreMasquer le spectacle
|
Pellentesque habitant morbi ...
Chargement ...