20 astuces HTML et CSS de base pour les spécialistes du marketing
Publié: 2015-04-24
À l'époque (logiciel d'automatisation pré-marketing), le marketing ne nécessitait pas trop de compétences techniques. Il est devenu essentiel aujourd'hui pour le spécialiste du marketing avisé de pouvoir à la fois créer et modifier des modèles d'e-mails, des pages de destination ou des sites Web sans avoir besoin de faire appel à un développeur. Les deux compétences techniques les plus couramment utilisées pour ces tâches sont HTML et CSS . L'explication la plus simple des deux est que HTML est le code que vous utilisez pour définir les fonctionnalités de votre site ou modèle et que CSS est ce que vous utilisez pour l'habiller et lui donner une belle apparence. Chez ironspider.ca : "Vous pouvez considérer CSS comme les instructions qui indiquent à un navigateur Web comment afficher votre page Web, tandis que HTML est destiné à fournir des instructions sur ce qu'il faut afficher sur votre page Web."
Le but de cet article n'est pas de vous fournir un cours accéléré sur les bases du HTML et du CSS. Je recommande de vérifier w3schools pour cela, il est idéal pour apprendre les bases ainsi que pour des références de syntaxe rapides. Cet article est destiné à rassembler les 20 meilleurs trucs et astuces dont vous aurez probablement besoin au quotidien lors de la création d'actifs marketing.
1. Comment afficher le back-end de n'importe quel site (Chrome)
La première chose - la plus importante que vous devez savoir est de savoir comment regarder le code source d'un site et comment inspecter un élément spécifique sur une page. Cela vous aidera à identifier et à résoudre les problèmes et à comprendre comment un site est codé.
2. Construire et comprendre le fonctionnement des tableaux HTML
Les tableaux sont les éléments constitutifs de vos modèles d'e-mails et, en général, une partie cruciale du HTML que tous les spécialistes du marketing doivent connaître.
Voici un exemple de tableau très simple avec 3 lignes et deux colonnes :
Vous trouverez ci-dessous le code du tableau ci-dessus. Lisez les commentaires en marron pour comprendre le fonctionnement du tableau. <!--Les commentaires sont dans ce format-->
3. Ajouter des sauts de ligne <BR>
Cette règle simple m'a aidé avec les problèmes de texte les plus tenaces. Lorsque votre texte ne s'espacera tout simplement pas correctement - ajouter un saut de ligne ou <br> déplacera votre texte à la ligne suivante.
4. Ajout d'une ligne horizontale <HR>
L'ajout d'une ligne horizontale est un excellent moyen de séparer différentes zones de texte. Il est très couramment utilisé dans les newsletters par e-mail ou dans les pages de destination où vous souhaitez séparer les lignes.
5. Styliser une ligne horizontale avec CSS
La ligne horizontale par défaut <hr> semblera généralement étrange avec votre conception si vous n'utilisez pas les polices par défaut. Lors de la création d'une page de destination récemment, j'ai trouvé ce site pratique qui a quelques styles différents de lignes horizontales avec la classe CSS définie pour vous - vous pouvez simplement copier et coller le code de celui que vous souhaitez utiliser dans l'en-tête de votre modèle et vous y référer dans le modèle.
Dans l'exemple ci-dessous, la colonne en haut à droite définit le style hr dans les balises <head> et </head>. La gauche est le html, qui fait référence au style hr, et la partie inférieure droite est le résultat.
6. Identifier les couleurs et la police
Il est utile de savoir comment déterminer le code hexadécimal des couleurs que vous trouvez sur le Web. Vous pouvez utiliser l'extension chromée ColorZilla pour faire ça.
Vous pouvez ensuite utiliser la couleur de la police dans votre html ou css : <font color="#82B900"> ou dans la création d'images (word, powerpoint, photoshop sont tous des exemples de programmes courants qui vous permettront de colorer des éléments avec un code hexadécimal spécifique)
Il est également très utile de pouvoir identifier la police sur différents sites - WhatFont est super pour ça. Les polices par défaut comme Verdana peuvent être référencées comme ceci : <font face="verdana" color="green">Ceci est du texte !</font>. Vous pouvez également intégrer des polices personnalisées à l'aide de Google Fonts gratuites - Voir # 15 pour savoir comment procéder.
Découvrez des extensions chromées plus utiles pour les spécialistes du marketing dans mon article précédent ici)
7. Bloc Div pour Gmail
Gmail ajoute parfois de l'espace supplémentaire aux cellules de tableau qui ne contiennent qu'une image. Pour résoudre ce problème, vous pouvez ajouter à votre balise d'image comme ceci : <img src="image.jpg" />. Ci-dessous, à quoi cela ressemble avant (Exemple de Campaign Monitor )
Après:
8. Création et modification d'une URL d'image
L'exemple ci-dessous montre comment ajouter une image - inclure la balise alt et spécifiez la hauteur et la largeur. La balise d'image sous <img> spécifie la source - une URL où votre image est stockée, la balise alt - qui est ce qui est affiché à la place de l'image en cas de problèmes techniques.
9. Comment ajouter des marges
L'exemple ci-dessous montre comment spécifier les marges et le résultat. Dans l'image ci-dessous - la deuxième phrase à droite a une marge de 2 cm (en haut) 4 cm (à droite) 3 cm (en bas) et 4 cm (à gauche) définie comme ceci : marge : 2 cm 4 cm 3 cm 4 cm.
10. Comment faire référence à une classe CSS dans les éléments HTML
Dans l'exemple ci-dessous, nous avons d'abord défini la classe ".center" dans la tête. Vous pouvez ensuite définir les éléments HTML h1 et p sur class=center. Cela signifie que maintenant vos balises HTML extraient le format CSS de la classe que vous avez définie ci-dessus.
Afin de définir un élément HTML spécifique pour utiliser une classe, vous pouvez voir ci-dessous que j'ai défini p.center comme étant la classe. La balise h1 - ne sera pas affectée même si vous faites référence au centre de classe dans la balise h1. Ce n'est que lorsque vous appelez le centre de classe dans la balise ap qu'il suivra les règles définies pour la classe centrale.
11. Comment ajouter des styles CSS
Il existe trois façons d'insérer des styles CSS. Une feuille de style peut être créée dans n'importe quel éditeur de texte et enregistrée en tant que fichier .css. Lorsqu'un navigateur lit une feuille de style, il formate les éléments de la page comme spécifié dans cette feuille de style. L'autre option consiste à styliser des éléments HTML individuels en ligne.
A. Feuille de style interne
Une feuille de style interne est utile lorsqu'un modèle a un style unique. Vous pouvez définir des styles internes entre les sections <head> et </head> de votre HTML dans les balises <style>.
B. Feuille de style externe
Une feuille de style externe est idéale si vous souhaitez appliquer et modifier le style de plusieurs pages différentes à la fois. Vous pouvez intégrer une feuille de style externe dans plusieurs pages comme ceci :
<head> <link rel="stylesheet" type="text/css" href="myfilename.css"> </head>
C. Styles en ligne
En utilisant des styles en ligne, vous pouvez ajouter des styles spécifiques à chaque élément avec votre code HTML. L'attribut style peut contenir n'importe quelle propriété CSS. Dans l'exemple ci-dessous, j'ai changé la couleur et la marge gauche d'un élément h1 en ligne.
12. Comment héberger votre feuille de style dans Google Drive
Téléchargez d'abord votre fichier CSS sur Google Drive. Ensuite, partagez le fichier et définissez l'autorisation sur "Toute personne sur Internet peut trouver et afficher" ou dans l'ancienne version du lecteur "Public sur le Web".
Saisissez le lien - vous devrez le modifier un peu. Le lien de partage devrait ressembler à :
https://docs.google.com/file/d/file_code/edit?usp=sharing
Changez maintenant le lien en :
https://googledrive.com/host/file_code
Dans mon exemple ci-dessus :
https://drive.google.com/file/d/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk/edit?usp=sharing
Devient:
https://googledrive.com/host/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk
Pour intégrer le fichier CSS externe dans votre modèle :
13. Utilisation d'unités évolutives
Utilisation de l'unité "em" au lieu de px pour rendre des éléments tels que la police, la hauteur de ligne ou les marges évolutifs sur une multitude d'appareils. L'exemple ci-dessous des écoles W3 vous montre comment définir la police de la balise H1 sur 2em - cela signifie que la police affichée sera deux fois plus grande que la police par défaut du navigateur.
L'utilité de l'unité em ne se limite pas aux tailles de police. Toutes les longueurs - y compris le rembourrage et les marges autour des éléments peuvent être spécifiées en ems. Cela rend vos modèles adaptables à n'importe quelle taille d'appareil, ce qui est crucial avec la croissance rapide de la navigation mobile.
14. Rembourrage
L'image ci-dessous de goer.org est une excellente explication sur le fonctionnement du rembourrage et des marges :
La définition des écoles W3 vous montre comment spécifier le rembourrage :
15. Utilisation des polices Google dans vos styles CSS
Les polices Google sont des polices open source gratuites que vous pouvez référencer dans votre CSS. Après avoir sélectionné les polices souhaitées sur https://www.google.com/fonts vous pouvez référencer la feuille de style dans les balises <head> de votre code. Voir la capture d'écran ci-dessous.
Vous pouvez ensuite vous référer à ces polices lors du style de chaque élément de votre modèle. Dans l'exemple ci-dessous - j'ai récupéré la police "Lato" en ajoutant le code que Google Fonts m'a fourni, puis je l'ai utilisé pour définir les styles body, h1 et h2 :
16. Ajustements de base pour rendre votre modèle réactif
Pour créer une image d'en-tête d'e-mail HTML réactive et fluide dans toutes les vues de tous les appareils, vous devez utiliser des tableaux HTML avec un CSS intégré de 100 % de largeur et une hauteur automatique. Vous pouvez aller plus loin et ajouter des requêtes multimédias mobiles dans votre feuille de style, qui indique à tous les clients de messagerie mobiles et navigateurs d'afficher le contenu avec la largeur en px que vous avez définie. Cette méthode de base peut être appliquée à toutes les images de votre modèle HTML, les transformant en responsive. (Conseil du chapeau : Nigel, concepteur de SEP)
17. Construire et styliser un formulaire personnalisé
Un formulaire HTML est créé à l'aide de balises <form>. Vous pouvez ensuite utiliser la balise <input> pour créer divers champs tels que des champs de texte, des cases à cocher, des boutons radio, des boutons d'envoi, etc. Un exemple de champ serait, <input type="text">. Cela définit un champ de saisie d'une ligne dans lequel un utilisateur peut saisir du texte. Vous pouvez trouver une liste complète des champs que vous pouvez créer ici .
Une fois qu'il est créé, vous allez vouloir styliser votre formulaire. J'ai récemment découvert ce site qui vous fournit le code pour quelques formulaires de style différents. Dans l'exemple ci-dessous, vous pouvez voir une partie du code (ce n'est qu'un extrait de celui-ci) et le formulaire qu'il produit en dessous.
Dans l'exemple ci-dessus, une fois que vous avez défini la classe dans l'en-tête, vous pouvez faire référence à ce style en ajoutant la classe à la balise HTML <form> comme ceci :
18. Comment valider un formulaire et afficher les messages d'erreur en ligne
Cet exemple explique comment faire en sorte qu'un formulaire renvoie "Ce champ est obligatoire" et surligne les champs en rouge si l'utilisateur laisse des champs vides.
J'admets que j'ai dû crowdsourcer celui-ci car je ne suis pas très familier avec Javascript (merci à notre développeur Scott) mais je pense que c'est très utile de pouvoir l'implémenter.
Vous devez ajouter un écouteur d'événement au bouton Soumettre afin que le script puisse s'exécuter avant que le formulaire ne soit soumis. Après cela, vous parcourez une boucle pour vérifier les champs requis pour vous assurer que tout est rempli (vous pouvez le faire facilement en ajoutant une classe spécifique à chaque champ que vous souhaitez valider).
S'il y a des erreurs (champs non remplis), nous devrons définir un indicateur indiquant qu'il y en a. Si cet indicateur est défini, nous devons empêcher la soumission du formulaire et ajouter une mise en surbrillance des erreurs pour l'utilisateur final. S'il n'y a pas d'erreurs, nous pouvons continuer avec le formulaire comme d'habitude !
// The ID of the submit button on the form (in our example) was 'get-quote' so we bind our listener to that
jQuery("#get-quote").click(function() {
// Declare and reset our error value each time the script runs
var error = false;
//'input-validate' is the class I would set on each of the fields I wanted to check
jQuery(".input-validate").each(function() {
// Get the value of the current item in the loop
var isSet = jQuery(this).val();
// Check to see if the variable is an empty string or a null value
if (isSet == "" || isSet == null) {
// Indicates we found an error
error = true;
}
// This adds our user-facing error highlighting
// We run this within our .each() loop so we can use jQuery's 'this' selector to modify the current item in the loop
If (error == true) {
// This adds a red border around the element with an error
jQuery(this).css("borderColor", "#ff0000");
// This changes the placeholder text of the form element
jQuery(this).attr("placeholder", "This field is required");
}
// If no errors are found we need to remove our past error highlighting
else {
// This returns our borders to their original colour
// There's no need to overwrite 'placeholder' this time because the user will have done that themselves
jQuery(this).css("borderColor", "#3c3c3c");
}
});
// If we have any errors we need to stop the form from being submitted
If (error == true) {
event.preventDefault();
}
// If there are no errors we proceed with submission
else {
jQuery("#get-quote").submit();
}
});
Les éléments du code ci-dessus peuvent être modifiés pour s'adapter à votre cas d'utilisation spécifique.
19. Alignement des images
Pour aligner une image, il vous suffit d'ajouter "bas", "milieu", "haut", "droite" ou "gauche" à la balise <img> Dans l'exemple ci-dessous, vous pouvez voir ce qui se passe lorsque nous les utilisons. que ceux-ci ne sont pas pris en charge dans HTML 5 (écoles W3 )
20. Colspan et Rowspan
Colspan vous permet de créer des données de table qui s'étendent sur plusieurs colonnes. Dans l'exemple ci-dessous, vous pouvez voir ce qui se passe lorsque les données de la 4ème ligne ("Total Savings : 200 $") sont définies pour s'étendre sur deux colonnes.
Rowspan vous permet de créer des données de table qui s'étendent sur plusieurs lignes. Dans l'exemple ci-dessous, j'ai créé une colonne supplémentaire appelée "Total Savings" et défini la valeur "$200" sur deux lignes.
Conclusion
Ce n'est en aucun cas une liste complète des choses que vous devez savoir. Il existe de nombreuses ressources que vous pouvez utiliser pour en savoir plus, mais le plus important est de pratiquer. J'ai beaucoup appris en me lançant simplement, en faisant des ajustements et en prévisualisant les résultats (assurez-vous de créer une copie que vous pouvez casser sans aucune répercussion). JS violon est un outil en ligne gratuit qui vous permet d'ajouter du HTML, du CSS et du Javascript et d'afficher le résultat combiné. Je l'ai utilisé pour illustrer plusieurs exemples dans ce post et je recommande fortement de l'utiliser pour jouer avec le code.
Bonne construction et démolition !
* Travail d'image via Kaptain Kobold , nidhug 