Catégories
Créer un emailing

Comment optimiser ses emails pour les applications mobiles Gmail et Inbox

Inbox-b-y-GmailDepuis quelque temps, Google fait de son mieux pour améliorer l’expérience de l’email. Ils ont introduit les onglets, la boîte de réception prioritaire, les prévisualisations d’images… et ont sorti leurs applications Gmail et Inbox pour la consultation des emails sur mobile.

Cependant, nous nous étonnons que Google n’est pas intégré la lecture des  spécificités CSS Media Queries. Cette spécification CSS permet l’optimisation automatique du contenu de l’email pour une lecture sur mobile :

  • Passer simplement la mise en page du contenu de plusieurs colonnes en une seule colonne
  • Adapter la taille des textes et des images par rapport à la largeur du mobile
  • Afficher un contenu spécifique et différent sur mobile
  • Utiliser des couleurs de fonds ou de textes différentes selon le support de lecture

Visualisons quelques exemples avec ce gif :

iOS-vs-Inbox-2Source : Email Design Review

Comme vous pouvez le voir, Google n’interprète pas les spécificités CSS Media Queries, l’expérience utilisateur n ‘est donc pas optimisé pour lire le contenu d’un email sur ses applications Gmail et Inbox.

Les utilisateurs de ces applications savent-ils ce qu’ils manquent ?

Lorsque l’on recherche des avis d’utilisateurs sur Internet, on trouve des utilisateurs satisfaits de l’application et des fonctionnalités mises en place : interface ergonomique, flux d’actualités, classification des emails, aperçu du contenu…
Par contre, aucune remarque sur la lecture des emails sur mobile.

Comment peut-on contourner cela ?

Les Media Queries sont très utilisés pour optimiser le contenu d’un email. Si la messagerie ne les supporte pas, il vous est possible de créer un email fluide.

L’email fluide est une mise en page qui s’adapte aux petits et grands écrans. Le contenu est automatiquement redimensionné selon la largeur du support de lecture sans modifier la structure de la page. Pour appliquer cette technique, votre email doit être déjà composé en une seule colonne.

email-fluide

Pour commencer, vous définissez une largeur fixe du contenu sur ordinateur, elle dépasse rarement les 600 à 700 pixels pour que le contenu soit lisible facilement dans toutes les messageries. Pour que l’email s’adapte aux formats et résolutions inférieurs à 600 pixels, il est conseillé de définir les dimensions de chaque élément en pourcentage.

Le code à utiliser :

style = “width : 80%; max-width : 600px; height : auto;”

width : la largeur de l’image en pourcentage pour les petits écrans
max-width : la largeur maximum de l’image pour les grands écrans et ordinateurs
height : la hauteur en automatique pour garder la proportion de l’image

Quand Google prévoit-il d’intégrer la spécificité CSS Media Query ?

“We are interested in supporting media queries but we need to make sure we do it right. Our changes last year to show images by default in Gmail last year were similar: there was a ton of complicated security work that had to happen behind the scenes before we could make this seemingly simple feature safe for the whole world” … “ – Jason Cornwall, Designer

“Inbox and Gmail use the same HTML sanitizer and media queries etc. aren’t supported. This is one of our top feature requests from developers though and we’re looking into adding it.” – Taylor, Software Engineer

 

Sources :
Livre blanc sur l’email responsive de Sarbacane Software
http://www.huffingtonpost.fr/2014/10/23/test-gmail-inbox-google-messagerie-mail_n_6034462.html
http://www.emaildesignreview.com/email-design-best-practice/googles-embarrassing-email-problem-2465/
https://www.reddit.com/r/IAmA/comments/2o629q/we_are_the_inbox_by_gmail_team_ask_us_anything
Catégories
Créer un emailing

Animer son emailing avec le CSS3

@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
}
.rotateIn {
-webkit-animation: rotateIn 5s linear infinite;
-moz-animation: rotateIn 5s linear infinite;
-ms-animation: rotateIn 5s linear infinite;
-o-animation: rotateIn 5s linear infinite;
animation: rotateIn 5s linear infinite;
}
@-webkit-keyframes rotateIn2 {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes rotateIn2 {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
}
.rotateIn2 {
-webkit-animation: rotateIn 15s linear infinite;
-moz-animation: rotateIn 15s linear infinite;
-ms-animation: rotateIn 15s linear infinite;
-o-animation: rotateIn 15s linear infinite;
animation: rotateIn 15s linear infinite;
}
@-webkit-keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeindown{/* Animation */
-webkit-animation: ombre ease-in infinite alternate 2s;
-moz-animation: ombre ease-in infinite alternate 2s;
animation: ombre ease-in infinite alternate 2s;
}

Ringard les emails plats et uniformes ? Utilisez le code CSS3 et animez votre prochaine campagne emailing ! Les messageries Apple Mail, Thunderbird et Zimbra interprètent le code CSS3 présent dans le code HTML de votre email. Voici 2 animations applicables sur vos newsletters :

La rotation d’une image

Vous souhaitez faire tourner une image sur elle-même ? Nous vous donnons le code pour ça :

Dans le CSS de votre emailing, renseignez le code suivant :

@-webkit-keyframes rotateIn {
        0% {
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        100% {
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }
    @keyframes rotateIn {
        0% {
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        100% {
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
        }
    }
.rotateIn {
	    -webkit-animation: rotateIn 5s linear infinite;
    -moz-animation: rotateIn 5s linear infinite;
    -ms-animation: rotateIn 5s linear infinite;
    -o-animation: rotateIn 5s linear infinite;
    animation: rotateIn 5s linear infinite;
    }

 
Vous pouvez définir le temps de rotation

Exemple : 5 secondes

logo

Exemple : 15 secondes

logo

Ensuite, dans la balise <img>, indiquez :

class= "rotateIn"

 
Et le tour est joué !

 

L’apparition du texte

Si vous souhaitez faire apparaître votre texte, voici le CSS à renseigner :

@keyframes fadeInDown {
        0% {opacity: 0;transform: translateY(-30px);}
        40% {opacity: 0;transform: translateY(-30px);}
        100% {opacity: 1;transform: translateY(0);}
    }
    @-webkit-keyframes fadeInDown {
        0% {opacity: 0;-webkit-transform: translateY(-30px);}
        40% {opacity: 0;-webkit-transform: translateY(-30px);}
        100% {opacity: 1;-webkit-transform: translateY(0);}
    }
.fadeInDown {
        animation-name: fadeInDown;
        -webkit-animation-name: fadeInDown;
        animation-duration: 1.2s;
        -webkit-animation-duration: 1.2s;
    }

 
Vous pouvez définir la durée de cette animation.

Ensuite, dans la balise <FONT>, indiquez :

class= "fadeInDown"

 
Voici ce que ça donne dans l’email :
L’animation ne se fera qu’une seule fois à l’ouverture de l’email.

@keyframes fadeInDown {
0% {opacity: 0;transform: translateY(-30px);}
40% {opacity: 0;transform: translateY(-30px);}
100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes fadeInDown {
0% {opacity: 0;-webkit-transform: translateY(-30px);}
40% {opacity: 0;-webkit-transform: translateY(-30px);}
100% {opacity: 1;-webkit-transform: translateY(0);}
}
.fadeInDown {
animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
}


Visitez notre site Internet

Compliqué vous avez dit ? 😉
Ça fonctionne pour le moment sur : Apple Mail (sur Mac, iPad et iPhone), Thunderbird et Zimbra, mais d’autres webmails et messageries devraient suivre !
A savoir : dans les autres messageries, l’image et le texte apparaissent et restent fixes.

Catégories
Gérer ses destinataires

Guide pour créer sa base de destinataires

La réussite d’une campagne emailing passe par la création et l’optimisation constante d’une base de données de destinataires. Il est indispensable de créer sa propre base afin de garantir la meilleure délivrabilité et les meilleurs retours à chaque campagne envoyée.

L’achat de bases de données sur Internet est une pratique très fortement déconseillée. La plupart des bases soit disant « Opt-in » ou « qualifiées » ne le sont évidemment pas et entraînent de graves conséquences sur votre réputation d’expéditeur. Sans parler de l’illégalité de la chose bien entendu…

Alors si on ne doit pas acheter de base, comment se la constituer ?

 

Formulaire d’inscription

Le formulaire d’inscription sur le site Internet est la méthode de collecte la plus simple. Sa présence ne vous coûte rien. Cependant, mettez ce formulaire en avant pour amener le maximum d’inscription. N’hésitez pas aussi à évoquer la périodicité d’envoi enfin d’en avertir le futur destinataire.

Comment faire un formulaire d’inscription efficace ?

Avant tout, vous devez penser aux informations que vous avez besoin de tirer de vos destinataires. Un formulaire qui ne demande que l’adresse email, c’est très efficace, mais surtout très inutile.

Vous devez bien entendu demander à vos futurs destinataires un minimum d’information sur eux pour que ces adresses soient utilisables. Si vous en demandez trop, ils ne le rempliront pas !

Toute la difficulté est justement de trouver un équilibre entre le nombre d’informations demandées et le nombre d’informations dont vous avez besoin.

 

Avec Sarbacane, vous pouvez créer de superbes formulaires d’inscription pour récupérer les adresses emails de vos visiteurs directement depuis votre site. Les contacts sont directement synchronisés avec vos listes de destinataires dans votre logiciel emailing.

 

formulaire contact

Exemple de formulaire d’inscription créé avec Sarbacane

 

Jeu concours

Le jeu concours est un moyen viral de récupérer des emails en masse. A condition que votre concours soit alléchant !

En effet, si votre jeu concours donne envie de jouer et de partager, vous obtiendrez d’autant plus facilement des adresse emails.

Pour donner envie, vous devez faire gagner un prix conséquent et intéressant. Soit un produit normalement payant chez vous, soit un livre de conseils, soit des points/crédits pour votre site, etc…

Cependant, pour envoyer des campagnes par la suite, vous êtes dans l’obligation de demander l’autorisation via une case à cocher indiquant : « J’autorise l’entreprise à m’envoyer la newsletter et les emails commerciaux… ».

De ce fait, lancer un jeu sur les réseaux sociaux et demander aux internautes de mettre leur email en commentaire n’est pas suffisant pour pouvoir vous servir de leurs coordonnées.

 

Offre ou réduction à l’inscription newsletter

Autre méthode sur les sites e-commerce, il est de plus en plus fréquent d’avoir un pop-up annonçant une réduction ou une offre si la personne s’inscrit à la newsletter.

S’il est difficile de récupérer des inscrits avec un simple formulaire d’inscription, le fait qu’il y ait un avantage, un petit quelque chose à gagner, rend plus facile la conversion.

Mais attention, les pop-ups peuvent être envahissante et ont souvent mauvaise image.

Ne le faites pas surgir sur votre site à n’importe quel moment, permettez au visiteur de le fermer facilement et surtout ne le faites apparaître qu’une seule fois par visite.

 

Livre blanc gratuit

Tout comme le pop-up d’inscription à la newsletter, on peut envisager un pop-up proposant le téléchargement d’un livre blanc ou d’un guide complet sur un sujet qui pourrait intéresser le visiteur.

L’idée ici est d’inciter le visiteur à donner son adresse email et quelques informations personnelles en échange d’un cadeau qui lui sera vraiment utile.

Mais pour cela, il faut bien vendre le livre avec un titre et un visuel accrocheurs, et annoncer l’avantage qu’il aura à le télécharger.

Encore une fois, ne demandez pas trop d’informations dans votre formulaire, vous risquerez de repousser les potentiels inscrits.

 

Création d’un compte client

Si vous possédez un site e-commerce, demandez à vos acheteurs de se créer un compte client chez vous.

Par ce biais, il est bien plus facile demander plus d’informations qu’avec les autres méthodes.

En effet, si vos visiteurs sont arrivés jusqu’à la page de paiement, c’est qu’ils ont un véritable intérêt pour vos produits.

Il ne serait donc pas si déplacé de leur demander quelques précisions sur leurs besoins, leurs coordonnées, etc.

Récolte directe

C’est la méthode la plus empirique de toutes : demandez directement à la personne ses coordonnées.

Il y a plusieurs situations dans lesquelles il est tout à fait bien venu de récolter des contacts :

  • Lors d’un événement ou d’un salon sur lequel vous exposez
  • En magasin, lors du passage en caisse
  • Au téléphone, lors d’un rendez-vous téléphonique
  • Lors d’un rendez-vous

Selon le contexte, n’hésitez pas à amener avec vous une feuille d’émargement afin de demander à vos contacts des informations sur eux et ainsi compléter vos bases.

 

Nos conseils

– Mettez en place un contrôle de saisie vérifiant la présence d’un @ et d’un point

– Utilisez le double opt-in pour vous assurer du consentement de la personne avec un retour d’email pour valider l’inscription

 

Concernant les bases de données achetées, nous vous déconseillons de les utiliser pour plusieurs raisons :

– Des emails peuvent être erronés ou ne sont plus valides

– Des spamtraps ou pièges à pub peuvent s’y trouver, ces adresses ont été créées pour détecter les spams et n’ont jamais été inscrites dans aucune base

Si votre base contient ces emails, votre campagne arrivera directement dans le dossier « Courrier indésirable » des messageries de vos destinataires.

La délivrabilité de votre campagne joue aussi sur la qualité de votre base de destinataires, alors ne la négligez pas.

Mots recherchés pour arriver sur cette page :

  • base de donn?? contact email
  • base de donnees adresse email
  • base de données adresse mail language:FR
  • base de données emailing language:FR
  • base de données mailing
  • comment créer database de email marketing
  • comment mettre les email en base de donnees
  • créer des mails personnalisés depuis une base de données
  • Créer une base de données email
  • guide distinataire