Créer un courriel HTML sensible

1. Aperçu du projet final: Bonjour, je suis Chris Converse, et dans ce cours, nous allons créer un design de courrier électronique HTML réactif avec une mise en page plutôt complexe qui s'adaptera à différentes tailles d'écran. Maintenant, compte tenu des anciens clients de messagerie nécessite d'utiliser des mises en page basées sur une table, je vais vous montrer des stratégies pour faire une mise en page basée sur une table qui est réactive. Et cette technique sera rendue de manière acceptable dans plus de 30 des clients de messagerie basés sur le Web et les applications natives les plus populaires d'aujourd'hui . Et une autre caractéristique du design que nous allons construire est sa capacité à se dégrader gracieusement dans les anciens e-mails. Les clients concevront cela avec des graphiques d'arrière-plan autour des coins et des ombres, mais appliqueront ces éléments de manière à ne pas sacrifier l'intégrité des conceptions s'ils ne sont pas pris en charge dans certains clients de messagerie. J' espère donc que ce cours vous semble intéressant, et si oui, commençons 2. À propos des fichiers d'exercice: Maintenant, quand vous téléchargerez les bios d'exercice, il y aura quatre supports à l'intérieur d'un dossier. L' un est un démarreur. Fichier Html. C' est un document HTML bien formaté, et je l'ai ici juste pour m'assurer que nous commençons tous à partir du même point de départ À l'intérieur des modèles séparés sont les fichiers source Photoshopped. Donc, si vous voulez suivre la création des graphiques et le chapitre Photoshopped, vous pouvez utiliser ces fichiers. Vous pouvez également les utiliser pour modifier la conception de votre projet lorsque vous passez par le cours à l'intérieur d'un dossier trois est une série d'extraits. Nous allons recouvrir à la main tout ce qui est essentiel au cours, mais tout ce qui est étranger comme la mise en page supplémentaire, fonctionnalités ou le contenu. On va couper, payer une partie du contenu à l'intérieur d'un dossier 3 à l'intérieur d'un dossier 4 est un fichier vidéo avec un cadre d'affiche vidéo. On va les utiliser plus tard dans l'orteil du cours. Voyez comment nous pouvons intégrer le multimédia dans nos courriels. Maintenant que nous sommes familiers avec les fichiers d'exercices, commençons à créer notre email 3. Fixer les attentes de l'e-mail HTML: Maintenant, avant de commencer ce cours, je veux fixer quelques attentes. Je veux définir des attentes pour vous et pour ce cours particulier et vous donner quelques informations que vous pouvez partager avec vos clients sur la définition de leurs attentes. Avec l'email HTML, il y a de bonnes nouvelles et de mauvaises nouvelles. Maintenant, la mauvaise nouvelle est que les e-mails HTML ne sont pas des pages Web. C' est parce que la quantité de HTML et CSS pris en charge dans chaque client de messagerie varie, et dans certains cas, que les techniques de conception responsive allaient ajouter à notre projet auront un effet négatif sur certains clients de messagerie Web. Maintenant, il y a juste des bonnes nouvelles. heure actuelle, la plupart des entreprises de distribution de courrier électronique recommanderont que votre e-mail reste extrêmement simple. Beaucoup de fois ces suggestions seront que vous gardez votre email toe une colonne. Il suffit de flotter ou une ligne des images à droite et à gauche et de permettre au contenu de circuler . Et bien que cette stratégie fasse fonctionner votre email dans le plus grand nombre de clients, ce sera difficile à vendre pour votre design. Les clients qui veulent avoir un email beaucoup plus intéressant. Et maintenant pour la bonne nouvelle. Je vais vous accompagner à travers un processus pas à pas pour créer une mise en page d'email beaucoup plus complexe , un email conçu. Cela a obtenu une stratégie pour les clients de messagerie plus anciens et dégradants, tout en intégrant techniques de conception réactive afin qu'il puisse s'adapter à des tailles d'écran plus petites. Et à la fin du cours aura un e-mail réactif qui fonctionnera sur les petits appareils à écran . Ah, Siris entier des applications de messagerie de bureau et même des clients de messagerie Web, et verra même comment la conception va se dégrader gracieusement, où nous allons perdre des choses comme des graphiques de fond ou des coins arrondis, mais sera toujours en mesure pour maintenir l'intégrité de la conception. Même lorsque certains clients de messagerie ne prennent pas en charge toutes les fonctionnalités de conception, c'est maintenant conforme à nos attentes. Commençons à construire notre projet. 4. Débuter le projet: doivent commencer notre projet. Crédit dossier sur le bureau. Je vais nommer ceci mon email. Ouvrons ça. Je vais redimensionner ça. Déplacez-le sur le côté droit de mon écran afin que vous puissiez voir les fichiers facturés au fur et à mesure que nous progressons vers le projet. Maintenant, à l'intérieur de ce dossier, découpons un autre dossier appelé Images. Une fois que cela a été créé, passons aux fichiers d'exercice. Allons dans un dossier un fichier de démarrage. Copions l'e-mail de ce fichier html dans le dossier Mon projet email que nous avons créé sur le bureau Ne pas suivre. Dans ce cours, vous devez être en mesure de modifier le code HTML à l'écran. Ici, j'ai une série d'éditeurs de texte que vous pouvez télécharger pour Macintosh et Windows. Certains d'entre eux sont libres d'air et d'autres sont commerciaux. Vous pouvez également utiliser un éditeur graphique comme Dreamweaver ou quelque chose de similaire tant que vous avez accès au code HTML. Et une fois que vous avez votre logiciel prêt, ouvrons e-mail que html vers le haut dans votre éditeur de texte choisi. Maintenant, avec ce fichier HTML ouvert dans notre éditeur de texte, je veux attirer votre attention sur le type de dock en haut. Maintenant, il y a quelques recommandations différentes de quelques sites différents maintenant. Certains clients de messagerie et services de messagerie HTML vous recommanderont de ne pas utiliser de type de document, et vous commencez simplement à documenter avec HTML. D' autres vous recommanderont d'utiliser le X html un Dato Transitional, auquel cas T. HTML a besoin d'un attribut pour l'espace de nom XML, puis d'autres vous recommanderont d'utiliser html quatre points. Oh, puisque certains clients de messagerie HTML vont effectivement supprimer n'importe quel type de document que vous avez et le mettre , je préfère utiliser les spécifications HTML 4.0, puisque je ne ferme pas non plus mes balises HTML. Maintenant, comme vous suivez ce cours, vous pouvez certainement le modifier pour correspondre à n'importe quel type de document recommandé par votre client de messagerie ou votre service de messagerie . Cela n'aura aucun effet sur le HTML que nous structurons à l'intérieur de la zone du corps ou de la zone de titre de notre e-mail réactif. Et maintenant, avec nos fichiers de projet en place, prochaine va commencer à créer nos graphismes à partir de la boutique photo 5. Créer la bannière et les graphiques: Maintenant, les premiers graphiques que nous allons créer seront pour la bannière et le contenu d' arrière-plan fantôme . Allons donc dans les fichiers d'exercices. Ouvrons aussi le dossier . Ouvrons des images de bannières, pas PSD dans Photoshop. Maintenant, à l'intérieur du panneau Calques, vous pouvez voir comment il est divisé en trois dossiers différents. Bannière petite, meilleure bannière moyenne grande. Si nous ouvrons un de ces éléments, vous pouvez voir que j'ai une zone de clip en haut de couleur rouge afin qu'on puisse la voir dans le panneau des calques et j'ai une photo qui est découpée là-dedans. Ces photos sont également mis en place un objets intelligents. Maintenant, les objets intelligents ont été dupliqués dans les autres tailles. Donc, si j'ouvre petit et moyen, vous pouvez voir que ce sont tous des doublons du même objet intelligent. Ce qui se passe ici, c'est que nous obtenons une instance de l'objet intelligent original, donc faire un changement à l'un d'entre eux réfléchira à tous. Alors explorons cela d'abord, pour modifier l'objet intelligent, nous double-cliquez dessus qui fera apparaître le fichier original à l'intérieur d'une boutique de photos qui fait partie de l'objet intelligent embarqué Zoom ici. Donc, pour le démontrer rapidement, je vais revenir au menu de l'image, revenir aux ajustements, et je vais juste inverser l'image. Ensuite, je vais choisir le fichier, enregistrer l'enregistrement. L' objet intelligent met ensuite à jour toutes les instances en arrière-plan. Donc, maintenant, nous pouvons voir que tous les graphiques d'arrière-plan ont maintenant été modifiés. Basé sur ce changement d'objet intelligent, je reviendrai ici. Je vais annuler cette fermeture et enregistrer mon document. Maintenant, vous voyez également que j'ai dupliqué chaque objet intelligent deux fois dans chaque taille. De cette façon, on pourrait avoir une image fantôme qui va derrière le contenu maintenant. Cette fonctionnalité n'est pas prise en charge dans tous les clients de messagerie HTML, mais elle va être prise en charge dans un bon nombre d'entre eux, et elle nous donne la possibilité d'avoir notre conception dégradée gracieusement. Donc ici, je peux voir la photo fantôme. Si je sélectionne ceci, sélectionnez mon outil de déplacement, je pourrais déplacer cela, laissez-moi annuler cela, ou je peux venir dans sélectionner la photo principale et déplacer cela, mais remarquez là en se déplaçant ensemble. Si je maintiens la touche de commande ou de contrôle, sélectionnez les deux objets intelligents à l'intérieur de la bannière large Je peux maintenant déplacer les deux ensemble . Ainsi, cela vous donne un moyen vraiment rapide et efficace de modifier l'illustration dans toutes ces bannières et même un moyen rapide de changer le recadrage perçu entre la bannière et la zone fantôme à l'intérieur du contenu. Maintenant, pour avoir accès aux tranches, revenons et cliquez et maintenez l'outil de recadrage, descendez et sélectionnez une étole de tranche. Toutes ces tranches ont été créées en maintenant Commander Control et un double clic sur l'une de ces tranches fera apparaître les options de tranche. Ainsi, par exemple, bannière grande est nommée bannière soulignement grande, et si je viens ici en double clic, nous pouvons voir ceci est nommé Banner Large Ghost. Nous allons suivre la même bannière,bannière moyenne, bannière moyenne fantôme moyen pour que nous n'ayons pas de schéma de nommage cohérent. Lorsque nous commençons à créer notre CSS Now pour enregistrer tous ces éléments, montons au menu des fichiers. Descendez et choisissez un Web plus sûr. J' ai également déjà défini la bande de fichier et la compression, donc sélectionner ce top, par exemple, nous donnera une qualité d'image de 70% en tant que fichier JPEG. Même chose pour la zone fantôme pour medium. J' ai ramené cela à environ 60, puis pour les petits écrans qui l'ont ramené à 40. Ensuite, sauvegardons sous les tranches. Descendez et choisissez toutes les tranches utilisateur. Choisissons mon répertoire de messagerie sur le répertoire d'images de bureau. Alors c'est sûr. Donc, en arrière-plan va voir que nous avons maintenant une bannière, petite bannière, petit fantôme, moyen, fantôme, grand et grand fantôme. Revenons à la boutique photo et en enregistrant Fermer. Maintenant, ils ont tous les graphiques de bannière et le contenu aller piqûres qui correspondent à la culture pour l'interdiction. Un graphique suivant crée les graphiques pour le contenu. 6. Créer le graphique de contenu: Ensuite, nous allons créer les graphiques pour le contenu de l'e-mail. Donc, revenons dans les fichiers d'exercice, allons dans le dossier de nos modèles. Ouvrons des images de contenu que PSD ils sont ici. Nous pouvons voir plusieurs tailles de notre bannière sur le dessus. Nous pouvons voir plusieurs tailles des graphiques promo qui vont être après le corps principal du HTML Down en bas, nous pouvons voir les icônes de l'appel et la signature que nous allons avoir après le contenu principal . Maintenant, pour voir ces propriétés de tranche, descendons et choisissons de couper l'outil de sélection et nous allons double-cliquer sur le 1er 1 Par exemple, nous pouvons voir que nous appelons ce logo grand moyen de logo suivant puis logo petit, et vous verrez également que nous avons une grande version des graphiques promo et la version moyenne et une petite version. Maintenant, si nous regardons en arrière à la réponse des conceptions allait être créer sur le grand écran, nous avons de grands graphiques pour les colonnes promo stagnantes. Nous avons les icônes individuelles pour les appels au-dessus du contenu. Dans la taille moyenne, nous avons encore nos graphiques promo et colonnes, mais ils sont beaucoup plus petits et les appels sont maintenant façonnés à l'intérieur d'une grille. Et puis, pour le plus petit écran, notre promo, ils auront un petit carré sur le côté gauche du contenu, et nous allons faire quelque chose de similaire pour tous les appels. Maintenant, pour enregistrer ces graphiques, revenons à la boutique photo à l'intérieur du panneau Calques. Revenons et éteignons le calque f p l les graphiques ici, Signature et les icônes que nous voulons avoir transparentes. Nous allons donc nous assurer que nous n'avons pas d'illustration activée derrière ceux suivants pour choisir la sauvegarde de fichier pour le Web. Maintenant, si vous cliquez sur ceux-ci, nous pouvons voir que j'ai déjà défini les types de fichiers pour les logos. J' ai choisi un format de fichier cadeau pour toutes les photos que j'ai choisi J. Peg. Et puis si nous descendons et regardons les icônes, j'ai choisi un format de fichier cadeau, et j'ai choisi une couleur mate ici du violet foncé. Ce que cela va faire est de mettre un bord violet foncé, car nous ne pouvons pas avoir de pixels semi-transparents sur un cadeau afin que ces icônes correspondent bien à ce fond violet. De même, si je fais défiler et sélectionnez la tranche de signature, vous pouvez voir que la couleur mate est définie sur la même couleur que l'arrière-plan de la zone de contenu . Suivant est descendu à sûr pour les tranches. Assurez-vous que toutes les tranches utilisateur sont sélectionnées. Choisissez le dossier Mon e-mail sur le bureau, puis le répertoire Images, puis enregistrez maintenant dans les images. Directeur de notre projet. Nous pouvons voir tous les graphiques qui ont été générés à partir de notre contenu. Un fichier PSD. Revenons à notre fichier Photoshopped, enregistrant de près et maintenant, avec tous nos graphiques créés ensuite, nous pouvons commencer à travailler sur le HTML pour l'e-mail. 7. Configurer la structure de présentation de base: maintenant de retour dans notre éditeur de code avec notre email ce fichier html ouvert, nous allons commencer à construire notre mise en page. Comme la plupart des clients de messagerie ne prennent pas en charge une gamme complète de HTML et CSS, nous devons utiliser des tables, qui est une structure de mise en page plus ancienne, afin d'obtenir notre contenu de travail correct et tous les différents clients. Maintenant, cela pose également un défi intéressant pour le design réactif. Lors de la conception responsive design à l'intérieur d'un navigateur en utilisant du HTML droit, nous avons la possibilité de prendre des conteneurs tels que les balises DIV et d'autres éléments. Et quand nous redimensionnons le navigateur, nous pouvons déplacer ces éléments individuels maintenant, dans une taille de table change, tous les TDs seront plus petits, mais nous pouvons réellement changer la relation des TDs individuels. Ils sont verrouillés à l'intérieur de cette structure de table pour que nous puissions prendre un TD, par exemple, et le déplacer indépendamment de toutes les autres. Donc, pour contourner cette limitation, ce que nous allons faire est de mettre du contenu individuel dans des tables complètes qui ont une seule cellule à l'intérieur d'eux, et quand le avec des changements, nous allons déplacer les tables entières autour, donc de retour dans notre éditeur de texte. La première chose que nous allons faire est de définir la couleur de fond. Allons ici à l'intérieur de l'étiquette du corps. Certains clients de messagerie prendront en charge la définition d'une couleur sur la balise body donc à l'intérieur de l' élément body type E G color set égal au signe livre E f E un B zero. Maintenant, la couleur de fond ajouté, Allons à l'intérieur de la zone du corps. Allons ici et supprimer le contenu HTML va ici commentaire, et nous allons ajouter une cellule de tableau qui va être fouet plein. Alors affaiblir centre notre email. Nous allons aussi ajouter la couleur de fond à cela aussi. Dans le cas où le client de messagerie ne supporte pas la technologie du corps. Commençons par une balise de table. Allons avoir une largeur de 100%. Qu' est-ce que c'est ? Une bordure égale à zéro. Vendre l'espacement. Réglons ça à zéro. Ensuite, nous allons définir le rembourrage cellulaire. Réglez cela à zéro et encore une fois nous allons répéter la couleur de fond afin que la couleur BG égale livre Signe E f e un B zéro. Ensuite, nous allons à une ligne de table à l'intérieur. Là, un TD pour nous-mêmes, nous allons et la télé prochaine ligne. Finissons le TR, puis dans la table. Maintenant, avec la table extérieure en place, on va créer une autre table à l'intérieur, qui sera à nouveau notre conteneur principal. Si nous revenons à notre design, ce que nous allons faire, c'est prendre ce grand écran, qui va être notre conception de base. Et on va diviser ça en Individual Rose. Donc on va avoir un T d Oro spécifique pour le logo. Un pour le titre, la bannière, le contenu, appels de Primeau, puis le pied de page. Donc, à l'intérieur de notre HTML, mettons notre curseur à l'intérieur de cette balise TD, et nous allons mettre le conteneur principal à l'intérieur d'ici. Alors commençons par la table. Définissons une classe égale à conteneur. Qu' est-ce qui a fixé une largeur de 640. Définissons dans la ligne de centre prochain ensemble de frontière de Zero, vendez le rembourrage égal à zéro, puis vendez l'espacement de zéro. Ensuite, allons à notre première rangée et ensuite un TD pour une cellule à l'intérieur de cette rangée. Ça va être le 1er 1 pour le logo et la télé et le TR, et puis on va répéter ce modèle jusqu'à ce qu'on ait sept lignes. Je vais accélérer la vidéo ici pour que vous ne me regardiez pas taper tout ça et vous pouvez certainement copier et coller le premier t r et TD ensemble pour obtenir votre rose. Et une fois que j'ai ma table avec ma rose sept, je vais l'insérer juste pour voir visuellement la structure que cette table particulière est à l'intérieur de cette table parent. Et maintenant, ils ont notre conteneur de table principal en place avec notre rose sept. Ensuite, nous allons travailler sur le style de la route pour le logo. 8. Styliser la ligne de table pour le logo: maintenant pour ajouter un peu de style à la ligne du logo. Allons à l'intérieur du premier TR. Trouvons le TD. Réglons un espace. Commençons à ajouter quelques attributs ici donc nous allons commencer par via la ligne. Il a dit que le haut. Ensuite, nous allons définir une classe de logo, puis BG Color. Qu' est-ce que c'est ? Cet orteil blanc So Pound signe en six Efs. Ensuite, nous allons définir un style en ligne. La première propriété va taper si tu as du style abrégé ici. Donc 10 pixels sur l'espace supérieur 20 pixels sur la droite, zéro sur le bas, 30 sur la gauche. Suivant va être bordure gauche style raccourci pour cela va être la taille d'un style de pixel de couleur unie est DBC 064 Ensuite, nous allons définir la bordure droite d'un pixel solide DBC 064 et puis bordure supérieure un pixel solide et les mêmes couleurs les deux autres. Une fois que c'est en place, nous allons à l'intérieur de la télé Let's et une image à l'intérieur d'ici, qui sera le grand logo. Commençons donc par une balise d'image. La source est égale aux images slash logo soulignent un grand cadeau à pois. Suivant Let's Haddon tout tag lt est égal à notre vignoble. La prochaine sera avec un tel 5 85 qui correspond aux boutiques photo, grandeur nature et hauteur de 45 et puis, enfin, une bordure de zéro. Maintenant, nous voulons nous assurer que le logo était cliquable sur notre site Web. Allons chercher le curseur avant le début. Balise d'image, nous et une balise d'ancrage afin de commencer balise un creux égal mettra un signe de livre ici, qui est un lien auto, et la balise. Ensuite, obtenez le curseur après la balise image, Terminons la technologie d'ancrage. Et comme nous avons une bordure définie à zéro ici, même si les images sont hyperliées, nous n'aurons pas de bordure de lien d'ancrage autour de l'image. Donc, à ce stade, nous avons quelque chose que nous pouvons voir dans un navigateur. Alors sauvegardons votre travail. Revenez au système d'exploitation. Ouvrons l'email que html dans un navigateur. Donc, dans le navigateur, nous pouvons voir que nous avons notre fond jaune. Nous pouvons voir que nous avons un logo dans la toute première cellule du tableau, et si nous redimensionnons le navigateur, nous pouvons voir que le contenu reste centré à l'intérieur de ce conteneur plus grand. Et maintenant que nous avons la rangée de logo suivante, nous allons travailler sur la rangée de titre 9. Styliser la ligne de tableau pour le titre: maintenant pour travailler sur la ligne Headline. On va aller dans nos extraits et obtenir les valeurs TD. On l'a tapé dans le dernier film, donc on ne les tapera pas à chaque fois. Quand votre éditeur de texte choisira le fichier ouvert, nous allons entrer dans les fichiers d'exercice dans les extraits et ouvrir une route de bureau titre que HTML. Au lieu de ce fichier, vous verrez une balise TD. Revenons ici et sélectionnons la balise TD entière copiée dans le presse-papiers. Revenez à l'e-mail que HTML Revenons ici et trouvez la deuxième ligne de tableau. Trouvons le premier TD et collons dans notre contenu que nous venons de copier à partir de l'extrait. Ensuite, mettons-nous notre curseur à l'intérieur de la télé. Touchons ceci dans et tapons une balise H one. Commençons donc par une balise H one, puis nous allons taper le titre principal ici et terminer la balise H one. Maintenant, vous pouvez remarquer dans cette balise TD ici j'ai des tailles de police et la famille de polices configurées. Donc, si nous spécifions le particulier dans les styles de ligne dans cette TD, chaque ensemble de texte à l'intérieur apparaîtra obtiendra ces propriétés sauf si nous les enveloppons à l'intérieur d' un autre objet. Donc le H ici est un objet séparé de ce téléviseur. Donc nous allons ajouter un style en ligne à celui H, donc affaiblir le style séparément. Donc pour ce faire, nous allons mettre notre curseur à l'intérieur de la balise H 1 dans l'espace. Allons à un style en ligne, donc le style est égal. Définissons une marge de zéro sur le zéro supérieur à droite, 15 sur le bas et zéro sur la gauche. Définissons une police d'attente à la taille normale de la police. Nous allons régler à 32 pixels, puis pour la couleur, nous allons définir le signe de livre 7 à 3 C sept f. Maintenant, chaque fois que vous avez un bloc spécifique à l'intérieur d'un TD, nous allons devoir venir ici et ajouter nos tailles de police et propriétés différentes. Donc à partir d'ici, le seul élément que nous allons mettre à l'intérieur d'ici sera un H, et ensuite le reste de la copie prendra le style que nous avons mis sur la télé apparaissant. C' est ce que nous avons jusqu'à présent. Ouvrons l'email que html dans notre navigateur. Donc on devrait voir ça maintenant. Ça a l'air bien. Jusqu' à présent, cependant, je veux que le logo s'accroche en quelque sorte sur le côté gauche. Ici. Fermons notre navigateur. Revenons à notre code. Revenons ici dans le logo Row à l'intérieur de l'image. Allons frapper un espace. Nous allons avoir un attribut de style sur l'image. Définissons une marge. Tableau de bord gauche. On va régler ça à 15 pixels négatifs. Ça va accrocher le logo un peu à gauche pour qu'il s'aligne optiquement avec le titre . Qu' est-ce que ça sauve ? Revenez sur le navigateur. Allons frapper ! Recharger ! Et maintenant, nous pouvons voir. On a ce négatif. 15 pixels à gauche, marge pour le logo. Et maintenant, avec le titre Road terminé ensuite, nous allons travailler sur la bannière et le contenu Rose 10. Styliser la ligne de table pour la bannière et le contenu: Maintenant, on va travailler sur la rangée de bannières. Défilons un peu ici. J' ai mis en place une balise TD dans nos extraits pour cela aussi. Allons donc dans nos fichiers d'exercices à l'intérieur de Folder 3 Snippets. Ouvrons Banner Road que HTML Revenons ici et copions cette balise TD copiée dans le presse-papiers. Fermez mes autres extraits. Revenons à l'email que HTML Revenons après la ligne de titre. Trouvons la troisième rangée. Sélectionnez la première TD. Allons cadrer dans ce contenu. Qu' est-ce que c'est ? Un retour. Donc ici, nous allons ajouter une balise image. La source est égale à des images. Slash bannière soulignement. Grand point j Peg définit une largeur de 638 pixels. Nous allons définir une hauteur de 180 pixels. Ensuite, nous mettrons tout le texte et nous taperons la photo de notre vignoble. Suivant. Nous voulons obtenir la TD pour la ligne de contenu. Faites défiler un peu ici. Accédez à nos fichiers d'exercices. Ouvrons. Voir le contenu. Routez ce HTML en haut et venez ici et prenez la balise TD. Copiez cela dans le presse-papiers. Revenez à l'email que html Trouvons que la quatrième ligne sélectionnée a remplacé la balise TD. Je vais retourner Tabin. Revenons à notre extrait de ligne de contenu. Venez ici et attrapons le texte de l'espace réservé jusqu'à la balise image, qui a la signature. Copions ça dans le presse-papiers. Fermez cette vile. Revenez à l'email que html et à l'intérieur de la T D. Nous allons basé tout ce contenu. Je vais formater ce petit peu à ce stade. Sauvegardez votre travail. Revenons et teste dans un navigateur. Maintenant, nous voyons que tout cela est en place. Maintenant, nous n'avons pas de graphique d'arrière-plan montrant derrière ici pour les navigateurs qui prennent en charge arrière-plans à l'intérieur d'un TD. Donc, pour ajouter que nous allons ajouter un style en ligne à la TD que nous venons de mettre en place. Fermons notre navigateur. Revenons. Trouvons la balise TD avec la classe de contenu. Revenons ici à l'intérieur du style en ligne. Allons chercher un espace. Ajoutons dans la propriété d'arrière-plan, plusieurs types d'arrière-plan. On va faire du style abrégé ici, donc les premiers paramètres seront la couleur de fond, alors commencez par un signe de livre de cinq pour être cinq. Suivant est u R l Nous allons définir le u R l deux images barre oblique bannière soulignement grand point de soulignement fantôme j Peg, Nous allons définir de nouvelles répétition zéro pixels sur le X et zéro pixels sur la propriété blanche. Choisissez le fichier Enregistrer reviendra dans le navigateur, rechargez ceci. Et maintenant, nous allons voir le graphique de fond en place. Maintenant que nous avons le contenu, Roe en place va travailler sur la route pour le plus professionnel. 11. Styliser la ligne de table pour les promos: Maintenant, on va travailler sur les routes. Ce hold-up Romo est donc venu ici et nous allons trouver la prochaine rangée la prochaine télé. Ouvrons nos extraits. Trouvons D Dash promo Death Row que HTML à l'intérieur d'ici en haut allaient venir ici et copier le TD. Copions ça dans le presse-papiers. Revenons à l'e-mail que HTML Sélectionnons et remplacons la première TD par ce que nous venons de copier. Appuyez sur un retour de ligne. Maintenant, ce que nous allons faire à l'intérieur d'ici est d'ajouter une table supplémentaire comme nous avons parlé plus tôt dans la conception responsive avec des tables que nous ne pouvons pas manipuler ou déplacer des TDs sans les avoir en relation avec le reste de la table. Maintenant, pour avoir notre pro le plus, la position de Jayne, nous allons devoir mettre l'individu promeut dans leur propre table comme nous l'avons dit plus tôt. La réponse de la nature à l'aide de tables signifie que nous devons envelopper chacun de nos éléments dans une seule table de cellule afin de les manipuler. Donc, ce que nous allons faire dans trois cas différents, c'est que nous allons prendre une table individuelle et l'utiliser pour créer notre appel à Action Button, ce qui fera un peu plus tard. Nous allons l'utiliser pour créer des tables individuelles en ce moment pour les professionnels le plus. Et nous allons aussi utiliser la même technique pour créer quatre tables individuelles pour d'autres appels . De cette façon, fur et à mesure que la taille de l'écran change, nous pouvons manipuler et déplacer ces tables soit pour les empiler les unes sur les autres, soit pour les rendre plus petits et toujours en ligne, droite et à gauche. Donc, de retour dans notre fichier HTML, commençons par ajouter notre premier tableau. Donc on va commencer par taper une étiquette de table. Ensuite, nous allons ajouter une classe de soulignement primitif un. On va avoir une largeur de kota de 270 et ensuite on va régler l'alignement de la propriété de l'orteil gauche de la ligne suivante. Nous allons définir un TR pour la ligne de table. Ligne suivante. On va commencer notre prochaine ligne TD. On va mettre fin à la TD que et à la ligne de la table, puis dans le tableau général. Et puis venons ici et formater ça un peu maintenant à l'intérieur de cette TD à l'intérieur de la table avec une classe de promo une, revenons à nos extraits. Revenons à Primal Want contenu ? Copions tout cela dans le presse-papiers. Revenons à envoyer ce html par e-mail et nous allons accélérer ce contenu à l'intérieur de ce TD. Et encore une fois, je vais juste formater ce petit peu maintenant C'est tout ce dont nous avons besoin pour une promo complète à l'intérieur de notre promo zéro. Pas pour créer notre deuxième promo. Revenons ici et copions cette table entière au lieu de retourner. Collons la deuxième copie du tableau. Vous allez formater ce petit peu maintenant sur le 2e 1 Changer promo un en promo pour Let's come Down et changer l'image promo un en promo Image deux sur tout le texte. Changeons le fichier pour promouvoir trop grand. Et enfin, revenons ici et changeons une ligne à gauche pour aligner. ce moment, avec ceux-ci en place, faisons enregistrer les fichiers. Revenons. Testez cela dans un navigateur. Maintenant, nous pouvons voir notre pour promouvoir les tables. Une ligne à gauche et une aligner maintenant avec ceux-ci en place ensuite, nous allons travailler sur la ligne des appels 12. Styliser la ligne de table pour les callouts: Ensuite, nous allons travailler sur la route pour les appels. Défilons vers le bas. Trouvons la deuxième à la dernière rangée ici la première TD. Ouvrons à partir de notre dossier d'extraits, The E Dash Call out desk profile en haut. Revenons dans Sélectionner la balise TD. Copions ça. Retournez à notre courriel que HTML Nous allons remplacer le premier TD de la deuxième à la dernière rangée par ce téléviseur de Retour dans l'espace. Revenons à notre E Call it route ce fichier html à l'intérieur. Ici, nous avons le balisage pour l'un des plus pro. Donc, comme dans le dernier film, on va prendre chaque appel individuel et faire des tables séparées. Copions cet appel entier dans le presse-papiers. Revenez à notre email que HTML Nous allons rythmer cela à l'intérieur de la télévision. Je vais venir et formater ça un peu. Ce n'est pas là. Nous devons ajouter trois appels supplémentaires. Revenons à nos dossiers d'exercices. Ouvrons F tiret appelle ce HTML à l'intérieur. Ici, j'ai les appels pour les numéros 23 et 4. Revenons ici et copions ces trois tables. Revenez à l'e-mail que html et après la classe de table, appelez un. Qu' est-ce que c'est ? Un retour ? Allons dans nos tables restantes. Je vais venir ici et formater ce petit peu maintenant. À ce stade, nous avons tout notre appel. Il est en place maintenant. Si nous les examinons un peu plus près, vous verrez que chaque table a une largeur de 1 35 Nous avons également une propriété de ligne de gauche à l'intérieur. Nous avons une image qui relie l'une des icônes individuelles que nous avons créées. Nous avons du texte qui est contrôlé par les propriétés de police TD pour casser les balises pour l' espace, puis un simple lien d'ancrage. Et encore une fois, les quatre ont les mêmes propriétés, sauf que nous modifions les graphiques individuels et une partie du texte. Donc, à ce stade, il a sauvé Revenir dehors. Regardez ces nouveaux navigateurs et dans le navigateur verra ces quatre tables avec la propriété de la ligne gauche sont maintenant empilés, faisant quatre colonnes Maintenant, plus tard, dans le cours, nous allons flotter quelques de ces tables pour les navigateurs qui ont un support CSS plus avancé. Et donc ce qu'on va devoir faire est d'ajouter une balise de pause pour que nous puissions effacer certains des flotteurs. Fermons notre navigateur. Revenons dans notre code après le quatrième appel de table, allons obtenir quelques retours et ce que nous allons faire ici l'a dit. Casser les balises. Nous pouvons effacer les flotteurs, alors commencez par taper une balise BR. Nous allons ajouter du style, deux-points clairs, les deux virgules et les propriétés que dans le tack. Donc maintenant cette balise de rupture en place avec ses définitions CSS flottantes claires lorsque nous flottons les tables plus tard dans le cours, cela garantira que le conteneur le plus extérieur, qui est la ligne violette de pro plus, s' étendra à haute assez pour englober toutes les tables à l'intérieur. Et avec cela en place, nous allons travailler sur la route pour le pied de page 13. Styliser la rangée de la table pour le pied de page: de ne pas travailler sur le pied de page. Allons vers le bas. Trouvons notre dernière ligne de table ici. Allons dans les fichiers d'exercices. Ouvrons le pied G Dash ou le couloir de la mort en haut de cet extrait. venons ici et copions la balise TD. Revenez à l'e-mail que HTML a remplacé la première TD par ceci au lieu de retourner. Let's Tabin au contenu À l'intérieur de la télé. Revenons au pied un extrait de ligne. Revenons ici et copions tout le contenu afin que nous ayons un droit d'auteur et peut-être exemple de texte que vous pourriez avoir à l'intérieur de votre message. Nous avons également quelques liens vers la vie privée et se désabonner avec dans les styles de ligne colorant ceux noir . Copions ça. Donc, le presse-papiers bascule de retour à l'e-mail que html Allons frapper Coller me format ce petit peu. Ce n'est pas ça en place. Sauvegardons ce fichier. Reviens dehors. Regardez cela dans un navigateur, et si nous faisons défiler vers le bas, nous pouvons voir le contenu de la photo en place. Il est maintenant à l'intérieur du pied d'une rangée. Nous avons Tedy réglé sur la même couleur d'arrière-plan que la table qui centre notre email entier qui est également la même couleur que nous mettons dans l'arrière-plan du corps. Maintenant que toute la structure de nos emails est en place, nous allons revenir dans le style. Certains de nos maillons d'ancrage orteil ressemblent à des boutons. 14. Les liens d'ancrage de styliser comme boutons: Donc maintenant, ce que nous allons faire est de les prendre, apprendre plus de liens à l'intérieur de notre pro Mose et les styler pour qu'ils ressemblent plus à des boutons . Comment faire cela ? Revenons à notre email ce fichier html à l'intérieur de notre éditeur de texte. Nous allons grandir et trouver sont deux pro, la plupart à l'intérieur de notre promo SRO. Ici, nous pouvions voir Promo un et promo à l'intérieur d'une promo. Un. Allons à l'intérieur de l'étiquette d'ancrage. Allons chercher un espace. Ajoutons un peu dans le style de ligne ici. Commençons par mettre fin à un attribut de style. La première chose qu'on va faire est de définir une couleur d'arrière-plan. C' est un fond comme la couleur. Les valeurs seront le signe de livre 71 un 412 Ensuite, nous allons définir un rayon de tiret de bordure à cinq pixels. On va définir la couleur, qui est la couleur du type sur le blanc. Ensuite, nous allons définir un remplissage de 5 pixels en haut, 10 pixels à droite, 5 en bas et 10 cornichons à gauche. Ensuite, nous allons définir la décoration de texte à aucun. Cela supprimera le suivant sous-jacent. Nous allons définir le château texte Eh bien dit zéro pixels sur le décalage X deux pixels sur le Y bouleversé deux pixels de Flou, puis une couleur de signe livre. Trois A 5606 Pas ça en place. Allons frapper, sauver. Sortons et rechargeons cela dans un navigateur. Maintenant, nous pouvons voir notre apprentissage. Plus de bouton est stylé ici. Nous avons des coins arrondis, nous avons une ombre portée et nous avons notre soulignement retiré et le type est blanc. Revenons à notre fichier HTML. Passons à l'intérieur de la balise d'ancrage et sélectionnons un ensemble des attributs de style. Revenons à l'intérieur de la promo pour trouver le lien d'ancrage à l'intérieur de là dans l'espace basé. Revenez à notre navigateur, et maintenant nous allons voir que nous avons les deux liens d'ancrage maintenant comme des boutons. Maintenant, certains clients de messagerie ne seront pas en mesure de rendre le rayon de bordure, donc au lieu des boutons d'angle arrondis, vous aurez des boutons carrés et dans d'autres cas, certains clients de messagerie ne peuvent pas rendre une couleur d'arrière-plan. Donc, en fonction des clients de messagerie que vous souhaitez prendre en charge, nous pouvons avoir besoin d'apporter quelques modifications ici, et nous en parlerons plus à ce sujet dans la section de dépannage de ce cours, et maintenant ils ont nos liens promo ressemblant à des boutons. Ensuite, nous allons créer un bouton d'appel à l'action que nous pouvons aligner à droite et faire circuler le contenu vers la gauche. 15. Créer un bouton de l'appel à l'action: Maintenant, nous allons créer ce bouton d'appel à l'action qui va à l'intérieur du contenu et s'aligne sur le côté droit comme nous l'avons déjà dit. Cela va également être placé à l'intérieur d'une table, et nous allons mettre en ligne cette table globale à droite afin que le contenu puisse tromper autour du côté gauche. Donc, de retour dans son fichier HTML, allons au sommet. Trouvons notre route qui contient le contenu. Voici donc notre TD de contenu de classe. Allons ici. Ajoutons quelques retours. Nous allons devoir ajouter cet appel au bouton Action avant notre contenu ici. Puisque nous allons aligner ça sur la droite, nous voulons que le haut de ce contenu soit aussi haut que le haut du bouton. Commencez par la balise de table pour qu'elle soit venue ici et à une table. Réglons une largeur de 160. Aligner est égal à la classe droite. Son bouton avec que dans la marge de style de ligne, zéro dans le haut, zéro sur la droite, 10 pixels sur le bas et 30 pixels sur la gauche et la balise. Commençons une nouvelle ligne de table, puis un nouveau téléviseur à l'intérieur de la TD laisse sortir une ligne textile de style ligne de fin que nous allons définir pour centrer la couleur de fond. Nous allons mettre ce signe de 2£ 71 un 412 Ensuite, nous allons régler le rembourrage 10 pixels en haut, 15 sur la droite. Cela définira également 10 sur le bas et 15 sur la gauche et le suivant définira le rayon de tiret de bordure à cinq pixels et le TD et la ligne de tableau, puis dans le tableau. Maintenant, avec ça en place, je vais juste formater ça. Ensuite, nous mettrons le curseur à l'intérieur du téléviseur et nous ajouterons un lien d'ancrage. Alors commencez par un tag huit. Ref est égal à ce qu'il a été dans un signe de livre dans le style de ligne. On va mettre la couleur au blanc. On va définir une taille de police de 18 pixels. On va mettre l'espacement des lettres à un pixel de décoration de texte à zéro. Texte à l'ombre 20 sur le décalage X. Deux pixels sur le Y décalent deux pixels de flou, puis décalent trois A 5606 pour la couleur. Suivant définira la famille de polices à combat aérien Helvetica virgule san serif que le texte réel qui est lié. Donc, nous allons prendre, en apprendre plus et ensuite mettre fin à l'étiquette d'ancrage. Donc, ici, nous avons une étiquette d'ancrage qui définit sa couleur orteil blanc et réglage. C' est des propriétés amusantes. Nous avons une TD qui agit en tant que parent de cette balise d'ancrage où nous assignons notre rayon de bordure dans notre couleur d'arrière-plan. Et puis nous avons une table extérieure dans une ligne droite qui agit comme le parent principal de notre appel à l'action. Donc, à ce stade, frappons, sauvegardez. Revenons sur notre navigateur, rechargeons à nouveau, et puis nous verrons notre bouton en savoir plus apparaissant ici sur la droite, tandis que le contenu est beaucoup à envelopper sur la gauche à l'intérieur. Maintenant, si nous faisons défiler, nous pouvons voir que nous avons tous les terrains en place pour notre email. Il y a une dernière chose que nous voulons faire, et cela a changé les couleurs de liaison à l'intérieur des appels. Donc, pour prendre soin de cela, revenons à notre email ce fichier html dans notre éditeur de texte, allons descendre et trouver notre ligne d'appels. Allons trouver notre premier appel. Trouvons l'étiquette de la cheville. Eh bien, dit un espace. Ajoutons un élément de style de ligne ici, donc nous allons taper style. Ils vont venir ici et définir la couleur £2 signe e f B un B zéro. Maintenant, avec ça en place, venons et copions ce style. Attribut. Il va appeler pour obtenir un espace et coller ce style sur cette balise d'ancrage trouver. Appelez trois coller le style. Attribut. Puis enfin, basons-le sur. Appel pour aussi avait déposé. Enregistrer le commutateur de retour à notre navigateur permet de recharger. Maintenant, nous avons la couleur jaune clair pour les appels individuels. Et maintenant, avec tout ce marché pour le style et la mise en page en place, vous avez un e-mail traditionnel qui fonctionnera dans la poussière vers les clients et les navigateurs Web. Et si vous ne voulez pas ajouter de techniques réactives, vous pouvez certainement passer au dépannage. Pour ceux qui veulent rendre le design réactif et le chapitre suivant, nous allons travailler sur l'ajout d'un style CSS en ligne et l'organisation de la mise en page et des éléments fonction de la taille de l'écran 16. Ajouter des requêtes de médias CSS à votre e-mail HTML: Maintenant, nous allons ajouter du CSS dans notre e-mail HTML, Alors allons au sommet maintenant dans le document à partir duquel nous commençons tous. Nous avons un élément de style dans la zone de titre. Qu' est-ce que quelques retours ? Nous allons d'abord à notre CSS trois requêtes média. Commençons donc par Media Onley, écran et M parenthèses. Nous allons mettre Max Dash avec appel en malade 60 pixels début et fin crochet Ce sera notre écran moyen et le prochain nous allons ajouter l'écran Onley média et puis nous allons définir la largeur maximale de 5 10 dans les parenthèses et puis notre début et support de fin. Maintenant, puisque nous n'ajoutons pas un min avec des règles que nous assignons à l'intérieur de 6 60 sera également déclenché à l'intérieur de 5 10 Et tous les éléments et dans les styles de ligne sur le HTML en général seront appliqués à ces trois aussi bien. Donc, pour ces requêtes média, nous allons remplacer seulement ce qui doit être changé ou les écrans moyens à 6 60 petits écrans à 5 10 Maintenant, la première règle que nous allons créer va être à l'intérieur de la largeur maximale de 6 60 Donc, nous allons venez ici et nous allons créer une règle qui va cibler l'élément de table avec la classe de conteneur. Ce qu'on va faire ici, c'est qu'on va taper avec 480 pixels, et ensuite on va ajouter le drapeau important. Donc, ce que ce drapeau fait est de remplacer l'attribut width que nous avons placé sur la balise table elle-même. Maintenant, normalement, éléments et les styles qui sont placés sur un élément individuel remplaceront les règles CSS distantes . Donc encore une fois, cette balise importante remplacera la largeur de 6 40 renvoyer à 4 80 Et étant donné que nous avons besoin d'utiliser beaucoup de styles de ligne et de propriétés d'élément pour les anciens clients de messagerie HTML allaient utiliser la balise importante pour remplacent certaines de ces propriétés pour la nature réactive de notre projet. Alors maintenant, avec la taille changée pour nos écrans moyens, mettons notre curseur à l'intérieur de cette petite zone d'écran. Venons ici et avions deux autres règles pour remplacer ce dimensionnement pour les petits écrans. Alors commencez avec la table de ce conteneur. Une fois que nous obtenons moins de 510 pixels, nous allons définir le avec 2 100% ajouter la balise importante et la prochaine, nous allons cibler la TD à l'intérieur du conteneur de table va jamais enlever la bordure. Donc, nous allons à l'espace conteneur point TD et puis frontière deux-points aucun. Et puis le drapeau important. Donc, une fois que nous aurons moins de 5 10, nous allons avoir le design extensible à pleine largeur, et nous voulons nous débarrasser de cette bordure que nous voyons pour nos grands et moyens écrans. Maintenant, avec nos requêtes média en place pour le conteneur ultrapériphérique, revenons à la taille 6 60. Maintenant, on va cibler l'image à l'intérieur de la rangée du logo. Faisons t d point image de l'espace logo. C' est le grand graphique. Ce qu'on va faire, c'est mettre un écran sur ça à zéro. Ensuite, on va cibler la TD elle-même. Donc le logo TV dot, on va définir la couleur de fond orteil blanc. Ensuite, nous allons définir le u R l deux images slash logo soulignement moyen DOT cadeau dit pas répétition envoyé 10 pixels sur le X et 10 pixels sur le pourquoi, puis définir une hauteur de 45 pixels. Alors quoi ? Cela va faire est de masquer le logo graphique, puis de remplacer le graphique de fond du téléviseur par le logo de taille moyenne. Maintenant, avec cela en place, ramenons notre curseur vers le bas et à l'intérieur de la petite zone d'écran. Nous n'avons pas besoin de désactiver le logo, parce que encore une fois, nous sommes en train de les additionner puisque nous n'avons pas de minimum avec donc les images d'espace du logo td dot, elles vont être désactivées. Donc ce qu'on va faire maintenant, c'est cibler le TD avec une classe basse qu'on va lire pour retrouver l' arrière-plan. Donc on va dire, fond on va choisir le blanc pour toi on va voir des images slash le trait de soulignement local. Petit Pas de répétition. Nous allons centrer le logo et 10 pixels sur le pourquoi, et ils allaient définir la hauteur à 32 pixels. Maintenant, avec ces requêtes multimédias en place, sauvegardons. Revenons et testons cela dans un navigateur. Maintenant, quand nous redimensionnons notre navigateur et que nous obtenons sous le seuil 660, nous pouvons voir que le logo change et si nous descendons encore plus loin, nous pouvons voir que nous arrivons à la petite taille d'écran. Maintenant, vous remarquerez que le conteneur le plus extérieur ne change pas du tout. Nous devons encore apporter des modifications supplémentaires à d'autres graphiques, tels que les tableaux promo et le graphique de bannière. Et maintenant que nous pouvons voir que nos requêtes média fonctionnent correctement sur la ligne de logo suivante nous allons cibler la ligne d'en-tête et la ligne de bannière. 17. Styliser le titre et la bannière pour les écrans plus petits: Maintenant, nous allons cibler la rangée des titres dans la bannière à l'intérieur de la taille moyenne de l'écran . Donc, à l'intérieur de la requête média pour une largeur maximale de 6 60 Allons ici et ajouter quelques règles supplémentaires . Donc nous allons commencer par cibler la TD avec une classe de titre, donc le titre de point td sur nos parenthèses, nous allons définir un remplissage de haut de cinq pixels. Zéro sur la droite est zéro sur le bas 30 sur la gauche, puis définissez le drapeau important. Depuis ces air mis sur l'élément TD individuel Suivant, nous allons faire td dot titre espace H un. Nous allons définir la taille de la police à 28 pixels. Dit le drapeau important sur cela aussi. Ensuite, nous allons définir l'image de l'espace de bannière de point td. On va éteindre ça c'est bien, comme on l'a fait avec le logo. Donc, affichez les deux-points Aucun. Ensuite, nous allons faire la bannière de points td cible TTD. On va définir un avec les 480 pixels. Nous allons définir une hauteur de 150 pixels. Ensuite, nous allons établir un arrière-plan. Pas de couleur. Vous êtes bien, nous allons définir deux images barre oblique soulignement point moyen JPEG dit pas répéter zéro pixels sur le X et zéro pixels sur le Pourquoi. Donc, comme la rangée de logo, on va désactiver ce graphique pour la bannière et ensuite on va appliquer la bannière de taille moyenne dans le T D. Maintenant, encore une fois, ces propriétés vont être récupérées pour le petit écran. Amenons notre curseur vers le bas. Obtenons un retour de ligne et ajoutons quelques règles d'écran plus petites. Faites défiler ici un peu. Allons ici et allons cibler le H. Donc on va faire un TD Doctor Headline Space H. On va régler la taille de la police à 24 pixels, puis définir le drapeau important et ensuite on va placer le texte sur la ligne au centre suivant. Nous allons cibler la bannière TD DOT. Nous n'avons pas besoin de désactiver l'image parce que nous l'avons fait sur la taille moyenne. On va fixer une hauteur de 115 pixels. Arrière-plan, pas de couleur. On va mettre vos deux images slash bannière soulignement Small que J peg Pas de répétition, on va aligner à droite sur les pixels X et zéro. sur le pourquoi, et nous n'avons pas besoin de définir l'image à l'intérieur de la TD pour afficher None. Puisque nous avons déjà mis que dans la taille moyenne, il est maintenant avec ceux-ci en place, Nous allons frapper, sauver. Revenons sur notre navigateur. Qu' est-ce que c'est ? Recharger. Et maintenant, lorsque nous chargeons cela dans un navigateur et re taille, quand nous arrivons à notre taille d'écran moyen, nous pouvions voir les changements de bannière. Le titre devient un peu plus petit, et vous pouvez dire que les graphiques changent réellement puisque l'image fantôme n'est pas commutée à la taille moyenne donc nous pouvons réellement voir que l'alignement ne correspond pas ici. Et puis si nous descendons à la plus petite taille, nous pouvons voir que nous passons à notre vue à 100%. Donc, tout le design devient liquide et nous avons la bannière alignée à droite et les titres centrés. Nous pouvons voir que ces effets se produisent également. Donc maintenant, nous avons les 3 premières lignes complètement réactives. Ensuite, on va travailler sur le contenu dans la zone de pied de page. 18. Styliser le contenu et le pied de page pour les écrans plus petits: Ce n'est pas pour les écrans de taille moyenne. On va modifier la ligne de contenu. Mettons notre curseur à l'intérieur du max avec 600 Media Query. Allons ici et ciblons la ligne de contenu donc td dot espace contenu Nous allons mettre tapotant bas de 30 pixels puis a dit le drapeau important qu'ils allaient faire image de fond . Nous allons spécifier des images barre oblique bannière sur le score moyen de soulignement fantôme point j paie, puis le drapeau important. Maintenant, nous avons spécifié cette image d'arrière-plan sur cet élément à l'intérieur du four dans le style de ligne pour spécifier la bannière Grand fantôme. Nous devons donc remplacer cela avec une balise importante. Ensuite, on va cibler l'appel à Action Button. Donc, nous allons à l'espace de contenu TV point. Déposez ce bouton. Nous allons définir la largeur sur auto, puis l'espace de contenu td dot Table cet espace de bouton TD espace A. Nous allons définir la taille de la police à ce lien d'ancrage à 14 pixels, puis définir l' étiquette importante sur cela aussi bien. Maintenant, si ceux en place, passons à l'intérieur des règles de petit écran qui disait un retour. Venons ici et ciblons le contenu des points TV de la ligne de contenu. On va définir une hauteur de ligne de 20 pixels. Dit le drapeau important. Ensuite, on va régler le tapotement en bas à 10 pixels. Dit le drapeau important pour cela aussi. Ensuite, on va mettre l'arrière-plan. Nous allons définir une couleur ici, donc livre le signe F cinq f à e cinq, puis les images u R l slash bannière soulignent petit trait de soulignement fantôme point jpeg Nous allons définir aucune répétition. Nous allons aligner le fantôme vers la droite ainsi que zéro pixels sur l'axe Y, puis le drapeau important. Et enfin, on va cibler le pied de page td point pied de page. On va mettre un rembourrage de 20 pour le haut et le bas et de 30 pour la droite et la gauche. Ensuite, le drapeau important de cette façon, lorsque nous changeons le design pour être complètement fluide ou 100% avec, nous n'aurons pas le texte dans le pied de page touchant le côté droit ou gauche d'un petit écran. Ce n'est pas ce que ces règles sont en place. Allons frapper, sauver. Sortons et testons cela à nouveau dans un navigateur. Je recharge ça soupire. Nous verrons le graphique de fond de taille moyenne apparaissant à l'intérieur du contenu sur l' écran de taille moyenne, qui correspond à la bannière de taille moyenne, puis pour les petits écrans verront que cela correspond également. Et le fantôme et l'image apparaissent sont alignés à droite. Nous allons donc obtenir un recadrage dynamique sur le côté gauche, et le fantôme et l'image correspondront à la fois. Maintenant, si nous faisons défiler jusqu'à la frontière, nous verrons que nous avons du rembourrage à droite et à gauche. Si je l'ouvre, une fois que nous atteindrons la taille moyenne, vous verrez que le texte vire orteil du côté gauche de son TD afin qu'il corresponde à la zone violette ici. Mais quand nous descendons au petit écran, la taille va réellement accrocher cela dans un peu, sorte que sur les petits écrans, le texte ne touchera pas réellement les côtés. Et maintenant, avec la ligne de contenu et le pied A, les requêtes média en place prochaine cibleront la route qui a reçu la promo est dedans 19. Styliser les promos pour les écrans plus petits: Maintenant, on va fixer des règles pour cibler le zéro promo. Défilons vers le haut dans nos requêtes multimédias à l'intérieur de la taille de l'écran moyen. Allons ici et ajoutons de nouvelles règles. D' abord, on va cibler la table à l'intérieur de la TV Pro le plus. Alors commencez avec la table d'espace de Tedy Doubt Primeau. Définissons une largeur de 200 pixels, puis le drapeau important ensuite, ciblez les en-têtes à l'intérieur de sorte td dot espace de la table d'espace de Primeau espace TD H trois. On va définir une marge inférieure de huit pixels. Ensuite, ciblez les images td dot espace table de Primeau image de l'espace espace TD que nous allons définir affiché dans aucun. Ensuite, nous allons cibler la TD à l'intérieur de la promo 1. Tellement tirée. Ramos espace table dot promo soulignent un espace TD. Définissons une propriété d'arrière-plan pas de couleur. Votre l va être images slash promo soulignent un point moyen souligné J peg, Pas de répétition, zéro pixels sur le X zéro pixels sur le pourquoi et le rembourrage. On va régler 100 pixels en haut, zéro à droite, zéro en bas et zéro à gauche. Ensuite, nous allons cibler la TD et promo afin de t d point la table d'espace de Primeau que le soulignement promo à l'espace TD fond Pas de couleur. Vous allez toujours être des images slash promo Underscore pour souligner point moyen J Peg Pas répétition. Zéro sur le X zéro sur le pourquoi, puis pour le rembourrage. Nous allons mettre 100 pixels sur le zéro supérieur à droite, Sarah au bas, zéro à gauche. Maintenant quoi ? Celles en place ? Ajoutons les règles pour le petit écran. Donc, à l'intérieur de la petite zone d'écran, Ciblons une promo donc t d point de la table d'espace de Primeau point promo soulignent un. Permet de réinitialiser la largeur 2 100% puis utilisé la balise importante. Ensuite, on va ajouter une bordure en haut. Donc bordure supérieure un pixel couleur unie est livre signe 71 un 412 Suivant, nous allons cibler TD à l'intérieur d'un problème un si tv point Primeau table d'espace qui soulignent un espace TD. On ne va pas donner de couleur à l'arrière-plan. Votre I va être des images slash promo soulignent un. Souligner petit point jpeg Pas répéter zéro pixels sur le X 40 pixels sur le pourquoi, Ensuite, nous allons définir le remplissage 20 pixels sur le haut, zéro sur la droite, 40 sur le bas, et 110 pixels sur la gauche. Prochain TD. Arrête ! Ramos Space a déposé un trait de soulignement promo à Nous allons régler la largeur de ceci à 100% aussi . J' avais l'étiquette importante Ensuite, on va cibler la télé. Donc TD doute de l'espace de la table point de la promo soulignement de Primeau à l'espace TD fond pas de couleur. Vous allez d'autre être images barre oblique promo souligné pour souligner petit point JPEG dit non Répéter, zéro sur le X 20 sur le Pourquoi rembourrage Nous allons mettre zéro sur le zéro en haut à droite est zéro sur le bas et 100 et 10 pixels sur le à gauche. Et puis, enfin, nous mettrons à gauche de cette façon. Pour une raison quelconque, l' une des tables n'est pas redimensionnée à 100%. Nous pouvons être assurés que le tableau 2 aura une gauche dégagée, de sorte qu'il s'alignera sur le côté gauche avec le tableau au-dessus. Ce n'est pas ce que ces règles sont en place. Allons frapper sauver. Revenons sur notre navigateur. Rechargeons. Je vais redimensionner. C' est le grand Greenview. Quand on arrive au moyen. Nous pouvons voir que les images n'ont pas d'affichage, et maintenant nous avons les graphiques de taille moyenne assignés à l'arrière-plan, et nous avons ici un rembourrage qui pousse tout le contenu vers le bas pour que nous puissions voir les graphiques d'arrière-plan . Et puis quand nous arrivons au plus petit écran, nous pouvons voir que nous changeons à nouveau les graphiques d'arrière-plan, les alignons vers la gauche, et nous voyons que les deux tables seront maintenant empilées verticalement au lieu d'être en colonnes. Donc, c'est petit, moyen et grand. Donc maintenant, avec nos règles CSS en place pour le SRO promo, prochaine travaillera sur la ligne d'appel. 20. Réorganiser les appels pour les écrans moyens: Maintenant, nous allons créer ces règles CSS pour les appels de taille moyenne. Ce qu'on va faire, c'est qu'on va prendre les quatre colonnes et les organiser dans une grille. Donc, pour ce faire, entrons dans les requêtes média pour le moyen écran. Ajoutons d'autres règles. Donc on va commencer par cibler la table à l'intérieur des appels. Certains types t d point appellent table d'espace. On va régler la largeur à 50 % pour fixer le drapeau important. Ensuite, on va mettre la marge en bas de 40 pixels. Ensuite, on va cacher les images à l'intérieur des appels. Donc, nous allons faire t d point appeler l'espace table ensemble image affichée et aucun. Suivant. Cibonnons ces balises de rupture. Nous allons supprimer l'espace entre le paragraphe dans le lien, donc td dot appelle espace table br nous allons définir cet avion et aucun. Ensuite, nous allons cibler les liens d'ancrage td dot Appeler l'espace de table A. Nous allons définir le type d'affichage à bloquer. Cela le mettra sur sa propre ligne, puis la marge supérieure de 10 pixels que le TD lui-même afin TV point appeler espace table TD. On va régler la taille d'arrière-plan des images à 65 pixels. Maintenant, puisque nous avons désactivé les images à l'intérieur de chacune des tables, nous allons devoir réaffecter les graphiques d'arrière-plan. Donc, il a eu un retour. Allons ici et ciblons chaque appel individuel. Commençons par Tedy Duck. Appeler point de table Espace Appeler soulignement un espace TD. Ici, nous allons mettre le rembourrage à zéro sur le top 30 sur la droite est zéro en bas et 60 sur la gauche. Ajoutez l'indicateur important. Ensuite, nous allons définir un fond sans couleur. Votre l Il va être des images slash icône soulignent crêpes dot cadeau. Nous ne mettrons pas zéro répétition sur l'axe X et négatif 13 pixels sur le point de la table d'appel d'espace Pourquoi prochain TD appelez le trait de soulignement à l'espace TD ici. Nous allons mettre le rembourrage à zéro dans le top 20 à droite, zéro en bas et 60 à gauche définir le drapeau important. Ensuite, nous allons définir l'arrière-plan. Nous allons définir l'URL deux images barre oblique icône soulignement point de bouteille gif Pas de répétition. 10 pixels sur le X et trois négatifs sur le pourquoi prochain point td appeler point de table d'espace Appeler soulignement trois espace TD Ici, nous allons définir le remplissage de zéro sur le top 30 sur la droite est zéro sur le bas 60 sur l'ensemble gauche. L' arrière-plan du drapeau important de votre L nous allons mettre à des images barre oblique icône soulignement panier dot cadeau. Pas de répétition zéro sur le X et négatif 13 sur le pourquoi, puis enfin pour appeler pour t d point appeler l'espace point de la table d'appel de soulignement pour l'espace TD tapotant zéro sur le haut 20 sur la droite est zéro en bas et 60 sur la gauche. Dit le drapeau important que pour celui-ci. On va mettre l'arrière-plan. Vous êtes l images barre oblique icône soulignement de la caméra point gif Ensuite, ne définissez pas de répétition 10 pixels sur le X et négatif 23 sur le Pourquoi maintenant, avec toutes ces règles en place pour les tailles d'écran moyen, permet d'enregistrer les testicules dans un navigateur. Il est maintenant dans le navigateur, nous pouvons faire défiler vers le bas et grand écran. Nous voyons que les tables alignées les unes à côté des autres, créant quatre colonnes. Mais quand nous descendons et allons à notre taille moyenne, nous pouvons voir que nous avons réarrangé ceci pour apparaître maintenant dans une grille. Maintenant, il y a quelques règles que nous modifions qui rendent cela possible. Maintenant, l'un est que nous changeons le rembourrage à l'intérieur du contenu. Nous avons donc poussé un contenu du côté gauche pour nous donner de la place pour l'icône. Nous avons désactivé les graphiques, redimensionné les graphiques d'arrière-plan avec la taille d'arrière-plan, puis assigné des graphiques individuels à chacun d'entre eux. Et nous avons également éteint les étiquettes de frein. Donc, nous avons eu une balise break juste après l'image originale qui aurait poussé ce contenu vers le bas. Et nous avons eu une double pause à l'intérieur d'ici, ce qui aurait poussé le mawr savant plus loin du contenu que nous ne le voyons ici. Maintenant il y a une autre propriété que nous allons ajouter à la table 3 ici, et ça va être à gauche. Maintenant, nous allons le faire au cas où nous aurions trop peu de contenu à l'intérieur de l'appel qui permettrait à la table 3 de s'arrêter à côté de la table 1. Donc, afin d'atténuer ce problème potentiel, revenons à notre fichier HTML. Venons à l'intérieur du monde CSS qui cible. Appelez trois et ajoutez-la à gauche et puis c'est sûr. Et maintenant que nous avons les requêtes des médias en place pour les culottes pour les écrans moyens, nous allons ensuite travailler sur les appels pour les petits écrans. 21. Empiler les appels pour les petits écrans: Maintenant, on va juste la mise en page de l'appel. C' est sur de petits écrans, donc à l'intérieur de notre CSS à l'intérieur de la requête média pour 510 sont petit écran. Ajoutons un retour. Allons ici et ciblons ces appels. Alors commençons avec l'espace d'appel de point TV. Nous allons régler le remplissage 20 pixels sur le top 30 sur la droite est zéro en bas et 30 sur la gauche et définir le drapeau important. Ensuite, nous allons cibler deux tables à l'intérieur de la table d'appel d'espace t d point. On va fixer une largeur de 100 % et le drapeau important. Ensuite, nous allons définir la marge inférieure 2 20 pixels. Ensuite, nous allons faire TT Ne pas appeler espace table TD. On va régler un remplissage de zéro sur le zéro en haut à droite, 10 pixels en bas et 50 pixels à gauche. Dit un drapeau important sur ça, on va mettre en place la taille de fond. On va dimensionner les types un peu plus petits. Nous allons 50 pixels sur le X et 50 pixels sur le pourquoi dit un drapeau important là, Ensuite, nous allons définir une hauteur minimale de 60 pixels. Ensuite, nous allons faire td dot call out espace table A. Nous allons mettre l'affichage Type 2 en ligne. On ne veut plus qu'ils apparaissent comme un bloc. Maintenant quoi ? Ces règles en place, nous allons positionner les icônes qui sont assignées dans les propriétés d'arrière-plan de chacun des appels. Donc, la cible le premier appel out t d point appeler la table d'espace. N' appelle pas. Souligner un espace TD. Allons ici et définissons la position d'arrière-plan zéro sur le X et six négatif sur le Pourquoi. Ciblez appel à td point appel à l'espace point de table Colin soulignement à la télévision spatiale. On va définir la position de fond ici. 24 pixels sur le X et deux négatifs sur la table d'espace pourquoi prochain appel TD. Ne pas appeler soulignement trois position d'arrière-plan TD espace. On va mettre ce 20 sur le X et le 7 négatif sur le pourquoi et ensuite la table d'appel td dot out . N' appelez pas ça le soulignement. Quatre espace TD. On va définir la position d'arrière-plan 24 pixels sur le X et 17 négatifs sur le Pourquoi maintenant ? Avec ceux-ci en place, revenons. Rechargez cela dans un navigateur, faites défiler vers le bas redimensionner à partir de deux grands moyens. Nous voyons nos quadrants, puis pour moyen, jusqu'à petit. Nous voyons que tout cela commence à s'accumuler. Maintenant, une chose que vous remarquerez est que nos liens d'ancrage ne s'affichent pas sous le contenu. Maintenant, nous avons désactivé l'affichage de la balise de frein et puisque la balise d'ancrage a un affichage en ligne, elle s'enroule à côté du contenu. Donc, pour atténuer ce problème, nous allons revenir à notre fichier HTML. Nous allons faire défiler vers le bas et trouver les appels, et nous allons ajouter de la classe à la deuxième technologie de pause que nous utilisons pour espacer notre contenu à l'intérieur des appels. Alors faisons défiler vers le bas. Trouvons notre premier appel pour l'appeler. On doit casser les étiquettes ici. Allons dans la deuxième balise de pause. Ajoutons une classe d'espaceur, puis venons ici et copions cela à l'intérieur d'un appel pour avoir une classe d' espace ou à la deuxième balise de pause et appelons à la même chose et appelons trois, puis encore, même chose et appelez pour Donc maintenant nous avons une classe sur la deuxième balise de pause dans chacun de nos appels. Remontons au haut de notre document. Allons à l'intérieur de nos requêtes médias pour les petits écrans. Réglons un retour. Allons ici et ciblons ces balises de rupture. Donc TD pensait Appeler l'espace de la table de l'espace br espaceur de points Laissons qu'un affichage en ligne Maintenant il est le fichier enregistrer. Revenons à notre navigateur. Appuyez sur Reload Et maintenant, nous allons voir que la deuxième balise de pause est en cours de réaffectation pour être affichée en ligne. Ainsi, la toute première balise de pause du grand écran et la première pause prise après que le contenu est masqué. Mais la troisième balise de rupture, qui a un type d'affichage en ligne car elle a une classe d'espaceur, est maintenant honorée, poussant les liens de l'acteur à la ligne suivante. Maintenant, il nous reste un dernier détail, c'est de nous débarrasser de cet espace supplémentaire à droite et à gauche. Certains clients de messagerie honoreront le CSS appliqué à la balise body Donc revenons à notre fichier HTML . Défilons vers le haut avant notre première requête de réunion au lieu de retour. Venons ici et créons une règle qui cible l'élément du corps. On va venir ici et mettre une marge de zéro et un tapotement de zéro. Enregistrez votre code HTML. Revenez à la touche du navigateur. Recharger ! Maintenant, vous verrez la conception sur les petits écrans va aller bord du bord dans le navigateur. 22. Ajouter du texte de aperçu de la boîte de réception: Maintenant, si le support de votre client de messagerie vous montre un aperçu du texte dans la zone d'entrée, vous remarquerez que le texte que nous voyons est l'en-tête va ici, puis le contenu que nous mettons à l'intérieur de la zone de contenu. Donc, ce que l'aperçu du texte fait est de rechercher le premier ensemble de texte à l'intérieur du HTML. Donc ce qu'on va faire, c'est cacher du texte pour que le texte d'aperçu voit notre texte caché avant qu'il ne voit le Texas à l'intérieur. Cela nous donnera la possibilité de personnaliser ce que nous voyons à l'intérieur de la zone d'aperçu. Maintenant, à l'intérieur de l'e-mail que html faisons défiler vers le bas juste après la balise body avant la table. Cela crée notre arrière-plan pour les navigateurs qui ne prennent pas en charge la balise body. Et venons ici et commençons par ajouter une balise diff. Donc tapez tive dans le style de ligne. La première propriété sera la taille de la police. On va régler ça à un pixel. On va définir la couleur sur le même fond. Donc livre signe e f e un b zéro. Ensuite, on va mettre un écran sur zéro et mettre fin à la technologie diff. Maintenant que c'est en place, je vais mettre le curseur à l'intérieur d'ici. Allons ouvrir le diff. Et puis à l'intérieur, nous allons juste mettre le texte d'aperçu que nous voulons afficher dans la zone d'aperçu. Je vais accélérer la vidéo ici, et je vais juste mettre quelque chose qui dit, placer votre texte d'aperçu ici. Et je veux également ajouter du contenu supplémentaire afin que nous ayons assez pour remplir tous les paramètres de l'utilisateur pour son client de messagerie. Donc, s'ils ont un aperçu défini pour 34 ou cinq lignes de texte, nous avons suffisamment de contenu ici pour être affiché à l'intérieur de cette zone d'aperçu. S' il reste de la place que la zone d'aperçu ira chercher le premier ensemble de texte HTML comme nous l'avons vu plus tôt. Et maintenant avec cela en place, lorsque nos e-mails dans notre boîte de réception et notre aperçu Texas montrent, nous verrons cette taxe s'afficher dans cette zone d'aperçu 23. Ajouter de l'animation à votre e-mail HTML: Maintenant, si vous voulez obtenir une animation dans le courrier électronique HTML, il y a beaucoup de clients de messagerie qui prennent en charge le GIF animé, donc pour explorer cette option, nous allons descendre dans l'e-mail ce fichier html. Allons trouver notre logo. Donc, j'ai mis ensemble un GIF animé du logo, donc je vais mettre en soulignement animé point donner pour le logo. Maintenant, il y a quelques éléments que vous voulez garder à l'esprit lorsque vous créez un GIF animé pour un e-mail. Comme tous les clients de messagerie ne prennent pas en charge cela, vous voulez vous assurer que la première image de la dernière image de votre GIF animé a le graphique complet en place. Donc, si vous utilisez ceci pour quelque chose comme une bannière publicitaire, vous voulez vous assurer que tout le texte et le logo se trouvent à nouveau sur le premier cadre et le dernier cadre. Si l'animation est prise en charge, alors nous pouvons voir toutes les images animées entre les deux, donc leur stratégie est un peu différente de la façon dont vous pouvez construire une bannière où vous pouvez réellement construire le message dans la bannière sur en commençant à partir d'un écran vide, puis en construisant ces cadres. Ne pas voir cela fonctionner dans un e-mail. Je vais parler de mon appareil mobile. Maintenant. Avec cet e-mail, vous pouvez voir l'animation en place. Fondamentalement, j'ai la petite tige sur les raisins qui s'anime plus. J' ai un point culminant qui traverse notre vignoble, et nous avons un peu de brillance et de rencontre au-dessus des raisins. Maintenant, au lieu du logo, nous pourrions certainement animer d'autres graphismes sur la scène. On pourrait animer certains des graphiques promo, ou peut-être même les icônes dans les appels. Maintenant, une autre chose que vous voudrez peut-être éviter est de configurer une animation qui va être utilisée comme un graphique d'arrière-plan. Nous utilisons les logos et les graphiques promo comme graphiques d'arrière-plan. Donc, si vous voulez incorporer un GIF animé dans votre e-mail, je vous recommande d'avoir ce soit un graphique que vous redimensionnez avec CSS. Plutôt que d'attribuer à des images d'arrière-plan, nous pouvons voir quelques clients de messagerie différents supportant cela, et nous pouvons voir ce qui se passe lorsque certains clients de messagerie ne supportent pas cela. Le Lotus Notes huit, par exemple, nous montrera une première image statique. Même chose pour Outlook 2007. Maintenant, dans un puits, nous voyons l'animation, et sur ce encore tourné ici, nous pouvons voir que le GIF animé est en train de jouer. Maintenant. Nous obtenons également la version animée sur Gmail et aussi sur Outlook dot com. Cela pourrait donc être une bonne technique pour ajouter un peu d'animation dans votre e-mail tant que l'animation n'est pas critique pour le graphique lui-même. 24. Utiliser les polices Web avec votre e-mail HTML: maintenant, une autre chose que vous pourriez vouloir utiliser à l'intérieur de votre e-mail HTML est les téléphones personnalisés maintenant. Il n'est pas recommandé d'utiliser des polices qui nécessitent le chargement de JavaScript, mais il existe des services d'étang qui fourniront des polices via une balise CSS. Donc, pour cette démonstration, passons aux polices Google. Les polices Google sont gratuites, et elles offrent une solution CSS pour ajouter des fonds. Et vous pourriez trouver cet acquittement dot com obligations slash. Donc sur cet écran principal, je vais venir ici dans toutes les catégories. Cliquons sur ça, et je vais désactiver toutes les options sauf l'écriture manuscrite, une sorte de script qu'il fait pour correspondre aux boucles sur la tige des raisins. Alors je viens ici et choisissons Parisienne à côté de son nom. Je vais cliquer sur l'utilisation rapide sur cette page. Défilons ici. Nous pouvons voir quelques panneaux tapés qui nous montrent une norme, et à l'option Import et JavaScript, nous voulons l'option à l'importation ici. Revenons ici et copions cette ligne de code. Revenons à son âge à mon email, pour ne pas utiliser une annonce importante. Nous devons mettre cela à l'intérieur de la zone CSS. Et cela doit être la première ligne à l'intérieur du CSS, soit un CSS en ligne dans la zone de titre comme nous le faisons ici, ou même si c'est son propre fichier CSS séparé. Donc, en haut du CSS, nous allons coller dans cette importation. Qu' est-ce que ça sauve ? Revenons à Google Fonts. Allons encore plus bas sous l'intégration de vos téléphones, donc nous devons définir ce nom. Revenons ici et copions le nom. Revenons ici et sélectionnons le nom de la police copiée dans le presse-papiers. Revenons à notre e-mail HTML. Défilons vers le bas. Trouvons que H un tag et nous mettons un style en ligne sur la balise H un. Ici, avez une police. Attends, taille de police. Allons ici avant la taille de la police. On va s'amuser en famille, espace côlon. Collons dans le nom de la police. Allons Atacama et ensuite mettre une antenne qu'un demi-côlon. Donc, pour une raison quelconque, ce combat particulier ne peut pas être chargé en ligne où le client de messagerie ne le supporte pas, nous allons revenir au fonds aérien et maintenant avec ceci en place après que j'ai testé ça. Cela fonctionne dans toutes les versions d'Apple Mail Desktop et tous les appareils mobiles. Cela fonctionne dans Lotus Notes huit. Outlook 2000 et 2011 Thunderbird et un Android quatre. Donc, bien que cela ne fonctionne pas encore dans trop de clients de messagerie, cela reste une option de conception viable pour coder vos e-mails HTML. 25. Ajouter une vidéo HTML5 dans l'e-mail HTML: Maintenant, nous allons jeter un oeil sur la façon dont nous pouvons intégrer la vidéo HTML 5 dans un e-mail. Revenons donc aux fichiers d'exercice et revenons dans le dossier sur le bureau appelé My Email. À l'intérieur de notre projet, créons une marque un dossier appelé Video, puis revenons aux fichiers d'exercice à l'intérieur du dossier quatre. Prenons une copie du JPEG et de l'impact. Pour l'instant, je vais faire glisser une copie de ceux-ci dans le dossier de mon e-mail. Vous pouvez également utiliser couper et coller. Une fois ces air en place. Revenons à notre e-mail ce fichier html dans un éditeur de texte. Maintenant dans notre email, la première chose que nous allons faire est de se débarrasser des mouvements pro et de remplacer ça par la vidéo . Défilons ici et trouvons le TD qui détient les deux Primeau pour qu'on puisse voir sa promo voulue pour venir ici et supprimer la promo une. Ensuite, nous allons supprimer la promo à, et une fois ceux-ci supprimés, nous allons ajouter une technologie vidéo HTML cinq. Donc d'abord, nous allons commencer par ajouter une balise vidéo que l'espace que nous allons définir la largeur à 570 pixels. Ensuite, on va régler la hauteur à 428 pixels. Ensuite, nous allons pointer vers notre cadre d'affiche. Donc, c'est poster signifie qu'on va pointer vers ce fichier JPEG. Donc ça va être une vidéo avant slash notre vigne dot j peg. Ensuite, nous allons définir un contrôle, attributs Nous allons définir cela égal aux contrôles, puis nous allons descendre et terminer la balise vidéo maintenant à l'intérieur de la balise vidéo, nous voulons ajouter une balise source qui va pointer vers le fichier vidéo. Donc je vais commencer avec une balise source, puis un espace puis SRC égal à nous voulons pointer vers le fichier MPEG 4. Donc ça va être vidéo avant, couper notre vigne point mpeg 4, et ensuite nous allons définir un attribut de type égal à la slash vidéo m pick pour, puis a dû revenir. Et maintenant, nous allons mettre du contenu HTML à l'intérieur d'ici qui sera vu par les clients de messagerie qui ne comprennent pas la balise vidéo. Donc, à un lien d'ancrage standard, Donc un espace H ref apporter un ensemble qui est égal à et ce que vous voulez faire ici est de mettre le votre L à votre site Web spécifiquement à un fichier HTML qui utilise la même vidéo qui pointaient vers ci-dessus, puis dans le balise d'ancrage. Ensuite, nous allons mettre notre curseur à l'intérieur des balises d'ancrage. Ce qu'on va faire ici, c'est mettre une image du même cadre à l'intérieur de cette étiquette d'ancrage . Ainsi, pour les utilisateurs qui ne voient pas la vidéo dans leur client de messagerie, ils auront le même cadre d'affiche qui sera lié à votre site Web avec la même vidéo. Ainsi a commencé une source d'espace de balise image égale. Poinçons vers le même fichier J Peg que nous avons utilisé le cadre de l'affiche à l'intérieur de la technologie vidéo . C' est une vidéo slash notre vigne dot jpeg. Maintenant quoi ? Cela a ajouté. Je vais venir ici et formater ce petit peu. Maintenant, cet e-mail est réactif, nous allons donc devoir ajouter des règles CSS pour nous assurer que cet objet vidéo est également réactif . Défilons vers le haut dans notre fichier HTML tout en haut où nous avons partout des requêtes de médias. Nous allons d'abord entrer dans les requêtes de médias qui spécifient une largeur maximale de 660 pixels. Revenons ici s'il revient, on va commencer par une règle ciblant la vidéo. Donc, vidéo, on va régler la largeur à 416 pixels et on va mettre le drapeau important sur ça. Ensuite, nous allons régler la hauteur à 312 pixels et mettre à nouveau la balise importante là. Et puis juste pour une bonne mesure, on va cibler l'image à l'intérieur de la vidéo. Même si nous ne devrions pas voir cela pour les clients qui prennent en charge la vidéo, nous allons définir la hauteur et la largeur de l'image pour être les mêmes que la vidéo. Donc 416 pour la largeur et 312 pour les hauteurs et à l'impôt important pour les deux de ceux vont formater cela et maintenant à l'intérieur du maximum avec 510 pixels, allons descendre après un pied de page. venons ici avait les mêmes deux balises et nous allons changer les propriétés de largeur et de hauteur d'une vidéo avec nous allons définir cela à 300 pixels avec le drapeau important, nous allons définir la hauteur à 255 pixels à l'étiquette importante sur cela aussi. Et puis ciblons l'image à l'intérieur de la vidéo, nous allons définir la largeur à 300 pixels pour correspondre à la taille de la vidéo. Ensuite, nous allons redéfinir la hauteur à 255 pour correspondre à la taille de la vidéo. Puis une fois que nous aurons fini, ajoutant que je vais formater ceci une fois que vous aurez fait ces changements, sauvegardez votre travail. Revenons à notre navigateur. Montons et frappons. Recharger. Maintenant, à l'intérieur de notre navigateur va voir que les promoteurs sont partis. Et maintenant, nous avons cet objet vidéo montrant ici. Donc, dans mon navigateur pour tester cela, descendons et appuyez sur le bouton de lecture. Et maintenant, c'est la vidéo qui joue. On peut voir de l'animation et on peut entendre un peu d'audio. Donc, une fois que nous voyons cela fonctionne correctement dans notre navigateur va tester cela dans notre environnement de test e-mail . Donc, quand testent Cela a vraiment bien fonctionné dans IOS et OS 10 Male. Maintenant, cela inclut le programme de messagerie intégré sur le Macintosh. Il comprend iPad, iPhone et iPod touch ainsi, et cela a également fonctionné dans Outlook dot com lorsque nous avons utilisé chrome, firefox et Safari, et nous avons également eu du succès avec Outlook fonctionnant sur la version Macintosh 2011 et pour plates-formes mobiles supplémentaires. Nous avons eu du succès sur Andrew 2.3 et quatre dato et sur Windows Phone 7.5. Maintenant, dans tous les clients de messagerie où cela n'a pas fonctionné, nous avons fini avec une image avec un lien d'ancrage autour d'elle. Donc, avec des clients tels que Lotus Notes, Yahoo, Gmail un puits et perspectives pour Windows, nous pouvons toujours voir le cadre de l'affiche, qui à son tour lien vers le site Web où ils peuvent regarder cette vidéo. Maintenant. Je veux également démontrer certaines des différences d'expérience utilisateur entre les clients de bureau et les appareils mobiles. Donc ici, j'ai un appareil mobile, et si je viens ici et lance mon email, vais aller dans notre vignoble, par email, je fais défiler ici, on peut voir la vidéo fonctionnait ici. Cependant, quand je viens ici et appuyez sur la vidéo, il va passer à son lecteur mobile intégré et jouer cela en plein écran. Une fois la vidéo terminée, cela reviendra à notre email. Maintenant, certains tablettes, nous pouvons lire la vidéo en ligne comme nous le pouvons dans certains clients de bureau. Donc, pour le démontrer, regardons à nouveau cet e-mail sur une tablette. Je vais faire défiler vers le haut, voir la vidéo, et ce qui va se passer ici, c'est quand j'appuie sur la vidéo ici va faire apparaître les commandes. Nous verrons à nouveau le lecteur vidéo en ligne, peu comme ce que nous verrions à l'intérieur d'un client de bureau. Maintenant, compte tenu des clients de messagerie qui ne prennent pas en charge la vidéo vous donnera une image liée. Je pense que la vidéo html cinq était un type de média très viable pour vos e-mails HTML. 26. Encodage et intégration d'images de Base64: maintenant une autre façon que nous pouvons spécifier des graphiques et les intégrer dans HTML est à vous êtes I et code sont des images. Cela signifie essentiellement que nous allons spécifier les graphiques comme demandant du code maintenant pour expliquer ce que je veux dire par ceci. Typiquement, nous avons des graphismes Web. Quels sont nos fichiers binaires réels sur notre ordinateur ? Comme un cadeau pour un J peg. Mais nous pouvons également spécifier les mêmes graphiques en utilisant le code demandant. Donc, si je devais zoomer un peu sur cela, nous pouvons voir un peu à quoi le code pourrait ressembler. C' est ce modèle de texte, qui est codé dans un format de base 64, qui peut ensuite être transformé en graphique dans notre page, pas généralement avec des graphiques. Nous les spécifions dans une balise HTML. Nous avons une balise d'image avec une source égalant le nom de fichier réel pour utiliser le code de base 64 . Nous allons toujours utiliser une balise d'image, mais la source ici va égaler les données Colon. Ensuite, nous allons lui donner un nom logo, grand cadeau, spécifié, basé 64 puis avoir tout le code qui représente ce graphique maintenant afin de créer 64 images basées, nous pouvons utiliser une série de ou certains éditeurs de texte peuvent avoir intégré des plug-ins. Pour trouver un outil en ligne. Vous pouvez rechercher dans un moteur de recherche et rechercher quelque chose comme la conversion d'images en base 64. Il y en a un ici en haut que j'aime par les outils de codage Web dot com. Je vais ouvrir ça dans un nouvel onglet. Maintenant, dans cette page en bas, je peux voir l'option pour télécharger un graphique Je vais venir ici et cliquez sur Choisir un fichier à partir du bureau. Allons dans mon répertoire d'images e-mail et choisissons le logo gif grand point. Et une fois que j'appuie sur télécharger, ce graphique sera téléchargé sur le serveur et ils prendront toutes ces données binaires et les convertiront en données demandant. Et ici, dans ce formulaire champs. Ils ont créé une balise d'image pour nous, que nous pouvons faire défiler et copier tout ce contenu. Et ils nous ont même donné une image d'arrière-plan, et dans les deux cas, vous verrez que cela commence par des données. L' image deux-points spécifie, est un cadeau, et encore une fois vous pouvez mettre dans un nom de fichier ici si vous voulez basé 64 puis tout ce code. Donc encore une fois, ici dans le CSS, nous verrons exactement la même structure. Maintenant, une chose à garder à l'esprit est que représenter des données binaires comme demandant va être un peu plus grand et la taille du fichier. Il sort à environ 30% plus grand. Cependant, l'avantage est qu'il n' y a pas un deuxième appel au serveur. Toutes ces données vont être à l'intérieur du HTML. Donc, pour suivre cette méthode, vous allez vouloir prendre tous les graphiques de votre e-mail et les convertir en une image de base 64. Ensuite, nous allons placer dans notre HTML. Maintenant, revenez dans notre éditeur de code. Certains éditeurs de code ont des plug-ins qui convertiront les graphiques en images de base 64 directement à l'intérieur de votre éditeur de texte. Celui que j'utilise ici pour ce cours se trouve avoir cette fonctionnalité. Donc, d'abord, je vais faire défiler vers le bas dans notre HTML. Je vais trouver la référence de l'image à ce graphique particulier. Donc, nous y voilà. Image largo grand point Donnez apparaître ici peut ouvrir mon panneau latéral ici. Maintenant, ce que nous devons faire avec beaucoup de ces plug-ins car nous devons spécifier ce graphique à partir de la racine du disque dur. Je vais venir ici et choisir le chemin de copie. Revenons ici et remplacons cette chaîne par ceci. Tout cela fait vraiment est de spécifier la position exacte du logo large à partir du disque dur de mon ordinateur . Donc volumes le nom du disque dur de l'utilisateur, mon compte d'utilisateur bureau, mon e-mail, qui est le dossier de projet sur nos images de bureau, puis local grande. Doug, si une fois ces air en place, je vais sélectionner tout ce chemin, montez les plug-ins et choisissez basé 64 encoder image. Maintenant, le résultat ici sera exactement le même que ce que nous avons obtenu de notre outil en ligne. Encore une fois, l'efficacité pourrait être un peu plus rapide si votre éditeur de texte a un branchement, et si je fais défiler ici, nous pouvons voir tout ce code supplémentaire apparaissant maintenant sur le côté de la page. Donc, une fois que vous aurez terminé cela, chaque référence graphique unique dans votre CSS et dans le HTML sera remplacée pour incorporer vos graphiques comme demandant à l'intérieur de votre e-mail, et une fois que vous aurez converti toutes vos images, vous pouvez ensuite tester votre email. Donc, quand j'ai testé cela, j'ai trouvé que cela fonctionnait très bien dans IOS et OS 10. Cela inclut iPhone, iPad, iPod Touch et Apple mail, et cela a également fonctionné dans la dernière version de Thunderbird. Maintenant, dans les cas où cela ne fonctionnait pas, qui était tous les clients de messagerie restants, au lieu de voir n'importe quel type de graphique, nous obtenons un lien cassé. Nous voyons le texte alternatif que nous avons spécifié, mais encore une fois, nous ne verrons aucun des graphiques spécifiant dans ces autres clients de messagerie. Alors que j'aime vraiment la possibilité d'intégrer des images à l'intérieur de notre contenu HTML, le fait que nous voyons une série d'images brisées à l'intérieur de la plupart des clients de messagerie m'éloigne de l'utiliser pour le courrier électronique. ce moment, cependant, il y a quelques utilisations supplémentaires que vous pourriez vouloir utiliser. Cette technique, pour cela est supportée dans tous les navigateurs Web les plus modernes. Vous pouvez également utiliser cette approche pour les graphiques en lit dans des fichiers CSS, puis réutiliser ces classes en tant que feuilles de calcul. Vous pouvez l'utiliser comme un formulaire dans les images de magasin à l'intérieur des bases de données, et vous pouvez même utiliser cette technique pour explorer la fourniture d'un fichier HTML pour les publicités Web . 27. Utiliser les graphiques à l'aide de graphiques haute définition (Retina®) dans votre e-mail HTML: dans cette leçon, nous allons parler de la prise en charge des écrans haute définition ou rétine avec vos graphismes à l'intérieur de votre e-mail. Donc, je veux d'abord parler de ce que nous devons faire à un graphique pour qu'il soit activé haute densité ou rétine. Maintenant, avant que nous ayons des écrans haute définition ou rétine activé, nous avions une densité standard ou une faible densité, qui était quelque part environ 120 pixels par pouce. Depuis lors, les fabricants ont été en mesure d'adapter de plus en plus de pixels sur un écran. Lorsque nous avons environ 240 pixels par pouce, nous passons dans les écrans haute définition ou haute densité, et c'est la première version de haute densité. Au moment de cet enregistrement, les fabricants ont été en mesure de créer des écrans qui prennent en charge 34 et 5 K, soit 34 et cinq fois le nombre de pixels pris en charge par l'affichage de densité standard. Donc, ce que cela signifie pour les graphiques, c'est que si nous créons un graphique de cette taille, ils vont être affichés sur l'appareil. Un dispositif de définition standard affichera les graphiques avec toute la fidélité que nous avons dans le graphique original. Cependant, si nous prenons ce même graphique et les affichons sur des appareils à haute densité. Ces périphériques ont plus de pixels que ce qui est représenté dans l'image. Cela entraînera donc des images floues ou floues parce que l'appareil doit dupliquer le nombre de pixels, puisque ces données supplémentaires ne sont pas dans le fichier image lui-même. Donc, ce que nous devons faire pour les écrans haute définition est utilisé deux fois le nombre de pixels dans l'image originale, sorte que lorsqu'ils sont affichés sur ces appareils haute densité, il y a des pixels dans l'image qui pourraient être représentés à travers tous les pixels de l' écran haute définition. Maintenant, si vous avez suivi ce cours avec la création de nos graphismes et Photoshopped, nous avons un moyen très rapide de créer des graphiques haute définition à l'intérieur d'une boutique photo . Donc, dans les fichiers d'exercices, je vais venir ici et ouvrir des images de bannières que le PSD maintenant à l'intérieur d'ici. Nous avons une série d'objets intelligents. Nous en avons parlé plus tôt dans le cours que je viens ici et sélectionnez cette personne. Objet intelligent frappé Commander Control T pour transformer. Je peux voir apparaître que cette image est mise à l'échelle 39,8% sur la largeur et 40% sur la hauteur. Cela me dit que l'objet intelligent original à l'intérieur est plus du double de cette taille. Cela signifie que nous pouvons doubler notre boutique photo de taille toile va à son tour doubler toutes les tailles des tranches. Et puis nous pouvons simplement dire à propos d'un ensemble de graphiques haute définition. Donc je vais appuyer sur la touche d'échappement, descendre au menu de l'image, descendre à la taille de l'image. Allons ici, assurez-vous que la largeur et la hauteur sont liées. Changons 700 à 1400. Cela changera automatiquement la hauteur aussi. Je vais cliquer sur OK, boutique photo va augmenter la toile. Il augmentera la taille de toutes les tranches. Il va mettre à l'échelle les transformations des objets intelligents et nous donner notre tout nouveau jeu de graphiques. J' aime voir Clé pour mon outil de tranche double clic. La première tranche que nous pouvons voir. C' est maintenant 12 76 par 3 60 C'est jusqu'à bannière grande. Venez ici et modifions ceci pour souligner deux clics X. OK, alors je vais dans chacune des tranches restantes et je change cela afin que nous puissions enregistrer cela le même répertoire et tous nos graphiques haute définition auront un trait de soulignement pour quitter la fin. Maintenant, je vais faire une chose de plus ici juste pour que je conteste ça à distance. Puisque j'utiliserai un service en ligne pour tester cela, je n'aurai aucun moyen de savoir si les images résultantes que je vois à travers mon navigateur Web me montrent les graphiques de la rétine ou non. Donc, ce que je vais faire temporairement, c'est venir ici et ajouter une couche d'ajustement appelée inverser . Et je vais inverser tous ces graphiques individuels de cette façon. Lorsque j'ai regardé les tests sur mon serveur distant, je peux voir si les graphiques de la rétine sont activés. S' ils sont utilisés correctement, je peux venir ici et enlever cette couche de réglage. Donc encore une fois, je fais juste ça pour les tests. Donc maintenant, avec toutes mes tailles graphiques doublées et mon calque de réglage en place, je vais descendre dans le menu de fichiers et choisir enregistrer comme alors dans mon dossier de modèles d'art. On va appeler ces images de bannières soulignent deux X maintenant j'ai deux ensembles d'images de bannières. J' ai ma définition standard, et ma haute définition maintenant fera également le même processus pour tous les graphiques de contenu. Donc on va doubler la taille. Je vais mettre un ajustement de calque pour inverser en haut, puis nous aurons toute une série de graphiques haute définition. Lorsque vos deux fichiers Photoshopped sont modifiés, descendez dans le menu Fichier. Choisissez un Web plus sûr. Toute votre optimisation est se souviendra. Nous allons descendre et choisir enregistrer puis à partir du bureau choisira mon e-mail choisir le répertoire des images , toutes les tranches utilisateur, puis nous allons frapper. Enregistrer maintenant dans notre fichier de projet, Ouvrons le répertoire des images. Et depuis que j'ai sauvé tous mes graphiques de bannière, je peux voir que j'ai maintenant bannière grande soulignée deux X, l'image fantôme. Même pour les moyennes, même pour les petites. Et puis une fois que vous avez fait la même chose avec vos images de contenu, fichier Photoshopped aura toute une série de deux graphiques X supplémentaires pour toutes les images de contenu. Donc à l'intérieur d'ici, je peux voir cette signature toutes les icônes individuelles, les logos et les graphiques promo. Maintenant, une fois que vous avez tous vos graphiques double taille créés. Fermons notre répertoire Images. Fermons notre fichier Photoshopped. Revenons aux fichiers d'exercice et il y a un nouveau fichier dans le dossier trois extraits appelés Pixel ratio point CSS. Revenons ici et ouvrons ceci dans notre éditeur de texte maintenant, tout comme les requêtes média ont été créées plus tôt pour les tailles d'écran individuelles. Ici, nous avons quelques requêtes de médias où nous avons deux ensembles de propriétés. Nous avons Onley écran, et voici notre maximum avec pour l'écran moyen qu'une fin. Et puis nous avons toute une série de pixels. Requêtes de médias CSS. Donc, le 1er 1 que nous définissons ici est pour le kit Web, donc le ratio de l'appareil de pixel est, aussi. Et juste pour noter, si vous ciblez un iPhone six, le ratio de pixels ici serait au numéro trois, et ensuite nous avons une virgule. Ensuite, nous avons une autre déclaration, qui répète la taille, et puis nous ciblons la Moselle un navigateur que l'opéra. Ensuite, nous avons utilisé le ratio de pixels standard de l'appareil, puis nous avons choisi les résolutions d'écran aussi. Donc, cette requête multimédia ici met en place l'écran moyen, plus tous ces différents paramètres de l'appareil, puis cela se termine ici et à l'intérieur d'ici . Ce que nous avons fait est de redéfinir les images d'arrière-plan. Donc, pour le logo, nous avons l'image de fond. Et puis nous pointons vers la version de soulignement deux x de ce fichier cadeau, puis nous devons également définir la taille de l'arrière-plan. Cela définit la taille de mise à l'échelle de cette image d'arrière-plan. Sinon, l'image arriverait à deux fois la taille, ce que nous ne voulons pas avoir eu lieu. Nous voulons obtenir l'avantage de mettre à l'échelle un graphique plus grand jusqu'à la plus petite taille d'affichage, et lorsque nous descendons ici et parcourons le reste des règles, nous pouvons voir notre bannière meilleur médium, le contenu Tedy ici. En fait, nous spécifions une image de fond plus tôt, donc nous avons besoin des soins de vol importants pour remplacer cela. Et puis nous avons partout sur Individual Promo SA, alors, alors, si nous faisons défiler vers le bas, nous avons exactement la même construction. Cependant, le avec cela étant dit à 510 qui correspond sont de petite taille, nous avons toujours tous les mêmes drapeaux de navigateur ici sur nos paramètres de résolution, puis ici nous avons fait la même chose à nouveau. Nous avons dit qu'il image d'arrière-plan pour le logo a pointé cela pour souligner deux X dit que la taille de fond et ont fait toutes les mêmes propriétés ici aussi bien. Donc, cela ressemble à beaucoup de CSS. Mais ce que nous faisons vraiment est de redéfinir n'importe quelle image d'arrière-plan pour les petites et n'importe quel arrière-plan pour les moyennes. Et puis nous avons les requêtes des médias qui correspondent à la taille et aux indicateurs individuels du navigateur . Alors ce qu'on va faire ici vient simplement dans le menu d'édition ? On va choisir, sélectionner tout. Alors on va choisir copie. Revenons donc à notre e-mail HTML. Ce que je vais faire est juste de les mettre après nos requêtes médiatiques existantes, donc je vais juste faire défiler vers le bas jusqu'à après le petit avant la balise de style de fin. Voyons si vous revenez et collons toutes ces règles. Maintenant, à ce stade, vous avez le choix avec ce que vous pouvez faire avec les balises d'image à l'intérieur de notre grand écran . Nous avons donc toutes nos balises d'image par défaut à l'intérieur de notre e-mail HTML. Donc ici, nous avons le logo grand, par exemple, maintenant en CSS, nous ne pouvons pas changer la valeur des attributs source d'une balise image Donc ce que cela signifie, c'est nous devons décider si nous allons utiliser le grands graphiques dans les balises d'image ici ou non. Un argument contre la mise en place des graphiques volumineux à l'intérieur des balises d'image est que les personnes qui regardent la grande version de votre e-mail se trouvent probablement sur un ordinateur de bureau, qui n'a pas d'écran haute définition. Ou ils peuvent utiliser l'un des clients Web, qui ne prennent pas également en charge certaines des requêtes multimédias. Donc, dans les deux cas, nous enverrions beaucoup de données supplémentaires pour les personnes qui ne sont pas sur l'écran haute définition. Cependant, si vous voulez utiliser les images haute résolution dans les balises d'image, nous pouvons simplement venir ici et changer local grand pour souligner deux X,par exemple, par exemple, et nous obtiendrons l'effet de mise à l'échelle car la largeur et la hauteur ont déjà été définies. Encore une fois, c'est complètement à la hauteur de ce que vous voulez supporter à l'intérieur de votre grand écran. Maintenant, je décide de ne pas utiliser les graphiques haute définition et la grande version, et je vais tester ces petits et moyens écrans afin que je puisse voir si les requêtes média sont lancées. Donc, à ce stade, je vais venir au menu de fichier va choisir enregistrer maintenant avant de lancer cela à travers n'importe quel logiciel de test . Je veux d'abord m'assurer que les requêtes des médias fonctionnent correctement. J' ai donc mis cet e-mail sur notre serveur Web local. J' ai frappé ceci avec mon iPhone en mode portrait. Je peux voir la version petit écran en mode paysage. Je peux voir la version moyenne écran, et je peux voir tous les graphiques inversés ici, ce qui me dit que les requêtes de médias CSS détectent correctement la résolution de cet écran et commutent les graphiques haute définition. Et maintenant, avec ce travail, exécutons ceci sur un outil de test en ligne. Donc, j'utilise le tourbillons ici dans les clients mobiles. Vue rapide. Je peux voir tous les graphiques individuels qui sont inversés, me faisant savoir que tous ces appareils sont correctement détectés Maintenant, en plus de juste ce qui est disponible sur le tourbillon, un site Web. Vous pouvez également exécuter votre propre test comme je l'ai fait avant que je suis allé orteil litmus et le vérifier dans d'autres appareils ainsi, et vous verrez que cela fonctionnera sur les systèmes de bureau avec des écrans haute définition et toutes les tablettes avec haute définition s'affiche également. Et je pense qu'il est également intéressant de noter que vous pouvez utiliser ces mêmes requêtes multimédias dans vos conceptions Web réactives. Ces requêtes de médias ne sont pas seulement pour les courriels. Maintenant. La création de graphiques haute définition se traduira par des tailles graphiques beaucoup plus grandes, donc je veux parler de quelques alternatives maintenant. Typiquement, nous avons une taille d'affichage, qui est représentée ici, et ce que la plupart des gens vont faire est de prendre un graphique en double de la taille globale. Donc, dans ce cas, sont grandes. Le graphique de la bannière est maintenant de 12 76 par 3 60 compressé à 75 % de qualité jp. Il en résulte un fichier de 282 kilo-octets maintenant. Une technique que j'essaie de voir si je peux obtenir un graphique beaucoup plus petit avec toute la fidélité dont j'ai besoin car je vais prendre ce graphique haute définition et je vais le réduire à environ 75% de la taille originale. Donc, dans ce cas, je vais obtenir une image de 9 57 par 270 pixels. Je vais également augmenter la compression J salaire, donc je vais régler la qualité à 45%. Cela entraînera une taille de fichier de 82,2 kilo-octets, ce qui entraînera un fichier beaucoup plus petit qu'un peu plus de 30 % de la taille du fichier d'origine . Et puis, lorsque ce graphique est également mis à l'échelle à la taille cible d'origine, l' avantage supplémentaire d'avoir des pixels supplémentaires dans cette image à afficher dans cette zone. Et bien que cette technique soit toujours meilleure qu'un graphique de définition standard dans de nombreux cas, cette technique sera comparable à la version haute définition avec une taille de fichier beaucoup plus petite . Ainsi, la combinaison de graphiques haute définition avec des requêtes de médias CSS de ratio de pixels vous permet commencer à utiliser des graphiques haute définition dans votre e-mail HTML. 28. Valider votre code HTML: qu' avant d'envoyer notre e-mail HTML et avant de le charger dans un système de gestion de contenu 1/3 qui déploiera les e-mails voudra valider nos entraîneurs pour s' assurer qu'il est aussi propre que possible de ne pas le faire. Je recommande d'utiliser un outil gratuit par le W trois c appelé le Service de validation du marché. Vous pouvez trouver que chez validator dot w three dot org sur ce site principal ici nous avons quelques options que nous pouvons coller dans le U R L Si nous avons l'e-mail disponible sur un serveur Web, nous pouvons télécharger dans le fichier HTML où nous pouvons utiliser l'entrée directe. Je vais choisir l'entrée directe. Ce que nous pouvons faire ici est copier et coller notre document HTML entier à l'intérieur d'ici. Revenons donc à notre e-mail que html Faisons un select all Copions l'e-mail entier dans le presse-papiers. Nous allons revenir au service de validation, entrer ici et coller simplement tout le code. Une fois que c'est en place, venons ici et cliquez sur vérifier. Maintenant, Après avoir terminé ce cours, vous pouvez voir que nous avons quatre erreurs et vous pouvez également voir que cela est la vérification en HTML pour le document Bono Transitional. Si vous avez choisi d'utiliser X html ou aucun type de déclaration, le service de validation va marquer par rapport à ces types de document pour ne pas voir quelles sont ces heures. Si nous faisons défiler vers le bas, nous pouvons voir que tout cela se rapporte à une balise all qui n'est pas spécifiée sur nos icônes à l'intérieur de nos appels. Maintenant, comme il s'agit d'un e-mail HTML, nous n'avons pas besoin de spécifier toutes les balises sur les images. Mais si, pour une raison quelconque, le client de messagerie de quelqu'un ne charge pas les images, il dira tout le texte à la place. Donc, si c'est quelque chose que vous voulez corriger, nous pouvons revenir à l'email point html. On peut faire défiler vers le bas et trouver ces appels. Trouvez une des images. Je vais trouver les raisins icône qui donnent fichier ici, et nous pouvons ajouter dans tout le texte ici de raisins. Et puis vous pouvez ajouter tout le texte aux trois restants. Et une fois que tout votre marché sera validé, nous sommes prêts à passer à un environnement de test et testé dans différents clients de messagerie. 29. Test de votre e-mail dans plus de 30 clients de e-mail HTML: maintenant, si vous utilisez actuellement un système de messagerie pour déployer vos e-mails, vous avez probablement un moyen de tester différents clients de messagerie pour voir si votre message HTML est correctement rendu. Si vous n'avez pas de service de messagerie électronique, il existe de nombreux services qui non seulement déploieront vos messages électroniques, mais aussi les testeront sur un tas d'appareils différents. Donc en ligne il y a beaucoup de services populaires. Il y a des courriels de surveillance de campagne active sur l'acide, le courrier électronique, le chimpanzé et le contact constant. Pour ce cours particulier, je vais me concentrer sur tous ces services aériens payants. Mais comme je l'ai mentionné précédemment, si vous utilisez un service comme un contact constant ou un moniteur de campagne, par exemple, ils ont également intégré des services de test. Donc, litmus a la capacité de montrer des captures d'écran de 34 des clients de messagerie les plus populaires, et nous obtenons une représentation en direct sur le site Web de la façon dont les e-mails sont rendus à travers tous ces clients de messagerie individuels. Cela nous donnera également la possibilité de nous assurer qu'ils sont réactifs. Le design fonctionne comme nous pouvons le voir sur la gauche, qui est une capture d'écran d'IOS et Android, et nous pourrions même voir quelques problèmes de rendu où certains clients de messagerie ne prennent pas en charge le remplissage approprié à l'intérieur de la zone de contenu. Ils utilisent de petites règles d'écran CSS, même si la taille de la fenêtre est clairement la grande taille et même les cas où certains graphiques sont découpés parce qu'ils ne prennent pas en charge la taille de l'arrière-plan. Après Pete, nous avons mis en place maintenant dans l'environnement névralgique, nous pouvons voir que nos clients de messagerie sont regroupés en trois catégories. Les clients de messagerie de bureau et nous pouvons voir Apple Mail Outlook. Notes Lotus Thunderbird Faites défiler vers le bas un peu plus affaiblir, Voir les clients de messagerie mobile. Android 2.3 et quatre BlackBerry iPad Outlook dot com, qui est un client basé sur le Web fonctionnant sur les appareils mobiles. Symbian et Windows 75 Et puis ici, nous pouvons voir des clients basés sur le Web, y compris un point com Gmail Outlook et Yahoo. Donc, afin de voir certains de ces Weaken simplement descendre et cliquer sur l'un des e-mails, et cela fera apparaître une capture d'écran d'un ordinateur qui fonctionne bien mail dans Firefox et nous montrer exactement ce que cet e-mail rend comme dans ce client particulier. Maintenant, l' une des choses dont nous avons parlé dans l'introduction est le fait que nous allons avoir un design qui va se dégrader gracieusement. Donc, si nous regardons une capture d'écran d'Outlook 2007 par exemple, ici, nous pouvons voir quelques exemples de certaines des fonctionnalités que nous avons mises en place ne sont pas prises en charge afin que nous n'obtenions pas les coins arrondis sur le bouton en savoir plus. Nous n'obtenons pas l'ombre portée, et nous n'obtenons pas le fantôme de l'arrière-plan derrière la zone de contenu ici. Et si nous faisons défiler vers le bas, nous pouvons voir que le rembourrage n'est pas pris en charge sur les balises d'ancrage, non plus. Mais encore une fois, nous avons conçu cela de telle sorte que si certains éléments de conception tombaient ou se dégradaient, la continuité de la conception globale reste intacte Maintenant. Un autre problème pour cet e-mail particulier est Lotus Notes, 6.57 et 8.5. Des notes de lotus. Huit rend parfaitement, mais il y a quelque chose sur 657 et 8.5 qui ne supporte pas le rembourrage sur ces éléments individuels ici et plus tard dans le cours, je vais vous donner quelques suggestions au cas où vous auriez besoin de soutenir ces e-mails clients. Une autre bizarrerie intéressante est sur Windows 7.5. Il ne prend pas en charge les techniques de design responsive, mais ce qu'il fait est de mettre à l'échelle l'ensemble du Vieux port. Alors que nous n'obtenons pas les avantages de la réponse de la conception réarrangeant l'écran, nous voyons la composition entière à l'intérieur du port de vue. Maintenant, si nous regardons notre design à l'intérieur de Gmail, la mise en page fonctionne parfaitement. Cependant, Gmail ne prend pas en charge la conception réactive. Donc, si nous chargeons notre e-mail via Gmail sur un appareil mobile, Gmail ne respectera pas les règles de conception responsive. Donc, nous allons toujours obtenir le défilement horizontal même si nous sommes sur un appareil qui, s'il utilisait son application de messagerie native, prendrait en charge la réponse des techniques de conception. Maintenant, un client de messagerie Web qui nous donnera quelques problèmes avec la conception responsive est Yahoo Mail. Comme vous pouvez le voir, la taille de la fenêtre ici est beaucoup plus grande que 510 pixels. Cependant, Yahoo Mail fait référence à la plus petite taille d'écran de notre requête multimédia qui a défini pour 510. Donc, lorsque je fais défiler vers le bas, vous pouvez voir que tous les styles de conception que nous avons mis dans la plus petite requête média de taille d'écran est maintenant affiché comme le grand écran à l'intérieur de Yahoo Mail. Maintenant, il a défini la requête média pour le plus petit écran pour être aussi bas que 100 pixels, juste pour voir s'il y avait un seuil minimum sur la taille ici qui faisait que Yahoo utilisait la petite taille d'écran et même définir le plus petit écran à 100 pixels m'a donné le les mêmes résultats ici. Donc, alors que tous les autres clients de messagerie ont eu des problèmes de rendu de l'e-mail HTML en général, aucun d'entre eux n'a eu de problème avec les règles de conception réactives comme le fait Yahoo Mail. Donc, si Yahoo Mail est l'un des clients que vous devez soutenir, je vous recommande de ne pas mettre dans certaines des règles réactives. Vous pouvez donc utiliser la même mise en page exacte que nous avons travaillé dans ce cours et ne pas appliquer les règles Responsive. Et nous en parlerons plus tard dans le cours avec des suggestions pour le courrier Yahoo dans la dernière zone de problème. Je veux jeter un oeil à son BlackBerry 5. On peut voir ici. Cela a un client de messagerie graphique complet à l'intérieur de celui-ci, mais vous remarquerez que les balises TD sur l'ensemble de la rose individuelle ne sont pas en expansion pour être la largeur de la table complète là-bas à l'intérieur de maintenant. Ce comportement n'est pas typique pour les balises TD. Et plus tard dans le cours, je vais vous proposer des suggestions pour ce que vous pouvez faire pour modifier le code pour fonctionner dans BlackBerry five. Et à l'exception de quelques clients de messagerie HTML, vous pouvez voir que cette conception, avec son complexe conçu dans des tables imbriquées, est rendu correctement et la plupart des clients de messagerie courants qui sont utilisés aujourd'hui et maintenant pour le reste du cours, je vais parler de quelques suggestions que vous pourriez vouloir considérer pour Yahoo Mail, BlackBerry cinq et Lotus notes. 30. Suggestion pour Yahoo ! Incompatibilités du courrier: Maintenant, le problème que nous avons avec Yahoo Mail est que Yahoo Mail ne prend pas en charge les déclarations de requête des médias . Donc, les règles de l'écran moyen et les règles du petit écran sont toutes vues par Yahoo. La requête média indiquant que la spécification des tailles individuelles n'est pas prise en charge. Donc, un contournement que nous avons est que nous pouvons convertir nos sélecteurs basés sur les classes en sélecteurs basés sur les attributs . Donc, nous le ferions en convertissant le conteneur de points de table en table, puis à l'intérieur de crochets . La classe est égale au conteneur. le moment, cela n'est pas pris en charge par Yahoo, mais il est pris en charge par tous les autres clients de messagerie. Et si elle un certain point Yahoo ne commence à soutenir les attributs électeurs, mais pas les questions des médias . Ma deuxième suggestion serait de rendre vos petits graphiques assez larges pour englober la large fenêtre à l'intérieur de Yahoo Mail. Ainsi, la bannière du petit écran et le graphique de fond du petit écran doivent être assez larges quelque part autour de 640 pixels pour qu'il ne ressemble pas à une erreur lorsque les règles du petit écran s'affichent à l'intérieur de l'écran plus grand. Et la deuxième chose que vous voulez faire est de créer un autre ensemble d'icônes pour les appels, puisque la propriété de taille d'arrière-plan dans notre CSS n'est pas prise en charge dans Yahoo Mail, donc vous aurez deux ensembles d'icônes, la taille d'origine et un autre ensemble fixé à 50 par 50. Et puis vous pouvez référencer ceux à l'intérieur des règles pour petit écran. 31. Suggestions pour la correction de la mise en page Blackberry 5: si vous avez besoin de votre conçu pour fonctionner dans BlackBerry five. BlackBerry five ne prend pas en charge les requêtes multimédias. Mais comme nous l'avons mentionné précédemment, les étiquettes TD à l'intérieur de la table rose air. Ne pas étendre leur plein avec ce que BlackBerry OS a besoin est un paramètre avec sur tous les TDs individuels. Et vous auriez besoin de mettre cela sur la route du logo, le contenu de Roe titre et chaque route qui doit être 6 40 Maintenant, l'implication pour cela sur la réponse de l'aspect design est que c'est une autre propriété que nous allons avoir besoin de définir avec notre les requêtes des médias. Donc, comme vous pouvez le voir ici suivant cette approche à l'intérieur de l'écran moyen, nous allons devoir définir une autre propriété sur le contenu du titre du logo TV point et toutes les autres routes sur lesquelles vous allez mettre la propriété with. Et vous devez faire la même chose pour les petits écrans aussi. Donc, cette approche va en résulter beaucoup plus, avec des propriétés étant assignées à vos règles responsive toe remplacent toutes les propriétés avec qui seront sur les balises T D. Donc, si vous avez besoin de prendre en charge Blackberry five, vous en aurez quelques autres avec des propriétés à gérer à l'intérieur de vos règles HTML et CSS 32. Suggestion pour soutenir les notes Lotus 6.5, 7 et 8.5: Maintenant, si vous avez besoin de prendre en charge Lotus Notes sixième sortie, 57 ou 8.5. La première suggestion que j'aurais est de ne pas utiliser les propriétés d'arrière-plan sur les balises d'ancrage . Je n'essayerais pas de convertir les balises d'ancrage à l'intérieur du pro le plus en boutons. Ceux-ci ne sont pas pris en charge, vous pouvez donc supprimer la couleur d'arrière-plan en ligne et peut-être changer la couleur des liens en vert ou une couleur différente. Et l'autre chose que j'envisagerais de faire est de mettre une seule table de cellule à l'intérieur de chaque rose de table. Vous remarquerez ici que le rembourrage n'est pas pris en charge sur les balises TD, donc tout le contenu à l'intérieur des TdS touche les bords. Donc, si nous mettons une table à l'intérieur de chaque table, route qui contient du contenu et définit la largeur à environ 615 pixels et réglons l'alignement au centre nous donnera l'espacement d'encart que nous recherchons sur les TDs les plus extérieurs. Et si vous voulez suivre cette approche, vous voulez également vous assurer de supprimer le panoramique sur tous les autres TDs. Puisque tous les autres clients de messagerie le prennent en charge et ont utilisé la largeur du nid, la table pour contrôler l'espacement que vous avez à droite et à gauche de votre e-mail. Maintenant, il est également intéressant de noter que cette approche fera en sorte que les tables promo et les tables koala soient trois tables profondes. Nous avons une table ultrapériphérique, qui centre notre contenu entier, le conteneur de contenu principal, puis les tables pour les promotions et les appels. Donc, une fois que vous aurez mis cela en place, vous voudrez le tester dans tous les clients de messagerie que vous souhaitez prendre en charge. 33. Planifier les mises en page d'autres: Maintenant que nous avons terminé de construire cette disposition particulière, la prochaine chose que je suis sûr que vous voudrez faire est de commencer à construire certaines de vos propres mises en page. Donc, je veux prendre quelques minutes ici et expliquer pourquoi je mets certaines de ces choses ensemble comme je l'ai fait d'abord, Quand nous avons plusieurs tables à l'intérieur de la promo SRO, une des choses que vous voudrez probablement faire est d'ajouter plus de tables à l'intérieur de cette zone. Maintenant. La raison pour laquelle j'ai mis deux tables à l'intérieur de chaque ligne est que certains navigateurs plus anciens ne supportent pas une balise de compensation. Donc, si vous êtes deux, les tables ne sont pas de la même hauteur. Donc, par exemple, si cette deuxième table ici est un peu plus petite parce qu'il y a moins de texte ou un graphique plus petit , ce que cela va faire dans les anciens clients de messagerie comme Outlook est autorisé à la troisième table à flottent à côté de la première table, en quelque sorte sous la deuxième table, puis cela permettra à la quatrième table de se déplacer à la position gauche. Donc, ce n'est pas la mise en page désirée. Donc, si vous voulez ajouter plus de tables à l'intérieur de cette ligne, je recommande d'ajouter une ligne séparée entière et de placer vos tables supplémentaires à l'intérieur de là car les anciens clients de messagerie prendront en charge la nouvelle ligne de table avant qu'ils ne prennent en charge la balise de compensation. Maintenant, si vous vous souvenez des quatre tables que nous avions dans la ligne des appels, nous n'avons pas ce problème parce que nous ne commençons pas à réorganiser la mise en page avant d'aller aux requêtes des médias. Cela signifie que seuls les clients de messagerie plus récents verront même ces règles particulières dans ces clients de messagerie particuliers prendront en charge les balises de compensation. Et maintenant, si vous commencez à regarder d'autres idées de mise en page, je voudrais vous donner quelques recommandations sur la façon dont vous pourriez gérer certaines de ces mises en page alternatives . abord, si vous avez une mise en page comme celle-ci où vous avez une barre latérale, ce sera toute la hauteur du contenu et un en-tête supérieur et un pied de page divisés en deux groupes différents. Ma recommandation ici est de diviser cela en plusieurs tables. Cela est dû au fait que la fusion de plusieurs cellules de tableau avec différentes mesures dans la même table parent peut avoir des problèmes de mise en page. Donc encore une fois, je recommande de briser miss en plusieurs tables. Et aussi, si vous souhaitez une barre latérale où la hauteur de la barre latérale est la même hauteur que la zone de contenu. Vous aurez besoin d'une table avec deux colonnes à l'intérieur de là. Mais rappelez-vous aussi ici que pour les mobiles, vous aurez toujours ces données de table sur le côté. Donc, vous devez soit rendre votre contenu vraiment petit, soit peut-être masquer le contenu à l'intérieur de ces données de table. Maintenant, si vous voulez faire quelque chose comme ça, où la zone d'en-tête et de pied de page ont fusionné des cellules de tableau, mais ils ont les mêmes mesures. Vous pouvez le faire à l'intérieur d'une seule table, et cela rendra assez précisément sur tous les différents navigateurs. Maintenant, si vous voulez concevoir quelque chose de similaire à ceci, où vous dirigez la zone et la zone de contenu sont les mêmes avec et vous avez une structure de colonne à l'intérieur du contenu. Vous pouvez créer une table externe, puis des tables imbriquées à l'intérieur afin que vous puissiez obtenir des images à côté de votre texte. Et cela est similaire aux techniques que nous avons utilisées pour la mise en page dans ce cours particulier également. Et enfin, lorsque vous concevez d'autres mises en page pour votre courrier électronique HTML, gardez à l'esprit que plus votre conception est simple, plus vous aurez réussi à traduire votre design dans tous les différents messages HTML 34. Où aller d'ici: Maintenant que vous avez terminé la création d'un courrier électronique HTML réactif, il est important de faire savoir à vos clients quelles sont les limites. E-mails HTML. Faites-leur savoir que la conception ne sera pas parfaite pour tous les différents clients de messagerie et, dans certains cas, fonction de la mise en page et de ce qui est pris en charge un client de messagerie, vous devrez peut-être faire quelques concessions de conception. Vous devez également demander à votre client de conception de hiérarchiser les clients de messagerie HTML qu'il doit prendre en charge. Cela vous aidera à hiérarchiser les concessions HTML et CSS et de mise en page que vous devez faire fonction de ce qui est pris en charge dans les différents clients de messagerie. Et avec leurs nouvelles compétences en conception, essayez différentes combinaisons de HTML et CSS pour créer de nouvelles mises en page. C' est ce que j'ai fait pour réaliser la conception de ce cours particulier, puis tester et affiner votre manteau pour prendre en charge tous les clients de messagerie qui sont dans votre liste. Et vous voudrez également lire des articles et bloquer des publications en ligne. Le Moniteur de campagne dispose d'un guide gratuit que la plupart des fournisseurs de messagerie que j'ai mentionnés précédemment dans ce cours indiquent comme une ressource de conception pour des conseils de messagerie réactifs. Et avec cela, cela conclut la création de messages HTML réactifs. Et j'apprécie vraiment que tu regardes mon cours