Élaboration d'un e-mail réactif en HTML

1. Bienvenue !: Bonjour, je m'appelle Vanessa Bias et je vais vous enseigner le développement d'e-mails réactifs. Votre projet de classe sera de prendre un modèle d'e-mail HTML statique et de le rendre évolutif et mobile appareils en utilisant les techniques que j'utilise dans mon travail quotidien. Cette classe s'adresse aux élèves qui comprennent les bases du HTML et du CSS. Mais je vais vous expliquer les concepts utilisés dans ce cours au fur et à mesure. Pour une amorce sur le développement de courriels HTML statiques, vous pouvez voir ma classe de sculpture précédente, intro au développement de courriels HTML. Commençons. Happy codage. 2. Étape 1 : Ajouter les requêtes de médias: Vous pouvez télécharger ces fichiers de projet à partir du bas et la classe Skill Share. Donc, comme vous pouvez le voir, ce fichier e-mail n'est pas mobile responsisisif.Donc, nous allons commencer par ajouter les requêtes médias à cet e-mail. Vous pouvez ajouter autant de points d'arrêt que vous le souhaitez. Mais pour ce cours, nous allons juste couvrir un point d'arrêt. Donc, à l'intérieur des balises de style, nous allons ajouter une requête multimédia avec une largeur maximale égale à 480 pixels. Donc, généralement lorsque vous concevez pour le Web, vous voulez vous assurer que vous concevez d'abord le mobile , puis passez aux points d'arrêt de votre bureau. Mais pour le courrier électronique, nous faisons généralement le bureau d'abord, puis le décomposer pour mobile. Donc, si vous voulez vous assurer que votre requête multimédia fonctionne, un bon test consiste à changer la couleur d'arrière-plan ou quelque chose de cette nature afin que vous puissiez réellement voir que la requête multimédia est ON et cela aidera à dépanner plus tard la ligne si votre CSS ne fonctionne pas. Donc, nous allons faire une couleur de fond de rouge et ici j'ai ajouté le sélecteur universel, donc il va changer la couleur de fond de chaque élément dans l'e-mail. Alors je vais « Enregistrer » cela et revenir au navigateur et « Actualiser ». Lorsque je rends la taille de l'écran plus petite, vous pouvez voir qu'il a changé en couleur d'arrière-plan rouge. Donc, cela me dit que la requête média fonctionne. Donc nous n'avons plus besoin de ça, donc nous pouvons effacer ça et je vais appuyer à nouveau sur « Enregistrer ». Dans la vidéo suivante, nous commencerons à décomposer cet e-mail à une taille mobile. 3. Étape de projet : Ajoutez la propriété de bloc d'affichage: Maintenant, nous allons changer le CSS pour faire cette mise en page à trois colonnes de sorte que chaque colonne unique empile sur une taille d'écran mobile. Pour commencer, nous allons créer une ligne pour les tables, les lignes de tableau et les cellules de tables et nous allons lui donner une largeur de 100 % pour qu'elle soit évolutive et nous allons lui donner une propriété d'affichage avec la valeur de bloc. Ce que cela va faire, c'est la clé juste ici pour s'assurer que tout se passe sur mobile. Ensuite, parce que nous avons quelques images qui sont plus larges que d'autres et que nous avons quelques images qui sont plus larges que le point d'arrêt, nous allons rendre ces images évolutives en donnant à cela une largeur de 100 pour cent et nous actualisons et redimensionner l'écran et vous pouvez voir que les colonnes sont maintenant empilées les unes sous les autres. Mais nous avons toujours une barre de défilement pour gauche à droite et ils ne se contiennent pas vraiment à l'intérieur de la table. Ce que nous pouvons faire maintenant est de corriger qui est d'ajouter un sélecteur universel, donc l'astérisque, et nous allons lui donner une propriété de dimensionnement de boîte avec la valeur de border-box et ce que cela fait, c'est qu'il incorpore le remplissage et la bordure dans le éléments largeur totale. Donc ça va le faire pour tout. Donc, nous revenons en arrière et appuyez sur Actualiser, et vous pouvez voir que nous n'avons plus de barre de défilement et les images sont maintenant contenues dans le tableau. 4. Étape du projet : Ajouter des cours CSS: Il y a des éléments spécifiques que vous souhaitez cibler en utilisant CSS plutôt que de simplement cibler chaque image ou chaque table. Donc, dans ce cas, nous avons l'image est définie sur 100 pour cent Web, donc ils sont évolutifs. Mais malheureusement, cela cible également les icônes des médias sociaux que nous ne voulons pas être 100 pour cent avec au bas de l'e-mail. Donc, nous pouvons utiliser une classe CSS pour corriger cela. Donc, si nous faisons défiler vers le bas du HTML, nous pouvons ajouter une classe, et nous allons donner à cette classe un nom qui est reconnaissable plus tard. Donc, nous allons faire des icônes sociales et nous pouvons simplement copier cela afin que vous n'ayez pas à le réécrire, et le coller sur chacune de ces images. Enregistrer et faire défiler vers le CSS et la tête, et nous pouvons ajouter à l'intérieur de la requête multimédia cette classe avec une largeur de, Je veux dire environ 30 pixels sons droit. Nous voulons qu'ils soient tous en mesure de s'intégrer dans une seule ligne et d'enregistrer puis de rafraîchir la page, et vous pouvez voir que les images ou les icônes des médias sociaux sont maintenant tous les 30 pixels. Nous n'avons donc qu'à faire cette seule règle CSS pour les cibler tous. Parfois, ce n'est pas une image que vous voulez changer, parfois il y a d'autres choses. Par exemple, cette mise en page de trois colonnes ici et cette disposition de deux colonnes, celle-ci a, lorsque vous le redimensionnez, moins de remplissage sous les images ou moins d'une marge sous les images que les autres éléments de colonne là-bas. Donc, je veux ajouter un peu d'espace au-dessus ce sous-titre afin qu'il soit cohérent avec l'apparence des autres. Donc, ce que nous pouvons faire est, je pense que nous devrions ajouter une marge à cette image ici pour pousser ce sous-titre. Donc, si nous allons le trouver ici, observatoire, et nous pouvons donner à cela une classe de, disons image observatoire et sauver. Ensuite, sauvegardez dans le CSS. Pourrait ajouter une image observatoire, puis nous pourrions faire un fond de marge de, disons environ 15 pixels et enregistrer et actualiser. Maintenant, vous pouvez voir que l'espace au-dessus du sous-en-tête et au-dessous de l'image est cohérent avec les autres colonnes. Mais lorsque vous redimensionnez à la largeur complète du bureau, il n'y a pas eu de changement. Il ne s'applique qu'à la taille du mobile. Donc, dans la vidéo suivante, couvrira l'utilisation de l'affichage aucun pour quand nous voulons cacher un élément que nous ne voulons pas voir sur une taille d'écran mobile. 5. Projet Étape 4 : Cde les éléments inutilisés: Parfois, il y a un élément de votre e-mail que vous ne voulez pas afficher sur les tailles mobiles. Cela pourrait être quelque chose de, disons, une image qui n'est là qu'à des fins décoratives sur le bureau et qui prendra trop d'espace sur l'écran mobile, ou peut-être qu'il y a un lien que vous voulez cacher qui est d'un ordinateur de bureau uniquement sur laquelle vous ne voulez pas que vos utilisateurs mobiles cliquent. Dans ce cas, il y a un espace supplémentaire au-dessus de l'e-mail, au-dessus du lien de visualisation dans le navigateur qui est causé par certaines cellules de tableau inutilisées ici dans le HTML. Sur la taille du bureau, cela sert un but si vous voulez avoir un texte pré-en-tête aligné à gauche ici ou peut-être un autre lien, puis, avoir votre lien de visualisation dans le navigateur aligné à droite. C' est là que vous le placeriez dans ce modèle. Puisque nous en avons besoin sur la taille du bureau, mais pas sur la taille du mobile, ce que nous allons faire est que nous allons le cacher en utilisant une propriété display none. J' ai nommé ma règle display none, display none. Il a une propriété d'affichage et une valeur de none, et ce que cela fait, c'est dire au navigateur ou au client de messagerie de cacher cet élément quand il s'agit de ce point de rupture. On peut aller à cette première cellule de table ici. Nous allons lui donner la classe d'affichage none, et nous allons appliquer cette classe à celle-ci aussi, et enregistrer, actualiser et redimensionner. Vous pouvez voir qu'il n'y a plus d'espace au-dessus du lien de visualisation dans le navigateur. 6. Merci !: Merci d'avoir suivi ce cours. N' oubliez pas de créer un projet dans cette classe pour montrer votre nouveau courrier électronique HTML réactif. Si vous avez des questions sur des concepts couverts dans cette classe ou quelque chose que j'aurais pu manquer, laissez un commentaire ci-dessous ou envoyez-moi un tweet. Comme toujours, codage heureux.