Share
Dans ce didacticiel, je vais vous montrer comment créer un courrier électronique HTML réactif simple qui fonctionnera dans tous les clients de messagerie, y compris tous les nouveaux clients de messagerie et applications pour smartphone. Il utilise un minimum de requêtes de supports et une approche de largeur fluide pour assurer une compatibilité maximale.
Si vous recherchez une solution prête à l'emploi et professionnelle, procurez-vous l'un de nos meilleurs modèles d'e-mail réactifs sur le marché Envato. Nous proposons des centaines d'options réactives à partir de 5 USD, avec des fonctionnalités faciles à personnaliser pour vous aider à démarrer.
Les meilleurs modèles d'e-mail responsive sur Envato MarketPas ce que vous cherchez? Pas de problème, ce tutoriel va vous apprendre à construire votre propre.
Il fut un temps où les requêtes multimédia suffisaient amplement pour que les courriers électroniques réactifs fonctionnent dans les applications de messagerie iOS et Android, les deux prenant en charge les requêtes multimédia..
Depuis lors, les applications de messagerie créées pour les plates-formes iOS et Android se sont multipliées, avec différents degrés de prise en charge de méthodes de développement de messagerie réactives..
La plus récente est la dernière mise à jour de l'application Gmail pour Android, deux fois plus populaire que l'application de messagerie par défaut pour les utilisateurs d'Android (qui représentent désormais 11% du total des ouvertures). Il n'a jamais pris en charge les requêtes multimédia et ne le fait toujours pas. Cependant, il réduit désormais vos e-mails en compressant la taille de la table externe pour l'adapter à la zone d'affichage de l'écran. Il est difficile à contrôler et, lorsque l'ensemble de votre courrier électronique repose sur des requêtes multimédia pour s'afficher correctement sur un mobile, génère des résultats très désagréables..
La bonne nouvelle est que vous pouvez concevez et créez un courrier électronique qui aura fière allure dans toutes les applications de messagerie, y compris celles qui ne prennent pas en charge les requêtes multimédia. Vous pouvez le faire en utilisant une disposition fluide.
Il y a cependant quelques compromis de conception à faire. Ces jolies dispositions de colonnes égales qui empilent une seule colonne ne fonctionnent pas aussi bien avec cette méthode. Si vous pouvez apprendre à vivre sans eux, il existe des modèles très fonctionnels qui peuvent très bien fonctionner.
Voici ce que nous allons créer aujourd'hui:
Ok, commençons avec notre toile vierge.
Un simple email HTML réactif
|
Ce que nous créons ici est notre page de base avec son entête, doctype et table de conteneur avec une couleur d'arrière-plan appliquée (à la fois au corps et à une grande table d'emballage, car le style de la balise body n'est pas totalement pris en charge). Pour plus d'informations sur cette configuration de base, voir Créer un modèle d'e-mail HTML à partir de zéro..
J'ai ensuite ajouté notre table de contenu principale au centre avec une classe de 'contenu'.
Remarque: Vous remarquerez que dans ce tutoriel, je vais placer CSS dans la tête de notre document. Je place généralement les styles dans la tête lorsque je vais les réutiliser, et conserve les styles uniques en ligne.
Important: Chaque fois que vous utilisez des règles CSS dans l’en-tête de votre document, vous doit utilisez un outil pour tout mettre en ligne à la fin du processus. Si vous utilisez un service tel que MailChimp ou Campaign Monitor, ils vous proposeront automatiquement d'intégrer vos styles lors de l'importation de votre conception. Vous devez le faire car certains clients, tels que Gmail, ignoreront ou supprimeront votre Nous allons maintenant ajouter la première ligne de notre tableau - l'en-tête. Ajoutez ce qui suit pour styler la ligne que nous avons déjà créée: Et puis dans votre CSS, ajoutez le rembourrage pour l'en-tête: Nous allons maintenant créer notre toute première ligne réactive. Pour ce faire, nous créons deux tables qui "flottent" l'une à côté de l'autre en utilisant la propriété HTML "align".. Remplace notre petit "Bonjour!" Salutations avec ce qui suit: Nous créons notre table 70px et ajoutons également un peu de rembourrage qui servira de gouttière entre les deux colonnes. Le rembourrage en bas ajoute une marge de manœuvre verticale lorsque les deux colonnes s’empilent sur un support mobile.. Nous allons créer la colonne de droite en alignant à nouveau un tableau à gauche. Cette table aura une largeur de 445 pixels, ce qui nous laissera 25 pixels de côté sur le côté droit. Ceci est très important car Outlook empilera automatiquement vos tables s’il n’ya pas au moins 25 pixels à épargner sur une ligne donnée.. Tant que vous laissez au moins 25px de marge de manoeuvre, vos tables se comporteront comme prévu. Pour résoudre ce problème, vous pouvez également utiliser du code conditionnel pour faire croire à Outlook que vous avez fermé une cellule et en ouvert une nouvelle. Après la balise de fermeture de votre première table et avant la balise de table d'ouverture pour votre deuxième table, ajoutez simplement: Sur la table de droite, plus large, nous allons utiliser la même approche que celle utilisée pour notre table conteneur, qui consiste à créer une classe et à ajouter le code d'enveloppe conditionnel. Nous voulons que ce tableau ait une largeur de 100% sur le mobile, où il apparaîtra en dessous du tableau de gauche.. Vous pouvez voir ici que j'ai créé pour cette table une classe appelée "col425", notre colonne de 425 pixels de large. J'ai encapsulé le tableau dans le code conditionnel qui le renfermera dans un tableau de 425 pixels de large. Nous ajoutons ensuite notre classe à la requête multimédia que nous avons également créée pour Apple Mail.. Maintenant, dans notre cellule, nous allons ajouter la rubrique stylée. J'ai ajouté des classes à chaque cellule pour le style, ainsi que des styles que j'utiliserai plus tard pour d'autres types de texte: Notre en-tête est maintenant terminé et vous pouvez voir ci-dessous comment les deux colonnes vont s'empiler sur mobile. (Pour prévisualiser tout cela pendant que vous travaillez, vous aurez besoin de commenter temporairement les requêtes multimédia min-device-width, car elles imposent une largeur fixe sur le bureau). Pour créer une ligne de texte de colonne unique, nous ajoutons simplement une nouvelle ligne à notre table '.content'. Nous allons ajouter une classe 'innerpadding' à ces lignes avec des valeurs de remplissage réutilisables. Nous allons également ajouter une classe de 'borderbottom' pour appliquer une bordure à chaque ligne. Notre CSS pour cette section: Nous allons maintenant créer une ligne sensible exactement comme notre en-tête, mais avec des dimensions légèrement différentes, de manière à pouvoir obtenir une image plus grande.. Nous avons ajouté un bouton ici avec la classe 'Buttonwrapper'. Il contient une cellule complétée avec un jeu de couleurs d'arrière-plan, puis un lien de texte à l'intérieur. Je préfère utiliser cette méthode car elle vous permet d’avoir des boutons de largeur fluide, ce qui est très utile lors de la création d’un modèle réutilisable, où la largeur de chaque bouton sera différente à chaque utilisation. Si vous avez une largeur fixe pour vos boutons, vous préférerez peut-être utiliser le générateur de boutons Bulletproof sur Campaign Monitor.. Nos styles pour le bouton: En plus de la largeur définie pour cette nouvelle classe 'col380', nous ajouterons notre taille à notre liste de styles pour prendre en charge Apple Mail. Cela ressemble maintenant à ceci: C'est une ligne très simple. nous allons simplement définir une image à 100% de la largeur de l'e-mail et nous assurer que sa hauteur est définie pour être automatique à l'aide de CSS. Dans notre CSS: Enfin, nous allons ajouter une ligne de texte sans la bordure en bas: Pour créer le pied de page, nous allons ajouter une nouvelle ligne avec un tableau à l'intérieur. Une des lignes contiendra une autre table pour nos icônes de médias sociaux. Nous allons ajouter les styles requis pour notre pied de page au CSS: Sur mobile, c'est idéal si le bouton entier est un lien, pas seulement le texte, car il est beaucoup plus difficile de cibler un lien texte minuscule avec votre doigt. Comme il n’est pas possible d’avoir ce travail sur tous les clients de bureau (le bourrage n’est pas entièrement pris en charge sur Nous devrons enlever la couleur de la Je vais utiliser les deux Maintenant, lorsque vous appuyez n'importe où sur le bouton de couleur sur le mobile, c'est un lien! Si vous le souhaitez, vous pouvez maintenant commencer à améliorer votre mise en page en appliquant des noms de classe aux éléments que vous souhaitez contrôler, puis en créant les nouvelles règles dans la requête multimédia que nous venons de créer.. A titre d'exemple, nous allons transformer notre lien de désabonnement en un bouton, en ajoutant une classe au lien: et en ajoutant le CSS suivant à la requête multimédia: Vous pouvez également cibler les classes .innerpadding, .header et .footer afin de réduire la quantité de bourrage sur les clients prenant en charge les requêtes multimédia.. Enfin, comme toujours, assurez-vous de valider (à l’aide du validateur W3C - vous ne devriez obtenir qu’une seule erreur pour l’attribut propriétaire "yahoo" sur la balise body) et testez très bien à l’aide de périphériques live et d’un service de prévisualisation Web comme Litmus ou Email Acide. Profitez de la création d'e-mails réactifs qui ont fière allure dans chaque client de messagerie! Si vous avez besoin d'une solution professionnelle prête à l'emploi, un modèle d'e-mail réactif pourrait bien être la bonne option pour vous.. Pour amener ce que vous avez appris au prochain niveau, consultez les prochains tutoriels: Créer l'en-tête
Bonjour! .header padding: 40px 30px 20px 30px;
Ajout de la première ligne sensible
Colonne de gauche
Colonne de droite
Prévoyez au moins 25 pixels d'espace libre pour empêcher Outlook d'empiler vos tables. Arrêtez! Astuce alternative pour tromper les perspectives
Continuer…
style = "width: 100%; max-width: 425px;">
.col425 width: 425px! important;
CRÉER Magie de messagerie réactive .sous-titre taille de la police: 15px; couleur: #ffffff; famille de polices: sans-serif; espacement des lettres: 10px; .h1 taille de la police: 33px; hauteur de ligne: 38px; poids de police: gras; .h1, .h2, .bodycopy color: # 153643; famille de polices: sans-serif;
Création de la ligne de texte à colonne unique
Bienvenue dans notre email réactif! Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Dans les felis adipiscing tempus, as amet blandit ipsum volutpat sed. Le gardien de la morbi, eget accumsan dictum, les nisi libero ultricies ipsum, in posuere mauris neque at erat. .innerpadding padding: 30px 30px 30px 30px; .borderbottom border-bottom: 1px solid # f2eeed; .h2 padding: 0 0 15px 0; taille de police: 24px; hauteur de ligne: 28px; poids de la police: gras; .bodycopy taille de la police: 16px; hauteur de ligne: 22px;
Création de l'article à double colonne
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Dans les felis adipiscing tempus, as amet blandit ipsum volutpat sed. Le gardien de la morbi, eget accumsan dictum, les nisi libero ultricies ipsum, in posuere mauris neque at erat.
Réclamer le vôtre! .bouton text-align: center; taille de police: 18px; famille de polices: sans-serif; poids de police: gras; padding: 0 30px 0 30px; .button a color: #ffffff; text-decoration: aucune;
@media only screen et (min-device-width: 601px) .content width: 600px! important; .col425 width: 425px! important; .col380 width: 380px! important;
Création de l'image à colonne unique
img hauteur: auto;
Création de la dernière ligne de texte brut
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Dans les felis adipiscing tempus, as amet blandit ipsum volutpat sed. Le gardien de la morbi, eget accumsan dictum, les nisi libero ultricies ipsum, in posuere mauris neque at erat. Créer le pied de page
® Quelqu'un quelque part 2013
Se désabonner de cette newsletter instantanément
.footer padding: 20px 30px 15px 30px; .footercopy font-family: sans-serif; taille de police: 14px; color: #ffffff; .footercopy a color: #ffffff; text-decoration: souligné;
Optimisation des boutons pour mobile
balises), c’est quelque chose que j’ajoute à la version mobile en utilisant des requêtes multimédia. auquel il est actuellement appliqué, puis l'appliquez à nouveau au tag avec beaucoup de rembourrage. largeur maximale et max-device-width dans cette requête de média dans le but d'éviter un bogue dans Outlook.com sur IE9.@Media only screen et (max-width: 550px), screen et (max-device-width: 550px) body [yahoo] .buttonwrapper background-color: transparent! important; body [yahoo] .button a background -couleur: # e05443; padding: 15px 15px 13px! important; display: block! important;
Autres améliorations avec les requêtes multimédia
Se désabonner de cette newsletter instantanément body [yahoo] .unsubscribe display: block; marge supérieure: 20px; rembourrage: 10px 50px; arrière-plan: # 2f3942; border-radius: 5px; texte-décoration: aucun! important; poids de police: gras;
body [yahoo] .hide display: none! important;
Testez et partez!
Accentsconagua