Différence entre popin et popup

Avril 2013

Si vous faites du développement web, vous avez probablement entendu parler de popup, de popin et peut-être de popunder également. Voici une petite explication :

Qu'est-ce qu'une popup ?

Une popup est une nouvelle fenêtre de navigateur web qui s'ouvre au clic sur un lien. En général cette fenêtre est plus petite que les fenêtres par défaut du navigateur, et elle est allégée (elle ne contient presque aucun élément d'interface graphique comme les boutons suivant/précédent ou la barre d'adresse).

Les popup sont utilisées par certains formats de publicité sur internet, certaines s'ouvrent parfois en arrière-plan, sous la fenêtre principale du navigateur (on appelle ça une popunder). C'est la raison pour laquelle beaucoup de navigateurs comme Firefox ou Chrome permettent de bloquer l'ouverture des popup pour éviter d'être importuné.

Mais ça n'est pas leur seule utilisation, elles peuvent être utilisées pour différentes applications, comme un formulaire de connexion Facebook connect ou une palette de sélection de couleur (colorpicker).

Pour ouvrir une popup, on utilise le langage de programmation Javascript.

Qu'est-ce qu'une popin ?

La popin est fonctionnellement assez proche de la popup : elle permet d'afficher du contenu de manière détachée par rapport à la page web, de façon à la mettre en valeur.

Sauf qu'à la différence de la popup, la popin n'utilise pas de nouvelle fenêtre de navigateur, elle est codée directement dans la page web en HTML/CSS et affichée en Javascript.

Dans un tout autre contexte, cet article est très intéressant : exporter les variables du gestionnaire de nom excel.

Les popin sont souvent utilisées en interne, elles sont plus personnalisables que les popup (on peut utiliser les feuilles de style CSS pour lui donner l'apparence qu'on souhaite), elles ne sont pas bloquées par les navigateurs et elles sont plus rapides à afficher (pas besoin de charger une URL donc pas de requête HTTP).

Voici un exemple de popin, sur Facebook :