Javascript Girl
  1. Javascript Girl
  3. Comment créer un modèle de messagerie pour gmail en utilisant HTML et CSS
Intereting Posts
Modules es2015 – comment nommer les exportations dynamiquement Comment convertir une chaîne en tant que nom de champ de l'objet en javascript Réducteur Réducteur Redux: l'erreur 'this.props.tasks.map n'est pas une fonction' JQuery fadeIn fadeOut avec le clic Télécharger un div dans une page HTML en format pdf à l'aide de javascript Phonegap InAppBrowser afficher pdf 2.7.0 Existe-t-il un plugin d'éclipse qui crée une vue de fond pour le "modèle de module révélateur javascript"? Convention de nommer JavaScript pour les promesses? Google Spreadsheet Script – Comment transposer / faire pivoter un tableau multidimensionnel? Solution RTSP pour JavaScript / HTML5 Rails 4 bootstrap 3 ajax modal Empêchez la référence circulaire window.getSelection () Quel est le rôle des dossiers src et dist? Pourquoi ProgressEvent.lengthComputable est-il faux? Besoin du code jQuery pour ajouter des paramètres à toutes les URL contenues dans un div

Comment créer un modèle de messagerie pour gmail en utilisant HTML et CSS

Je me demandais comment je pourrais concevoir un modèle de courrier électronique à l'aide de HTML et CSS, puis incorporer cela dans un courrier électronique. Je veux le faire comme font d'autres entreprises lorsqu'ils envoient des courriels de confirmation et des bulletins d'information.

Que vous préfériez coder un courriel à la main ou utiliser un modèle préexistant, il existe quelques règles à garder à l'esprit lors de la création d'un courrier électronique HTML:

  • Utiliser des tableaux dans vos mises en page
  • Positionnement à largeur fixe (pour les courriers électroniques non réactifs)
  • Pixel Units
  • Les possibilités avec CSS (cochez le guide Ultimate Guide to CSS ci-dessous)
  • CSS en ligne
  • Anchor Links Best Practices
  • Test dans tous les principaux clients
  • Toujours offrir des vues sur le Web
  • Ajout de contenu d'image
  • Évitez le dossier Spam!
  • Ajouter une option de non-inscription

Jetez un oeil à ces sites pour plus d'informations sur ce sujet:

Comment coder les bulletins électroniques HTML

9 astuces pour concevoir le bulletin HTML parfait

Comment coder un courrier électronique dans 6 étapes simples

Le guide ultime de CSS – Une panne complète du support CSS pour chaque client de messagerie mobile mobile, mobile et Web populaire

Un livre très utile que j'ai utilisé avant de commencer un travail est:

Email HTML moderne – Jason Rodriguez

Il y a très peu de livres sur l'écriture de HTML pour le courrier électronique, donc c'est l'un des seuls décents que j'ai trouvé!

Chaque fois que je commence à faire un courrier électronique, j'utilise un point de départ comme ci-dessous: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body{-webkit-text-size-adjust:none;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} </style> </head> <body style="padding:0px; margin:0PX;" bgcolor=""> <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="" style="table-layout:fixed; margin:0 auto;"> <tr> <td width="640" align="center" valign="top"> <!--Insert content here--> </td> </tr> </table> </body> </html>

Cela inclut certaines corrections, comme une table d'emballage à 100% à l'extérieur, ce qui signifie que Yahoo! Ne laissera pas aligner votre courrier électronique et un correctif pour le problème de hauteur de ligne dans Outlook.com, où Outlook.com établit toutes les hauteurs de ligne de 131%. La largeur incluse ici est 640, ce qui donne au courrier électronique une largeur fixe pour le bureau et est généralement de 600-700px.

Les tables doivent être utilisées en tout temps, et les tableaux contiennent des lignes et des colonnes ( <tr> et <td> ). Les tables peuvent être imbriquées entre elles: 

 <table width="" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table width="" border="0" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> </table> </td> </tr> </table>

Chaque ligne d'une table doit avoir le même nombre de colonnes, sinon les colonnes d'une rangée doivent être imbriquées dans une table. Les tables peuvent également être empilées, donc dans un <td> , vous pouvez avoir plusieurs tables qui s'empilent verticalement sans avoir besoin de lignes. Le contenu, tel que le texte ou les images, se situe dans un <td> .

Tous les styles CSS devraient être en ligne: 

 <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#fffffe; text-align:right; text-decoration:none; font-weight:normal;">Hello</td>