Un modèle d’e-mail réactif

Un email de vos amis de Litmus (@litmusapp)

Le courrier électronique est étonnamment difficile. Bien que cela ait été minutieusement testé, votre kilométrage peut varier.

Il est fortement recommandé de tester en utilisant un service comme Litmus (http://litmus.com) et vos propres appareils.

Prendre plaisir!

->

charset=« utf-8 »>

Nom=« fenêtre » contenu=« width = largeur de l’appareil, échelle initiale = 1 »>

http-equiv=« Compatible X-UA » contenu=« IE = bord » />

style=« margin: 0! important; padding: 0! important; »>

aligner=« centre » bgcolor=« # 333333 »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« wrapper » style=« largeur max: 500 px; » largeur=« 100% »> aligner=« centre » classe=« logo » style=« padding: 15px 0; » valign=« Haut »>href=« http://litmus.com » cible=« _Vide » rel=« noopener noreferrer »>alt=« Logo » frontière=« 0 » la taille=« 60 » src=« http: // allez.pardot.com / l / xxxxx / xxx-xxx-xxxx / 5tznsw / 93172/127374 / logo_1.jpg «  style=« display: block; font-family: Helvetica, Arial, sans-serif; color: rgb (255, 255, 255); font-size: 16px; width: 60px; height: 60px; border-width: 0px; border- style: solide; «  largeur=« 60 »>

aligner=« centre » bgcolor=« #ffffff » classe=« rembourrage de section » style=« rembourrage: 70px 15px 70px 15px; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« responsive-table » style=« largeur max: 500 px; » largeur=« 100% »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » classe=« rembourrage » pardot-Région=« image-héros »>href=« http://litmus.com » cible=« _Vide » rel=« noopener noreferrer »>alt=« Insérer un texte alternatif ici » frontière=« 0 » classe=« img-max » la taille=« 400 » src=« http: // allez.pardot.com / l / xxxxx / xxx-xxx-xxxx / 5tznt1 / 93172/127376 / hero_1.jpg «  style=« display: block; color: rgb (102, 102, 102); font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 400px; border-width: 0px; border- style: solide; «  largeur=« 500 »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » classe=« rembourrage » style=« taille de police: 25px; famille de polices: Helvetica, Arial, sans-serif; couleur: # 333333; padding-top: 30px; » pardot-Région=« titre de héros »>Les dernières nouvelles aligner=« centre » classe=« rembourrage » style=« padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: # 666666; » pardot-Région=« texte-héros »>Lorem ipsum dolor sit amet, elect adipiscing consectetur. Sed varius, leo a ullamcorper feugiat, ante purus sodales justo, a faucibus libero lacus a est. Aenean at mollis ipsum. aligner=« centre »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » classe=« rembourrage » style=« padding-top: 25px; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« conteneur de bouton mobile »> aligner=« centre » bgcolor=« # 256F9C » style=« border-radius: 3px; » classe=«  » pardot-Région=«  »> classe=« bouton mobile » href=« https://litmus.com » style=« font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 15px 25 pixels; bordure: 1 pixel solide # 256F9C; affichage: bloc en ligne; «  cible=« _Vide » rel=« noopener noreferrer »>En savoir plus →

aligner=« centre » bgcolor=« # F5F7FA » classe=« rembourrage de section » style=« rembourrage: 70px 15px 70px 15px; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« responsive-table » style=« largeur max: 500 px; » largeur=« 100% »> pardot-répétable=« en-tête de section »> pardot-répétable=« section blog »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » classe=« rembourrage » style=« taille de police: 25px; famille de polices: Helvetica, Arial, sans-serif; couleur: # 333333; » pardot-Région=« section-header-blog »>Autour du blog aligner=« centre » classe=« rembourrage » style=« padding: 20px 0 20px 0; taille de police: 16px; hauteur de ligne: 25px; famille de polices: Helvetica, Arial, sans-serif; couleur: # 666666; » pardot-Région=« section-blog-sous-en-tête »>Lorem ipsum dolor sit amet, elect adipiscing consectetur. aligner=« centre » la taille=« 100% » valign=« Haut » largeur=« 100% »> aligner=« centre » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » style=« largeur max: 500 px; » largeur=« 100% »> aligner=« centre » classe=« rembourrage » style=« font-size: 0; » valign=« Haut »> classe=« wrapper » style=« display: inline-block; margin: 0 -2px; max-width: 50%; min-width: 240px; vertical-align: top; width: 100%; »> aligner=« la gauche » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« wrapper » style=« largeur maximale: 240 pixels; » largeur=« 100% »> aligner=« centre » valign=« Haut »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> style=« padding: 20px 0 30px 0; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » bgcolor=« # F5F7FA » pardot-Les données=«  » style=« background: rgb (245, 247, 250); » valign=« milieu » classe=«  » pardot-Région=« blog-section-image-1 »>href=« http://litmus.com » cible=« _Vide » rel=« noopener noreferrer »>alt=« Images fluides » frontière=« 0 » classe=« img-max » la taille=« 130 » src=« http: // allez.pardot.com / l / xxxxx / xxx-xxx-xxxx / 5tznt5 / 93172/127380 / news_1.jpg «  style=« display: block; color: rgb (102, 102, 102); font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px; border-width: 0px; border- style: solide; «  largeur=« 240 »> aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 15px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 333333; taille de police: 20px; » classe=«  » pardot-Région=« blog-section-headline-1 »>Article d’actualité aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 5px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 666666; taille de police: 14px; hauteur de ligne: 20px; » classe=«  » pardot-Région=« blog-section-body-1 »>Integer ut tempor lectus. Vivamus à gravida arcu. aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 5px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 666666; taille de police: 14px; hauteur de ligne: 20px; » classe=«  » pardot-Région=« blog-section-cta-1 »>href=« http://litmus.com » style=« couleur: # 256F9C; texte-décoration: aucun; »>Lire la suite → classe=« wrapper » style=« display: inline-block; margin: 0 -2px; max-width: 50%; min-width: 240px; vertical-align: top; width: 100%; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« la gauche » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« wrapper » style=« max-width: 240px; float: right; » largeur=« 100% »> aligner=« centre » valign=« Haut »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> style=« padding: 20px 0 30px 0; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« centre » bgcolor=« # F5F7FA » valign=« milieu » classe=«  » pardot-Région=« blog-section-image-2 »>href=« http://litmus.com » cible=« _Vide » rel=« noopener noreferrer »>alt=« texte alternatif ici » frontière=« 0 » classe=« img-max » la taille=« 130 » src=« http: // allez.pardot.com / l / xxxxx / xxx-xxx-xxxx / 5tznt3 / 93172/127378 / news_2.jpg «  style=« display: block; color: rgb (102, 102, 102); font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px; border-width: 0px; border- style: solide; «  largeur=« 240 »> aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 15px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 333333; taille de police: 20px; » classe=«  » pardot-Région=« blog-section-headline-2 »>Article d’actualité aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 5px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 666666; taille de police: 14px; hauteur de ligne: 20px; » classe=«  » pardot-Région=« blog-section-body-2 »>Integer ut tempor lectus. Vivamus à gravida arcu. aligner=« centre » bgcolor=« # F5F7FA » style=« padding: 5px 0 0 0; famille de polices: Arial, sans-serif; couleur: # 666666; taille de police: 14px; hauteur de ligne: 20px; » classe=«  » pardot-Région=« blog-section-cta-2 »>href=« http://litmus.com » style=« couleur: # 256F9C; texte-décoration: aucun; »>Lire la suite →

aligner=« centre » bgcolor=« # E6E9ED » classe=« rembourrage de section » style=« rembourrage: 70px 15px 70px 15px; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« responsive-table » style=« padding-bottom: 20px; max-width: 500px; » largeur=« 100% »> pardot-répétable=« section calendrier »> aligner=« centre » classe=« rembourrage » colspan=« 2 » style=« padding: 0 0 10px 0; font-size: 25px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: # 333333; » pardot-Région=« événements-en-tête »>évènements à venir aligner=« centre » colspan=« 2 » la taille=« 100% » valign=« Haut » largeur=« 100% »> aligner=« centre » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » style=« largeur max: 500; » largeur=« 100% »> aligner=« centre » style=« font-size: 0; » valign=« Haut » classe=«  »> style=« display: inline-block; margin: 0 -2px; max-width: 115px; vertical-align: top; width: 100%; »> aligner=« la gauche » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 115 »> classe=« cache-mobile » style=« padding: 40px 0 0 0; » valign=« Haut » pardot-Région=« événements-image-1 »>href=« http://litmus.com » cible=« _Vide » rel=« noopener noreferrer »>alt=« texte alternatif ici » frontière=« 0 » la taille=« 105 » src=« http: // allez.pardot.com / l / xxxxx / xxx-xxx-xxxx / 5tznsy / 93172/127372 / calendar.png «  style=« display: block; font-family: Arial; color: rgb (102, 102, 102); font-size: 14px; width: 105px; height: 105px; border-width: 0px; border-style: solid; » largeur=« 105 »> style=« display: inline-block; margin: 0 -2px; max-width: 385px; vertical-align: top; width: 100%; »> aligner=« la gauche » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> classe=« sans rembourrage » style=« padding: 40px 0 0 0; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« la gauche » classe=« padding-meta » style=« padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa; » pardot-Région=« events-date-1 »>1 janvier 2016 aligner=« la gauche » classe=« rembourrage » style=« padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: # 333333; » pardot-Région=« events-title-1 »>Etiam Tincidunt, quam ac porttitor aligner=« la gauche » classe=« rembourrage » style=« remplissage: 10px 0 15px 25px; taille de police: 16px; hauteur de ligne: 24px; famille de polices: Helvetica, Arial, sans-serif; couleur: # 666666; » pardot-Région=« events-description-1 »>Maecenas sed nulla massa. Chez mattis vulputate nisl, rhoncus blandit lorem maximus non. Phasellus tempus dans ipsum non lacinia. aligner=« la gauche » classe=« rembourrage » style=« padding: 0 0 45px 25px; »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« conteneur de bouton mobile »> aligner=« centre »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » largeur=« 100% »> aligner=« la gauche »> frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« conteneur de bouton mobile »> aligner=« centre » bgcolor=« # 256F9C » style=« border-radius: 3px; » classe=«  » pardot-Région=« events-cta-1 »>classe=« bouton mobile » href=« https://litmus.com » style=« font-size: 15px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 3px; padding: 10px 20 pixels; bordure: 1 pixel solide # 256F9C; affichage: bloc en ligne; «  cible=« _Vide » rel=« noopener noreferrer »>En savoir plus →

aligner=« centre » bgcolor=« #ffffff » style=« padding: 20px 0px; »> aligner=« centre » frontière=« 0 » rembourrage cellulaire=« 0 » espacement des cellules=« 0 » classe=« responsive-table » style=« largeur max: 500 px; » largeur=« 100% »> aligner=« centre » style=« taille de police: 12px; hauteur de ligne: 18px; famille de polices: Helvetica, Arial, sans-serif; couleur: # 666666; » classe=«  »>1234 Main Street, Anywhere, MA 01234, États-Unis href=« %%Se désabonner%% » style=« couleur: # 666666; » cible=« _Vide » rel=« noopener noreferrer »>Se désabonner& nbsp;