Dialog Insider Blog

Be Responsive with Gmail App

  • Share   

Be Responsive with Gmail App

150 150 Dialog Insight

Since the end of 2015, email open statistics on mobiles in Canada have exceeded opens on computers[i]. Moreover, having a responsive version can boost your click rate by more than 11% for emails read on mobiles[ii]. This last benefit is important as Gmail has, for quite some time, caused companies some serious headaches by not supporting the use of media queries to make emails responsive. But you should be happy to learn that this era is now over! A new coding technique has recently been found and has proven its worth – it’s known as Spongy or Hybrid coding, and its main benefit, as you might have guessed, is to work with Gmail App!

              Media Queries on Gmail App                           Spongy on Gmail App

Gmail App Media Queries           Gmail App Spongy 

 

The difference between media queries and Spongy

The main difference between the two methods is reflected in content alignment. Contrary to media queries that align content all at once by placing them one after the other on a fixed screen size, the Spongy method gradually aligns content as the display reduces.

Courriel 600px

 

Media Queries 400px                      Media Queries 200 px

  

 

            Spongy 400px                                           Spongy 200px

  

 

  

How to achieve the best results?

1 column example

As an example, let’s say we want to display 100% of the content on a small screen but a maximum of 600px on a larger screen. To do this, you can use a 100% width table and set the maximum width to 600px.

Since the max-width setting is not supported in Outlook (surprised?), we need to add a second conditional table to the main one. This will provide the possibility of displaying a fixed email using a 600px width in Outlook applications.




Content here

 

2 column example

To display an email in 2 columns, we can use the same technique as for the 1 column example, but add div tags.

You need to created 2 div sections of the desired width, here 300px, and use the style display:inline-block, which will let you place both div side by side. And for Outlook compatibility, you need to add a 100% conditional table with cells at 300px.

This method places both columns side by side horizontally on a computer screen, but one after the other on a mobile screen.

To display 3 columns, you use the same technique but change the width of cells.



Content here



Content here


Please note that you can use both media queries AND Spongy coding for email providers that support it.

 

We have tested it… and we love using it!

After some testing, Dialog Insight has decided to apply the Spongy coding approach to all the generic templates available in its application so that responsive emails are supported in Gmail applications.

If you need further information, please do not hesitate to contact us.

 


[i] Based on statistics on emails sent in Canada using Dialog Insight

Leave a Comment

Débutant

Vous êtes nouveau sur Dialog Insight ?

Cette formation vous apprendra les notions de base afin de pouvoir lancer vos premières campagnes et être efficace rapidement.

Contenu de la formation DÉBUTANT
Débuter avec Dialog Insight Éditer des courriels
Optimiser la livraison de courriels          Segmenter et cibler des contacts (1 de 2)
Gérer les données clients Analyser les résultats d'une campagne
Préparer une campagne  

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

Campagnes

Vous êtes responsable des campagnes ?

Ce parcours marketing vous aide à peaufiner vos envois et à optimiser vos résultats.

Contenu de la formation CAMPAGNES
Optimiser la livraison de courriels Personnaliser les contenus
Préparer une campagne Utiliser le marketing social
Gérer une librairie d’images Utiliser les tests A/X
Éditer des courriels Inspecter le rendu et les variantes du message
Envoyer des SMS et notifications mobiles      Analyser les résultats d'une campagne
Segmenter et cibler des contacts (1 de 2)  

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

1 à 1

Les stratégies de personnalisation vous attirent ?

Découvrez les étapes de mise en place d’un marketing personnalisé et ciblé ainsi que son utilisation en temps réel.

Contenu de la formation 1-à-1
Créer une libraire de contenus Personnaliser selon le cycle d’achat
Développer des campagnes automatisées Segmenter et cibler des contacts (1 de 2)
Créer des scénarios déclenchés par des actions en temps réel (triggers) Segmenter et cibler des contacts (2 de 2)
Personnaliser les contenus Inspecter le rendu et les variantes d'un message
Dynamiser le contenu (ex : recommandations de produits)  

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

Analytique

Vous cherchez à comprendre vos résultats ?

Apprenez à analyser vos résultats, à connaître vos clients et à utiliser l’intelligence d’affaires pour offrir des contenus pertinents.

Contenu de la formation ANALYTIQUE
Identifier les meilleures sources d'acquisition Évaluer le rendement
Suivre les visiteurs sur un site web Sonder la clientèle
Explorer le cycle et les intérêts de la clientèle Utiliser les tests A/X
Définir des règles de scoring et des personas Analyser les résultats d’une campagne

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

E-Commerce

Vous avez une boutique en ligne ?

Ce parcours vous aide à offrir une expérience client enrichissante à vos acheteurs et à augmenter vos revenus de ventes.

Contenu de la formation E-COMMERCE
Combiner marketing et E-Commerce Évaluer le rendement
Développer des campagnes automatisées Ajouter des données au profil du client
Personnaliser selon le cycle d’achat Créer une librairie de contenus
Dynamiser le contenu (ex. : recommandations de produits)  

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

Génération de prospects

La génération de prospects qualifiés est un défi pour vous ?

Utilisez des stratégies web performantes pour acquérir de nouveaux prospects et augmenter vos taux de conversion.

Contenu de la formation GÉNÉRATION DE PROSPECTS
Développer des pages de destination Créer des processus d’affaires intelligents
Faire l’acquisition et la mise à jour de contacts Sonder la clientèle
Ajouter des options interactives aux formulaires Identifier les meilleures sources d’acquisition

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

Admin

Vous êtes responsable de l’implantation ?

Ce parcours vous apprendra à configurer la plateforme, à gérer les utilisateurs et à synchroniser vos données.

Contenu de la formation ADMIN
Débuter avec Dialog Insight Personnaliser l’expérience utilisateur
Configurer Courriel, SMS et notifications mobiles Gérer les données clients
Développer un marketing distribué Optimiser la livraison de courriels
Définir les règles de sécurité et d’accès Ajouter des données au profil du client
Synchroniser les systèmes  

Durée : 2,5h
Lieu : en ligne ou en entreprise

M'inscrire à cette formation

Beginner

You are a new Dialog Insight user?

This training course will show you all the basics to get you going quickly and send your first campaigns.

BEGINNER – Training outline
Get started with Dialog Insight Edit emails
Optimize email delivery Segment and target contacts (1 of 2)
Manage client data Analyze campaign results
Prepare a campaign  

Duration: 2.5h
Location: Online or onsite

Enroll me

Campaigns

You are in charge of campaigns?

This training course will help you polish your messages and optimize your results.

CAMPAIGNS – Training outline
Optimize email delivery Personalize content
Prepare a campaign Take advantage of social marketing
Manage an image library Use A/X testing
Edit emails Validate message previews and variants
Send SMS and push notifications Analyze campaign results
Segment and target contacts (1 of 2)  

Duration: 2.5h
Location : Online or onsite

Enroll me

1 to 1

You want to know all there is about personalization?

Discover how to implement a personalized and targeted marketing campaign, and how to use it real-time.

1 TO 1 – Training outline
Create a content library Personalize content based on buying cycle
Develop automated campaigns Segment and target contacts (1 of 2)
Trigger scenarios based on actions Segment and target contacts (2 of 2)
Personalize content Validate message previews and variants
Add dynamic content (such as product recommendations)  

Duration: 2.5h
Location : Online or onsite

Enroll me

Analytics

You are looking for answers in your results?

Learn how to properly analyze your results and better understand your clients in order to offer more appropriate content.

ANALYTICS – Training outline
Find the best acquisition sources Estimate ROI
Track website visitors Get client feedback
Explore client cycles and interests Use A/X testing
Define personas and scoring rules Analyze campaign results

Duration: 2.5h
Location : Online or onsite

Enroll me

E-Commerce

You have an online store?

This training course will help you offer buyers the best possible client experience, as well as increase your sales revenue.

E-COMMERCE – Training outline
Combine marketing and E-Commerce Estimate ROI
Develop automated campaigns Add data to client profiles
Personalize content based on buying cycle Create a content library
Add dynamic content (such as product recommendations)  

Duration: 2.5h
Location: Online or onsite

Enroll me

Lead Gen

Generating qualified leads is your everyday challenge?

Use efficient web strategies to acquire new leads and increase your conversion rate.

LEAD GENERATION – Training outline
Develop landing pages Create intelligent business workflows
Acquire and update contacts Get client feedback
Add interactive options to forms Find the best acquisition sources

Duration: 2.5h
Location: Online or onsite

Enroll me

Admin

You are responsible for implementation?

This training course will teach you how to configure the platform, manage users and synchronize data.

ADMIN – Training outline
Get started with Dialog Insight Personalize user experience
Configure emails, SMS and push notifications Manage client data
Develop distributed marketing Optimize email delivery
Define access and security rules Add data to client profiles
Synchronize systems  

Duration: 2.5h
Location: Online or onsite

Enroll me