Les popups sur mobile : bonnes pratiques et alternatives

La réponse courte

Sur mobile :

• Évitez les popups plein écran (pénalisés par Google)
• Préférez barres sticky, slide-ins, formulaires inline
• Maximum 30% de l’écran
• Timing basé sur le scroll (pas l’exit-intent)

Pénalité Google mobile interstitials

Ce que Google pénalise

Depuis 2017, Google pénalise les sites avec des “intrusive interstitials” sur mobile :

Type	Pénalisé ?
Popup couvrant tout l’écran	Oui
Popup couvrant le contenu principal	Oui
Contenu sous un popup obligatoire	Oui
Popup immédiat à l’arrivée	Oui

Ce qui est accepté

Type	Pénalisé ?
Bannières cookies (légales)	Non
Vérification d’âge	Non
Popups de connexion (contenu réservé)	Non
Barres < 30% de l’écran	Non
Popups déclenchés par action utilisateur	Non

Alternatives recommandées

1. Barre sticky bottom

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

┌─────────────────────────────────────┐
│                                     │
│         [Contenu page]              │
│                                     │
│                                     │
├─────────────────────────────────────┤
│ 📧 -10% → Email [____] [Obtenir]    │
└─────────────────────────────────────┘

Avantages : Non intrusif, toujours visible, accepté par Google.

2. Slide-in coin

.slide-in {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

┌─────────────────────────────────────┐
│                                     │
│         [Contenu page]              │
│                                     │
│              ┌─────────────────┐    │
│              │ 🎁 Guide gratuit│    │
│              │ [Email______]   │    │
│              │ [Télécharger]   │    │
│              └─────────────────┘    │
└─────────────────────────────────────┘

Avantages : Visible mais pas bloquant, facilement fermable.

3. Formulaire inline

<article>
  <p>Paragraphe 1...</p>
  <p>Paragraphe 2...</p>

  <div class="inline-capture">
    <h3>Vous aimez cet article ?</h3>
    <p>Recevez les nouveaux articles par email</p>
    <input type="email" placeholder="Votre email">
    <button>S'abonner</button>
  </div>

  <p>Paragraphe 3...</p>
</article>

Avantages : Intégré naturellement, très bon taux de conversion.

4. Bandeau top

.top-banner {
  position: sticky;
  top: 0;
  padding: 10px;
  background: #007bff;
  color: white;
  text-align: center;
}

┌─────────────────────────────────────┐
│ 🔥 Soldes : -30% avec code PROMO    │
├─────────────────────────────────────┤
│                                     │
│         [Contenu page]              │
│                                     │
└─────────────────────────────────────┘

Avantages : Visible d’entrée sans bloquer, facilement fermable.

5. Modal bottom sheet (style app)

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 40vh;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  background: white;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

Slide depuis le bas, style application native.

Déclenchement sur mobile

Pas d’exit-intent classique

Sur mobile, il n’y a pas de mouvement de souris. Alternatives :

Déclencheur	Comment ça marche
Scroll vers le haut rapide	Détecte l’intention de retour
Bouton retour	Intercepte la navigation
Inactivité	30+ secondes sans interaction
Scroll %	Après avoir vu X% du contenu

Code scroll-based

let lastScrollY = 0;
let scrollingUp = false;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;

  // Détecte scroll vers le haut rapide
  if (currentScrollY < lastScrollY - 50) {
    scrollingUp = true;
  }

  // Si scroll up depuis le haut de la page
  if (scrollingUp && currentScrollY < 100) {
    showMobilePopup();
  }

  lastScrollY = currentScrollY;
});

Taille et positionnement

Règles de taille

Élément	Maximum mobile
Popup centré	30% de la hauteur écran
Barre sticky	60px de hauteur
Slide-in	40% de la largeur
Bottom sheet	40% de la hauteur

Espacement safe area (iPhone X+)

.mobile-popup {
  padding-bottom: env(safe-area-inset-bottom);
}

Performance et UX

Lazy loading du popup

// Ne charger le JS du popup que si nécessaire
const loadPopupScript = () => {
  import('./popup.js').then(module => {
    module.showPopup();
  });
};

Fermeture facile

Méthode de fermeture	Obligatoire
Bouton X visible	Oui
Tap en dehors	Oui
Swipe down (bottom sheet)	Recommandé
Bouton retour	Recommandé

A/B tests mobile spécifiques

Test	Métrique
Popup vs Barre sticky	Conversion + Rebond
Position bottom vs top	Engagement
Taille 20% vs 30% vs 40%	UX + Conversion
Slide-in vs Inline	Conversion

Exemples par secteur

E-commerce

Barre sticky bottom :
"Livraison gratuite dès 50€ | [VOIR LES OFFRES]"

Blog / Média

Inline après article :
"📧 Recevez nos meilleurs articles
[Email_______] [S'abonner]"

SaaS

Slide-in coin :
"Demo gratuite de 15 min
[Réserver maintenant]"

Checklist popups mobile

• Popup < 30% de l’écran
• Pas de popup immédiat à l’entrée
• Bouton fermer visible et accessible
• Tap en dehors ferme le popup
• Safe area iPhone respectée
• Chargement rapide (lazy load)
• Alternative au popup si possible
• Test sur vrais appareils
• Pas de pénalité Google (Search Console)