Share
Les courriels Tuts + (lettres d’information, résumés, etc.) ont récemment fait l’objet d’une refonte complète, avec notamment de nouveaux modèles et une nouvelle plate-forme. Cette étude de cas expliquera comment je les ai construits en HTML et CSS, à partir des dessins de la première partie de cette série..
Lorsque le moment est venu de commencer à créer les nouveaux modèles brillants de courrier électronique Tuts +, j'ai eu la chance de bien connaître les conceptions. Au cours de la phase de conception, Ian m'avait informé des décisions importantes et m'avait posé de nombreuses questions pour m'assurer d'éviter les pièges classiques du courrier électronique. Ce processus a été une excellente base pour moi et j'étais prêt à plonger directement lorsque les dessins ont été terminés.
Ian m'a envoyé les dessins, un aperçu des dispositions, un guide pour la disposition de la grille et un guide de style avec toutes les tailles et couleurs de police nécessaires. J'étais prêt à commencer.
Ma première étape est toujours de dessiner. Le but de ceci est d'identifier tous les modules distincts, en ignorant les différences cosmétiques mineures. Ce processus me donne un dernier ensemble de modules clés à construire que je peux travailler un à un pour construire la structure principale..
Une fois ceux-ci identifiés, dans de nombreux cas, je les construisais tous sur une seule page avant de les séparer à un stade ultérieur, mais les présentations sont assez difficiles à revoir dans cet état. Au lieu de cela, j'ai développé chaque mise en page selon les dessins afin qu'ils puissent être revus et approuvés plus facilement.
En me référant à mon résumé esquissé des modules, j'ai pu garder à l'esprit le moment où un module devait être réutilisable dans plusieurs modèles et le construire en conséquence. Plus tard, je mettrais en place des classes sur le corps de chaque variante, comme var-admin et dig-var, me permettant de créer des styles spécifiques à chaque mise en page.
J'ai commencé par définir certaines variables LESS pour les éléments que je savais utiliser encore et encore, comme les couleurs et les mesures..
Un guide sur la plupart des styles typographiques Certaines de mes variables (en syntaxe LESS) sont présentées ci-dessous.
// Variables @ bg-body: # f2f2f2; @ palette-text: # 58595a; @ palette-navy: # 212a34; @ palette-design: # c94e4b; @ code-palette: # 4cc1be; @ palette-web: # 49b293; @ palette-photographie: # 8360a8; @ palette-game: # 72BF40; @ palette-computer: # 5d7dba; @ palette-business: # f38844; @ palette-3d: # f95858; @ palette-music: # 56a4ca; @ palette-footer: # 5a6e7a; @ palette-address: # 999999; @ divider-color: #EAEAEA; @ link-color: # 136fd2; @ alt-color: @ palette-text; @width: 640px; @ gouttière: 53px; @ content-width: @width - (@ outer-gouttière * 2); @ unité de grille: 16px; .rounded (@radius: 1px) border-radius: @radius; -webkit-border-radius: @radius;
Je prends toujours mes couleurs avec palette pour les garder ensemble. Cela me permet de choisir plus facilement une couleur dans le menu déroulant des suggestions qui apparaît dans Sublime Text:
La prochaine étape importante a été la configuration des polices Web utilisées dans les conceptions. La police de caractères est Roboto, disponible sur Google Fonts. J'ai donc ajouté cette balise à la liste. du modèle:
Ceci est généré par Google Fonts et des liens vers leurs CSS pour les quatre poids différents de Roboto que nous utilisons..
J'ai appliqué la police à la balise body et à ma table principale pour les clients qui ignorent la balise body ou suppriment sa mise en forme..
body, .wrapper font-family: 'Roboto', sans-serif;
Ensuite, pour empêcher Outlook 2007-2016 sous Windows d’afficher Times New Roman, comme il a tendance à le faire face à une police de caractères inconnue, j'ai configuré un code conditionnel réservé à Outlook dans le du modèle:
Cela garantit que chaque instance de la police Web est remplacée dans Outlook par un sans-serif. Je l'applique aux tableaux et aux divs, les deux seuls éléments utilisés pour contenir du contenu dans le modèle. Il n'est pas nécessaire d'aller à un niveau inférieur à celui-ci, car toutes les autres balises hériteront de cela dans Outlook..
Ensuite, c'était sur le codage structurel. J'ai commencé avec le premier module que j'avais esquissé: le générique. Le logo constituait un défi, car pour certains des modèles, il est légèrement différent sur mobile:
Pour ce faire, sur mobile, j'ai caché le logo principal et le texte en haut. J'ai aussi caché le logo et ajouté la petite feuille en tant qu'image d'arrière-plan au titre..
.logo img display: none! important; .logo background-image: url (images/[email protected]); hauteur: 17px; position de fond: centre centre; taille de l'arrière-plan: 15px 17px; répétition de fond: non répétée;
La section suivante que j'ai abordée était l'article «héros» dans les courriels Digest; La première partie délicate est ici les étiquettes. Dans les dessins, ils apparaissent à côté du texte du titre sur le bureau, mais au dessus de le texte sur mobile. Pour y parvenir dans le code, nous pouvons utiliser certaines propriétés d’affichage afin de les déplacer..
D'abord, j'ai créé la balise de titre avec le contenu à l'intérieur divisé en deux étendues, une pour le texte et une pour l'étiquette.
Utilisation de courbes dans Adobe Photoshop COURS EN VEDETTE
En ce qui concerne le style, le .texte span hérite du style h2, puis du .étiquette span est stylé séparément pour le rendre plus petit et lui donner un fond coloré:
.label display: inline-block; marge gauche: 5px; rembourrage: 3px 8px; alignement vertical: 4px; border-radius: 3px; -webkit-border-radius: 3px; couleur: #ffffff; taille de police: 8px; hauteur de ligne: 10px; style de police: normal; espacement des lettres: 0.1em;
Ensuite, à l'aide de requêtes multimédia, nous échangeons les éléments dans de plus petites fenêtres:
Écran @média et (largeur maximale: 700px) h2 display: table! important; h2 .text display: table-footer-group! important; h2 .label margin-bottom: 12px! important;
Le h2 est notre conteneur, et nous l’avons configuré pour s’afficher sous forme de tableau afin que nous puissions dire au .texte span pour agir comme le groupe de bas de page de cette table et aller tout en bas de la mise en page. le .étiquette puis affiche en haut, et nous ajoutons une marge en dessous pour lui donner une marge de manœuvre.
Sans surprise, Outlook sous Windows (2007-2016) ne souhaitait pas afficher les étiquettes correctement, car il ne respectait pas le rayon de la bordure et n'aimait pas non plus ajouter de remplissage aux éléments incorporés. Les résultats n'étaient vraiment pas bons. J'ai donc configuré un autre style pour Outlook que j'ai placé dans du code conditionnel dans le modèle:
Cela signifie que dans Outlook, ils apparaissent sous forme de texte coloré simple:
Le modèle promotionnel a une caractéristique très distinctive: un héros de bout en bout avec une image d'arrière-plan.
Nous remercions Marco Goran Romano pour la brillante image utilisée comme espace réservé Les images d'arrière-plan dans les e-mails ne sont pas prises en charge partout. Les deux principaux clients de messagerie posant problème sont Outlook 2007-2016 (Windows) et Gmail..
Perspective n'affiche pas du tout les arrière-plans normaux, nécessitant un langage de balisage vectoriel spécial pour les faire fonctionner. (Le fichier backgrounds.cm de Campaign Monitor est un excellent outil pour générer ce code). Le problème, cependant, est que vous vous retrouvez avec deux blocs de code: un en HTML et un en VML. Cela présente un risque lorsque vous savez que les autres utilisateurs doivent pouvoir mettre à jour facilement l’image d’arrière-plan: si quelqu'un essaye de le faire sans lire correctement les instructions, il risque de ne pas se tromper..
Gmail affiche des images d’arrière-plan, mais ne respecte pas les taille de fond ou position de fond propriétés, ce qui peut rendre leur style assez difficile.
Nous avons examiné les numéros d'abonné et avons pu passer l'appel sur Outlook: ce serait bien si les utilisateurs d'Outlook voyaient une couleur de repli solide à la place de l'image..
Pour les utilisateurs de Gmail, nous aurions besoin de définir des règles concernant les images acceptables lorsque les modèles sont utilisés. L'arrière-plan doit être soit un arrière-plan répétitif homogène, soit configuré de manière à ce qu'il soit toujours parfait à 100%, épinglé au coin supérieur gauche..
Fait intéressant, Gmail Est-ce que support vertical position de fond propriétés sur le côté gauche: en haut à gauche , en bas à gauche et centre gauche . Malheureusement, vous ne pouvez pas positionner horizontalement, ce qui est généralement ce que vous voulez faire en le faisant afficher centre centre .
Sur certains des blocs d'annonces, nous avons pu avoir des images d'arrière-plan dans Gmail, car elles sont épinglées en bas à gauche. Ces blocs sont également revenus à une couleur d'arrière-plan unie dans Outlook.
J'ai joué avec deux façons d'obtenir la marge supérieure négative sur le masthead au travail, où la boîte blanche de contenu apparaît superposée sur le masthead lui-même.
En développement Web, vous ajouteriez un négatif haut de la marge dans la zone de contenu, époussetez vos mains et continuez votre journée.
En développement de courrier électronique, cependant, cela n’est pas possible. Une poignée de clients de messagerie ne prend en charge les marges négatives, ce qui laisse de nombreux clients courants (comme Gmail, Yahoo et Outlook.com)..
Cela restait cependant notre première option: utiliser un négatif marge supérieure en tant qu'amélioration progressive, qui s'afficherait avec une marge de 0 dans tous les clients non pris en charge (voir ci-dessous à gauche). L'inconvénient est que beaucoup de clients verraient cette version sans marge et la mise en page aurait certainement perdu quelque chose sans elle..
L’autre possibilité consistait à simuler la marge négative en créant un tableau blanc vierge de hauteur et de largeur correctes. L'inconvénient de cette approche est que l'application Gmail affiche souvent de minuscules hairlines lors de la réduction de contenu sur mobile où le contenu est plus clair sur un arrière-plan sombre ou inversement. Ce ne sont pas réellement des lignes ou des frontières, mais juste des problèmes minuscules qui ne peuvent pas être corrigés avec du code. Nous avons décidé d’accepter ce scénario, car il a profité au plus grand nombre de lecteurs et les traits de cheveux étaient généralement imperceptibles. Nous avons également décidé de garder un œil sur la question et de la revoir si nous n'étions pas satisfaits des résultats. (Malheureusement, ces modèles n'ont pas pu être générés à l'aide de la méthode hybride fluide, car MailChimp et Campaign Monitor posent de gros problèmes.)
Pas de chevauchement
Chevauchement, avec la petite ligne de Gmail entre les sectionsJe savais que je remettrais les modèles à Ian pour qu'il les intègre avec plusieurs plates-formes d'envoi d'email: MailChimp et Moniteur de campagne. Comme mon code devait bien fonctionner avec les deux langages de template, j'ai suivi quelques astuces pour rendre ce processus aussi fluide que possible..
Note de l'éditeur: depuis la phase de conception et de développement, nous sommes passés de MailChimp à l’utilisation de Campaign Monitor. Cela dit, les conseils suivants sont très utiles.!
Par exemple, avec le style du texte, j’ai tout appliqué à la Les modèles de moniteur de campagne nécessitent une L’un des modèles devait disposer d’un ensemble d’en-têtes de couleurs différentes pour chaque sujet pouvant être choisis lors de la création d’un bulletin d’information dans MailChimp. J'ai configuré un lot de styles de titre pouvant être sélectionnés à partir d'une liste déroulante dans MailChimp, en utilisant la syntaxe appropriée pour définir leur style. Mais… J'ai fourni ceci à Ian qui a découvert que cela ne fonctionnait pas du tout; aucun de ces styles de titre n'apparaissait dans la liste déroulante lorsqu'il a modifié le texte. Il a bricolé avec cela et a découvert que MailChimp n’affiche pas ces options en tant que styles de titre sélectionnables, à moins qu’ils ne possèdent une sorte de propriété liée à la police, telle que Cela ne fonctionnait pas non plus, car je l’avais fourni séparément, et tout code de modèle MailChimp spécial pour les zones modifiables ou les styles personnalisés doit apparaître dans la liste. Maintenant que toutes nos présentations ont été visualisées et approuvées, que les problèmes ont été résolus et que les compromis ont été résolus, il était temps de terminer les tests et de préparer tous les fichiers en vue de leur déploiement.. Je me suis mis à faire beaucoup de tests finaux exténuants dans Litmus et Email on Acid. J'utilise Trello pour suivre les exigences, les tâches et les bogues pour chaque projet sur lequel je travaille. J'ai travaillé sur mes listes de bogues et de tâches jusqu'à ce qu'il ne reste plus rien et que les fichiers soient prêts à être déployés. L’équipe d’Envato souhaitait pouvoir plonger dans le code pour mélanger et faire correspondre différentes mises en page. Je devais donc fournir des commentaires HTML et CSS clairs, tout en veillant à ce que le transfert de modules entre modèles ne provoque pas de catastrophe majeure.. J'ai configuré chaque modèle avec sa propre classe de corps: Et ensuite, configurez une classe qui pourrait être ajoutée pour basculer facilement entre un fond blanc et gris: J'ai également séparé les styles spécifiques à la mise en page (mobiles et de bureau) en feuilles de style individuelles pour économiser la taille du fichier: J'ai donné des instructions pour ajouter un lien vers chaque feuille de style où des éléments de cette mise en page étaient utilisés. Par exemple, si un module Digest est porté sur le modèle Newsletter, le lien CSS Digest doit être ajouté au fichier. Pour les éléments communs, tels que la barre et les blocs d'annonces, je me suis assuré que le style était complètement indépendant de la mise en page, de sorte qu'ils puissent être déplacés librement.. J'ai inclus toutes ces instructions dans un fichier README et je l'ai compressé avec tout le code HTML et les images à envoyer.. Et puis on a fini! J'ai tout envoyé à Ian, qui a lui-même entrepris le reste de l'intégration. Il est un peu fastidieux de remettre des modèles de fichiers sans avoir la possibilité de tester et de réessayer de manière obsessionnelle au cours de l'intégration, mais j'avais la plus grande confiance en Ian, bien sûr.! Une fois que son travail était terminé et qu'il était temps de commencer à envoyer, Ian a envoyé des copies de test à mes comptes Litmus et Email on Acid afin que je puisse passer en revue les aperçus de rendu et signaler les problèmes. Quelques images de fond ont été déposées ici et là, que nous avons corrigées avant que les modèles ne soient enfin prêts à être envoyés.. Dans la prochaine et dernière partie de cette série, nous porterons nos modèles statiques à un niveau supérieur, en montrant comment nous les avons intégrés dans Campaign Monitor.! , pas un seul de ses enfants, de sorte que si les cellules ou les paragraphes étaient convertis en zones modifiables, il n'y avait aucun risque de perdre le style où que ce soit. Le contenu de la table hérite du style du texte de son style pour tous les clients de messagerie. La seule exception est le courrier AOL, qui échoue souvent
Couleur propriété sauf si vous placez cela sur la cellule individuelle. Utiliser des paragraphes pour le texte
multiligne L'élément à définir lorsque vous souhaitez un bloc de texte modifiable qui permette la rupture de ligne, le gras / italique / soulignement, le texte sélectionné lié, etc. Il enveloppe également automatiquement tout le texte à l'intérieur du multiligne avec un p balise, qui peut vraiment casser votre mise en page si vous n'avez pas autorisé les paragraphes. Lorsque vous utilisez un saut de ligne dans Campaign Monitor, il mettra fin au paragraphe actuel et en commencera un nouveau. MailChimp ne le fait pas, et lorsque vous créez un saut de ligne, il ajoute simplement un Rendre les variantes sélectionnables par l'utilisateur
@style blocs:/ ** * @style topic-design * / .topic-design color: # c94e4b; .topic-design a color: # c94e4b; / ** * @ style style code de sujet * / .topic-code color: # 4cc1be; .topic-code a color: # 4cc1be; / ** * @ style style-web * / .topic-web color: # 49b293; .topic-web a color: # 49b293; / ** * @ style sujet-photography * / .topic-photography color: # 8360a8; .topic-photography a color: # 8360a8; / ** * @style topic-game * / .topic-game color: # 72BF40; .topic-game a color: # 72BF40; / ** * @style topic-computer * / .topic-computer color: # 5d7dba; .topic-computer a color: # 5d7dba; / ** * @style topic-business * / .topic-business color: # f38844; .topic-business a color: # f38844; / ** * @style topic-3d * / .topic-3d color: # f95858; .topic-3d a color: # f95858; / ** * @style topic-music * / .topic-music color: # 56a4ca; .topic-music a color: # 56a4ca;
famille de polices ou poids de la police . de votre modèle; ce ne peut pas être un fichier externe. Donc, nous avons ajouté un poids de police: gras déclaration à nos styles de titre, a sauté le CSS dans la tête, et a tout fonctionne.Essais finaux et conclusion
Aimer Trello pour la gestion des tâches Mise en place d'un kit de modèles
tête du modèle Newsletter avant de copier le module HTML.
Livrables par courrier électronique livraison
Liens connexes
Accentsconagua