Dreams4Net >> Blog : Technologie, Web et Opinions

Quand ouvrir une popup

Je vois déjà certains répondre avec force jamais à la lecture de ce titre. Je ne serai pas si catégorique mais l'ouverture d'une popup devrait être en réalité assez rare. Promenez vous sur des sites de contenu sérieux et vous trouverez difficilement une popup utile au visiteur. En effet les popup ont plusieurs gros défauts : elles perturbent la navigation (plus de bouton de retour par exemple), suppriment les menus (un débutant ne pourra plus utiliser ses menus), perdent le débutant (un débutant gère difficilement plusieurs fenêtres), et rendent difficile les favoris et copies d'adresse (car plus de boutons, menu ou barre d'adresse). Si vous comptez utiliser une popup pensez-y toujours à deux fois.

Maintenant des popup peuvent tout à fait être utiles et efficaces. Quand ouvrir une popup au lieu d'une fenêtre complète alors ? Je vois plusieurs cas bien spécifiques :

• La popup sert à demander ou donner une information en vue d'aider à utiliser la page en cours. On peut imaginer un formulaire qui demande votre identifiant client. En cliquant sur le point d'interrogation vous obtenez une popup qui vous dit comment trouver cet identifiant sur les différents courrier que vous avez reçu. Les popup d'aide, de légende ou certains zoom de photo sont dans cette catégorie.
• La popup sert à demander une information en vue de remplir la page en cours. Même exemple que la popup d'aide mais ici elle pourrait vous demander noms et prénoms pour vous rappeler cet identifiant. Les popup d'aide sur les formulaire ou les outils de conversion rapide (franc-euro par exemple) sont dans cette catégorie.
• Les popup de confirmation, ou d'avertissement.

Dans un cadre général une popup est adaptée pour un petit contenu annexe, quand il est utile de ne pas changer la page en cours.

Attention toutefois au mot utile : Par exemple pour inscrire quelqu'un à une liste de diffusion, une popup demandant l'adresse email n'est pas totalement pertinente à mon avis. Il n'est d'aucune utilité au visiteur d'avoir la page et la popup en parallèle? Si vous lui présentez une page complète il sera capable de retourner à la page d'accueil tout seul. De plus il peut être intéressant pour un visiteur de donner ou sauvegarder un lien direct vers le formulaire d'inscription, chose qui sera difficile avec une popup (comprendre impossible pour un néophyte).

Déclencher la popup

Une fois que vous avez décidé l'ouverture de la popup il reste l'ouvrir. Pour ce faire nous auront besoin de javascript. La commande générale pour ouvrir une popup est la suivante :

<script type="text/javascript">
  // adresse du contenu (relative ou absolue)
   adresse = 'mapopup.html' ;
  // nom de la fenetre contenant la popup
   fenetre = 'mapopup' ;
  // options d'affichage 
   options = 'height=100,width=100,scrollbars=yes,resizable=yes' ;
  // ouverture
   window.open(adresse,fenetre,options) ;
</script>

Cette procédure est pourtant une très mauvaise idée. Mis comme ça dans le source HTML, ce code affichera une popup dès l'affichage de la page. Une popup non demandée peut être très déroutante pour l'utilisateur. De toutes façons, à cause d'un trop plein de popup publicitaires votre popup risque d'être fermée avant même d'être lue (oui, même si elle est utile) ; ce peut être à cause d'un programme anti-popup ou tout simplement par réflexe d'un surfeur excédé.

Il vous faut donc faire déclencher votre popup sur une action de l'utilisateur, et qu'il s'attende à ce que son action déclenche une popup. Toute interaction autre part que sur un lien (ou un élément qui réagit et apparait comme un lien, pointeur et activation au clavier compris) risquerait de perdre l'utilisateur dans sa navigation. N'essayez surtout pas de déclencher une popup au survol d'un élément par exemple, la propriété onmouseover est à bannir pour ce qui est de la gestion des popup. De même la propriété onclick ne suffit pas. En effet un utilisateur à la souris ne saura pas qu'il peut cliquer si ça n'a pas l'apparence d'un lien (couleur, soulignement et surtout pointeur de souris au survol), un utilisateur au clavier ne pourra pas obtenir le focus sur l'élément souhaité si ce n'est pas un lien ou un élément de formulaire.

Devant ce constat simple, si nous voulons quelque chose d'accessible il nous faut utiliser un lien HTML classique (balise <a>), reste à savoir comment l'utiliser. Nous avons deux options, utiliser l'attribut href ou utiliser l'attribut onclick. On voit en effet assez souvent ces deux types de liens pour déclencher une popup :

<a href="javascript:window.open(...)"> ... </a>
<a href="#" onclick="window.open(...)"> ... </a>

Aucune de ces deux alternatives n'est en fait acceptables. Toutes les deux souffrent d'un gros défaut : Un navigateur sans javascript (navigateurs textes, oraux, anciens, avec une sécurité trop poussée ou simplement les moteurs de recherche) ne pourra pas suivre le lien. Ça peut même se révéler génant pour certains navigateurs classiques avec support javascript comme Mozilla (l'ouverture dans un nouvel onglet renverra une erreur dans le premier cas et la page courante dans le deuxième cas).

La bonne syntaxe ressemble beaucoup plus à un lien classique du fait qu'elle a une propriété href correctement remplie :

<a href="page.html" onclick="window.open(...); return false"> ... </a>

Un navigateur javascript exécutera le onlick et ouvrira la popup, le return false empêchera l'exécution classique du lien (et donc le changement de la page maîtresse). Par contre, un navigateur sans javascript (qui ne peut donc pas lancer de popup) utilisera le lien classique pour ouvrir la page sans être bloqué.

Pour éviter la redondance d'information (et donc des erreurs lors des mises à jour) on peut éviter d'écrire deux fois l'adresse de la page (une fois dans le href et une fois dans le onclick) avec le code javascript this.href (contenu de l'attribut href de la balise courante).

<a href="page.html" onclick="window.open(this.href, ...);return false"> ... </a>

Vous pouvez alternativement vous passer de la propriété onclick et utiliser l'attribut rel pour lancer des popup. Il vous faut alors rajouter l'attribut rel="popup" puis en javascript lister tous les liens avec cet attribut pour leur rajouter une capture d'évenement onlick qui lancera la popup. Si ma dernière phrase vous parait un peu cryptique je vous propose de vous reporter à l'article de sitepoint référencé dans un précédent billet et les six pages de BrainJar sur la gestion des événements en DOM.

Affichage et position

Maintenant que notre popup est lancée il nous reste à regarder où elle est lancée et dans quelle conditions. Nous nous occuperons donc majoritairement des options de window.open() qu'on a laissé de côté tout à l'heure.

Maintenant il nous faut décider la taille de notre popup, ce sont les règles height et width dans nos options. Sans décision de notre part le navigateur utilisera la taille par défaut de la fenêtre, ce qui sera très probablement inadapté à notre petit contenu. Il va nous falloir fournir une taille arbitraire et pour celà nous avons trois critères : la taille utilisable pour l'affichage dans l'écran de l'utilisateur (qu'on peut connaître via self.screen.availHeight et Width en javascript), la taille du navigateur actuel (document.documentElement.clientHeight & Width pour MSIE 6, et document.body.clientHeight & Width pour les autres) et la taille de la police de caractère par défaut.

Il est par exemple à priori une mauvaise idée de définir une taille supérieure à la surface d'affichage disponible chez le client (vous aimeriez une fenêtre qui dépasse ?). Même si le graphisme de la page en souffre, vous seriez mieux avisés de diminuer cette taille. De même, si c'est possible, il est plutôt logique d'avoir une popup qui est de taille égale ou inférieure à celle du navigateur. Si l'utilisateur utilise plusieurs applications à la fois en découpant son écran par zone, il n'aimera pas avoir la popup qui dépasse.

Quant à la présence de la taille de caractère dans cette liste, ça découle directement de mes billets du 26 mars. Si nous utilisons au maximum les tailles proportionnelles ne serait-il pas logique que la taille de la popup reflète ce choix aussi ? Ce n'est pas indispensable (une mise en page bien faite supportera presque toutes les dimensions) mais ça peut être agréable. Pour récupérer cette taille vous pouvez récupérer via javascript la taille en pixel du texte de la balise <body> (ceci ne marche que si vous n'avez pas redéfini la règle font-size pour <body> dans vos CSS). Vous pourrez alors définir une popup de 3em par exemple.

Une fois la taille choisie l'erreur à ne pas faire et d'être assez présomptueux pour penser que ce choix conviendra à tout le monde. Il y aura probablement des utilisateurs pour qui ce sera trop petit et d'autres pour qui ce sera trop grand. Il est donc très important d'autoriser l'utilisateur à redimensionner sa fenêtre à loisir (de toute façons vous n'utilisez que des graphismes adaptables n'est-ce pas ?), pour cela ajoutez resizable=yes à la liste des options. De même, si la taille n'est pas adaptée chez un client il est nécessaire qu'il puisse accéder à tout le contenu tout de même. Il vous faut souvent donc utiliser scrollbars=yes pour que les barres de défilement s'affichent quand c'est nécessaire.

Il est aussi possible de définir la position d'affichage de la fenêtre (options top et left). Ce concept souffre toutefois d'un gros défaut puisqu'il est impossible de connaître la position d'affichage du navigateur en cours (pour mettre la popup par dessus) sous MSIE (pour les autres c'est self.screenX et Y). Afficher la popup au milieu de l'écran est une très mauvaise idée sachant que ce ne sera pas forcément la zone dédiée au navigateur chez le visiteur (pensez par exemple à moi qui ai deux écrans, ça va s'afficher moitié sur l'un moitié sur l'autre) et l'afficher dans un coin n'est guerre pratique. Laissez donc le gestionnaire de fenêtre ou le navigateur du client gérer ça à votre place.

options = 'height=100,width=100,scrollbars=yes,resizable=yes' ;
window.open('http://...','fenetre',options) ;

Contenu

Tout d'abord on parle bien d'une popup. À priori il n'y a alors que le contenu dans la fenêtre, pas les barres d'outil, ni les menus ou la barre d'état, tout ça est désactivé par défaut dans les options javascript au lancement et vous devriez les laisser telles quelles. Si vous pensez que l'utilisation de ces interfaces est utile pour le visiteur c'est qu'on parle de nouvelle fenêtre et non de popup. Dans ce cas je doute personnellement de la pertinence de forcer en javascript la nouvelle fenêtre (voir le débat sur le wikki pompeur) mais si vous persistez laissez une fenêtre classique sans rien retirer, sans fixer de taille ni de position.

Les derniers codes proposés pour créer le lien HTML conviennent parfaitement au délenchement de la popup mais présentent encore un désavantage : la page ouverte en popup et en lien normal est la même. Toutefois, on préfère souvent n'avoir dans une popup que l'information utile. Dans une fenêtre complète il est une bonne idée de présenter au moins le titre du site ou de la section et le menu de navigation. Dans ce cas vous voudrez probablement appeler deux adresses différentes. L'astuce est alors de créer la deuxième adresse en javascript à partir de la première, par exemple en ajoutant popup- comme préfixe.

Interactions avec le visiteur

Notre popup est lancée, sont contenu est décidé, il ne nous reste plus qu'à l'utiliser. Là j'aurai encore deux conseils :

Prévoyez toujours un lien ou un bouton permettant de fermer la popup. Oui, vous savez qu'en cliquant sur la croix tout en haut… moi aussi. L'utilisateur lui n'y pensera pas forcément, surtout un néophyte. Si vous lui demandez de cliquer sur les boutons de manipulation de fenêtre parfois il fermera la fenêtre maîtresse. Fournir un bouton permet aussi de lui dire : tu peux fermer la fenêtre, c'est prévu pour et ne gênera pas la navigation. C'est une aide non négligeable pour le visiteur néophyte.

Si votre popup sert à faire une action (inscription, recherche, envoi de formulaire quelconque, etc.) à toujours fournir une réponse dans votre popup. Un message de confirmation, un message d'erreur mais quelque chose. Votre popup ne doit pas disparaître d'elle même, il faut toujours que ce soit une action explicite de l'utilisateur qui ferme la fenêtre : il doit s'y attendre et ne pas être surpris.

Pendant ce message de confirmation la taille du contenu peut être très réduite par rapport au contenu originel. Dans ce cas vous pouvez avoir envie d'une popup à la taille adaptée. Ne créez pas de nouvelle popup en fermant la précédente ! elle risquerait de s'afficher ailleurs à l'écran et déstabiliser l'utilisateur, redimensionnez au contraire la fenêtre actuelle (window.resizeBy(x,y) ou resizeTo(x,y)). Toutefois avant de faire ça il vous faut prendre deux précautions. Tout d'abord vérifiez qu'il s'agit bien d'une popup et que le visiteur n'est pas arrivé par là sur le lien href sans javascript, si c'est le cas il ne faut pas toucher aux dimension car il s'agit de sa fenêtre de navigation principale. Si ce test est concluant vérifiez ensuite que la fenêtre n'a pas été redimensionnée par l'utilisateur depuis sa création, si ça a été le cas c'est peut être que vos tailles ne sont pas adaptées, autant ne pas le gêner plus et éviter de redimensionner.