Responsive web design : Les autres usages Un site web “adaptatif” Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. Aujourd’hui, la multiplication des types de terminaux fait qu’il n’est plus possible de réfléchir de manière binaire (Si l’utilisateur n’est pas sur ordinateur de bureau, alors il est sur un téléphone portable). Une nouvelle tendance est née, celle de la conception adaptative (Responsive Design) . Le Responsive Design est plutôt un concept, une manière de concevoir les interfaces web. Les autres usages du “Responsive Design” E-mail adaptés Le principe est simple. L’approche Viewport Conclusion
CSS Support Guide for Email Clients Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010
Un e-mail en HTML responsive multi-clients L'e-mail (ou newsletter) reste encore aujourd’hui un moyen efficace de transmettre des informations à ses utilisateurs ou clients. En mode texte, aucun problème, c'est un standard interprété sans difficulté. En mode HTML c'est un art ô combien délicat en partie dû au nombre de clients lecteurs d'e-mail sur le marché qui ont des comportements bien différents (encore plus désormais que les navigateurs classiques). Cette disparité de l'interprétation des e-mails au format HTML provient de plusieurs facteurs : Les clients e-mails lourds (Outlook, Thunderbird, Lotus Notes...) ont un fonctionnement radicalement différents des webmails (Gmail, Yahoo Mail, Hotmail, Outlook.com...). Mettons fin immédiatement à vos désirs les plus fous : encore plus que le web, la réalisation d'e-mails graphiques en HTML, au pixel près ou presque, sur toutes les plates-formes, est une utopie. Voici quelques astuces et bonnes pratiques pour obtenir des e-mails au rendu proche sur la majorité des programmes.
CSS Support | Gmail & Inbox Sender Resources | Google Developers You can style email sent to Gmail using inline <style> blocks and standard CSS. Most CSS selectors, attributes, and media-queries are supported. Unsupported CSS properties and selectors may be ignored by Gmail. See the reference guide for a complete list of supported CSS properties and queries. CSS Selectors You can use a subset of CSS selectors to apply styles. Example You can use standard CSS media queries to adjust the styling of an email to suit the user's current device.
Intégrer un compte à rebours dans son emailing Nous évoquons régulièrement l’utilisation d’un gif ou d’une vidéo, et le compte à rebours dans tout ça ? Il n’est pas rare d’en croiser un de temps à autre dans le contenu d’un email. Savez-vous comment il est possible de l’animer ? Habituellement, nous répondons qu’il n’est pas possible de mettre un compte à rebours dans son email, parce que son intégration peut être compliquée, selon vos envies. Cet email propose une offre commerciale valable 3 jours. A l’ouverture de l’email, le gif s’anime pendant 1 minutes, soit 60 images représentant le décompte de secondes. La plupart du temps, nous observons des gifs dans les emails qui tournent en boucle sans se réactualiser par rapport à l’heure d’ouverture. Comment intégrer un compte à rebours ? Pour intégrer un compte à rebours, il est indispensable d’héberger l’image sur un serveur de votre entreprise pour qu’elle puisse se réactualiser. Trois solutions sont possible, vous pouvez : Mots recherchés pour arriver sur cette page :
7 raisons qui font que vos e-mails ne sont pas optimisés pour être lus sur un mobile Vos e-mails sont de plus en plus lus sur les mobiles : c’est une opportunité mais cela comporte également des risques. Petit tour d’horizon des erreurs à éviter dans vos prochains mailings. 1. Le template que vous utilisez ne s’adapte pas directement à la taille de l’écran Si votre template (gabarit en français) n’est pas « responsive », l’affichage de votre message ne sera pas optimal et il risque de vite finir à la corbeille. 2. La lecture en colonne est idéale sur un écran d’ordinateur mais quand on passe sur un smartphone, il devient beaucoup plus compliqué de déchiffrer l’information. 3. Un peu de pitié pour l’abonnement data de vos lecteurs : évitez les images trop lourdes à charger ! 4. Certains e-mails ne seront jamais ouverts : c’est pour cela que le sujet de votre message est crucial. 5. Cette mention devrait être réservée au bas de votre message : elle est importante mais elle n’est pas la plus importante ! 6. 7.
Comment réussir une campagne de mailing ? Voici quelques conseils pour réaliser une bonne campagne de mailing, notamment en ce qui concerne le choix du format du message et les contraintes techniques liées à son envoi, et surtout sa bonne réception... Sommaire Une campagne de mailing réussie implique quelques obligations dont vont dépendre le succès de l'opération. L'emailing doit comporter notamment les infos élémentaires d'envoi : 1 - Un objet (le titre de mail) : ex. « Promotion de Printemps ! 2 - Un nom d'expéditeur (qui envoie le message) : « Prénom Nom » ou « La société » 3 - Une adresse d'expéditeur (l'adresse email utilisée pour l'envoi) : « responsable@votre-entreprise.fr » ou « newsletter@votre-entreprise.fr » 4 - Une adresse de réponse : généralement c'est la même que celle de l'expéditeur mais ça peut être aussi celle du webmaster ou de votre secrétaire... › La personne qui reçoit votre message doit vous identifier tout de suite ou au moins saisir l'objet de votre envoi pour y prêter attention. En savoir plus : Attention !
Le design d'email responsive / hybride, comment ça marche ? Aujourd’hui, la moitié des emails sont ouverts depuis un appareil mobile (smartphone, tablette…). Lorsque vous concevez vos campagnes emailing, vous devez le prendre en compte et veiller à ce que vos emails s’affichent correctement sur tous les devices : ordinateur, mobile ou tablette. Les designers utilisent deux principales techniques pour garder le contrôle sur la conception des emails et assurer un affichage optimisé : le responsive design d’une part, les codes hybrides d’autre part. Or, la manière dont ils utilisent ces techniques révèlent parfois un manque de compréhension. Dans cet article, nous vous proposons d’entrer dans les arcanes de ces deux techniques pour mieux comprendre comment elles peuvent être utilisées (efficacement) dans vos campagnes email. Email responsive design Vous avez surement déjà croisé l’expression « email responsive » ou « responsive email ». Le responsive est basé sur les media queries, qui utilisent le langage CSS3. Comment rendre un email responsive ?
Limitations des emails HTML | MailChimp La majorité des clients de messagerie ne prennent pas en charge tous les types de contenu HTML que vous voyez sur le web. Les navigateurs web sont en mesure d'afficher des scripts, des animations et des menus de navigation complexes, alors qu'une boîte de réception typique n'est pas conçue pour gérer ce type de contenu. Dans cet article, vous en apprendrez davantage sur les types de contenu à éviter dans vos emails et avec quoi les remplacer. HTML pour emails vs HTML pour le web La technologie de visualisation d'un client de messagerie typique n'est pas aussi récente qu'un navigateur web. Consultez le tableau ci-dessous pour en savoir plus. Utilisation sécuritaire : facilement pris en charge par la plupart des clients de messagerie Utiliser avec précaution : prise en charge limitée de la plupart des clients de messagerie Ne pas utiliser : n'est pas pris en charge par la plupart des clients de messagerie Utiliser avec précaution Images d'arrière-plan Prévisualiser et tester votre campagne Flash
Comment créer des campagnes emailing conformes au RGPD ? Savez-vous qui vient de fêter son tout premier anniversaire ? Un indice : il est européen et a beaucoup (oui oui, beaucoup) fait parler de lui. C’est… le RGPD ! Voilà donc un an que ce nouveau règlement est entré en vigueur. Rappelons-le, le RGPD (Règlement Général sur la Protection des Données) concerne toutes les entreprises traitant des données personnelles de citoyens européens. Un baromètre réalisé par La Chaire Économie Numérique de l’Université Paris-Dauphine avec Médiamétrie en avril 2019 auprès de plus de 1000 Français montre d’ailleurs que 91 % de nos concitoyens sont préoccupés par la protection de leurs données personnelles. Les pénalités financières en cas de non-conformité peuvent aller jusqu’à 4 % du chiffre d’affaires ou 20 millions d’euros. C’est pour cette raison qu’il est indispensable que vous mettiez en œuvre tous les moyens pour assurer le respect des exigences de ce nouveau règlement. Etape n°1 : obtenir le consentement de vos contacts Ce qu’il faut retenir
Les meilleurs outils pour créer et gérer vos campagnes d'emailing Les solutions d'emailing sont aujourd'hui des solutions complètes qui prennent en charge le choix de templates, la gestion des bases, l'envoi, le marketing automation... Nous avons sélectionné les meilleurs outils d'emailing du marché afin de comparer leurs fonctionnalités, leurs avantages, et leurs tarifs. Découvrez les meilleures solutions de gestion d'emailing du marché. Sendinblue : un outil d’emailing français avec des prix très abordables La solution d’emailing propose un service complet qui couvre tous les besoins. La solution permet aussi de réaliser des landing pages et des formulaires d’inscription mais également gérer vos publicités Facebook directement sur la plateforme. Le solution couvre vraiment l’ensemble des besoins marketing, et se montre très robuste. Tarifs : Vous pouvez tester l’offre gratuitement (sans engagement et sans CB) et envoyer jusqu’à 300 emails par jours. Mailchimp : une solution réputée sur le marché de l’emailing Cette page contient des liens affiliés.