Où placer le bouton "Appeler" sur mobile pour qu'il soit vraiment cliqué

Sur mobile, le bouton « Appeler » doit se trouver à deux endroits : en haut de la page, visible sans avoir à défiler, et dans une barre fixe en bas de l'écran, là où le pouce arrive sans effort. Il doit utiliser un vrai lien tel: au format international (+33 pour la France), être assez grand pour le pouce et ne jamais être recouvert : ni par la bannière cookies, ni par une bulle de chat, ni par un pop-up.

Si vous tenez un garage, un salon ou un cabinet, la plupart de vos visiteurs ouvrent votre site sur leur téléphone, souvent debout, une main occupée. Ils ne lisent pas, ils survolent. Le problème n'est presque jamais l'absence de bouton téléphone : c'est qu'il est au mauvais endroit, qu'il disparaît dès qu'on fait défiler, ou que le lien est mal configuré. Voici où le placer, comment construire une barre fixe qui n'agace pas, comment vérifier que le lien fonctionne et comment mesurer les appuis.

Où placer le bouton d'appel : les emplacements qui comptent

Sur ordinateur, un numéro bien lisible dans l'en-tête suffit généralement : la barre fixe sert surtout sur téléphone.

La règle du pouce : le bouton doit tomber là où la main atteint

Quand on tient un téléphone d'une main, le pouce couvre confortablement le bas et le milieu de l'écran. Les coins du haut sont difficiles à atteindre, surtout sur les grands modèles. Votre bouton de contact principal ne doit donc pas se trouver uniquement dans l'en-tête, tout en haut, hors de portée sans changer de prise.

Ce qui marche en pratique :

• Un bouton téléphone visible tout de suite, sans défiler.
• Une barre fixe en bas, présente pendant toute la lecture.
• Une vraie zone tactile : un bouton aussi haut qu'un bout de doigt, pas une fine ligne de texte.
• De l'espace autour : un bouton collé à un autre lien provoque des appuis à côté.

Pour la taille, il existe des repères officiels. Les règles d'accessibilité WCAG 2.2 fixent un minimum de 24 × 24 pixels CSS pour une cible cliquable ou tactile (niveau AA, avec quelques exceptions) et un niveau renforcé de 44 × 44 pixels CSS (niveau AAA) (W3C, critères 2.5.8 et 2.5.5). Pour Android, Google recommande une zone tactile d'au moins 48 × 48 dp (Android Developers). Pour un bouton aussi important que « Appeler », visez plus grand que le minimum.

Pensez-y simplement : si quelqu'un veut vous appeler à 20 heures, à quelle vitesse trouve-t-il le numéro sans chercher ? Si la réponse est « il doit faire défiler », vous perdez l'appel.

Barre fixe pleine largeur ou bouton rond flottant ?

On croise deux formats sur les sites mobiles : la barre ancrée en bas sur toute la largeur, et la pastille ronde avec une icône de téléphone dans un coin. Les deux restent visibles au défilement, mais ils ne font pas le même travail.

Pour un garage, un dépanneur, un cabinet ou un salon, la barre pleine largeur reste la solution la plus fiable : où que soit la personne sur la page, le contact est à un pouce, avec un texte qui dit exactement ce qui va se passer.

Comment bien construire la barre fixe

• Affichez-la sur mobile ; sur ordinateur, vous pouvez la masquer, le numéro est déjà dans l'en-tête.
• Idéalement, deux actions côte à côte : « Appeler » et WhatsApp. Certains préfèrent écrire, d'autres parler. Voir aussi comment placer un bouton WhatsApp sans paraître peu sérieux.
• Faites du bouton téléphone un vrai lien tel:, pour qu'un appui lance l'appel directement (le format exact est détaillé plus bas).
• Gardez-la fine. Google déconseille les interstitiels qui empêchent de voir le contenu et recommande plutôt des bannières qui n'occupent qu'une petite partie de l'écran (Google Search Central).
• Laissez en bas de page un espace égal à la hauteur de la barre, pour qu'elle ne recouvre ni le texte ni le pied de page.
• Pensez aux iPhone sans bouton d'accueil : la barre doit tenir compte de la zone de sécurité en bas de l'écran (en CSS, env(safe-area-inset-bottom)), sinon ses boutons risquent de se retrouver collés à la petite barre horizontale qui sert à revenir à l'écran d'accueil.
• Selon le navigateur et ses réglages, la barre d'adresse peut elle aussi se trouver en bas de l'écran : testez sur un vrai iPhone et un vrai Android, pas seulement dans l'aperçu de l'éditeur.
• Quand un visiteur remplit un formulaire, la barre ne doit cacher ni le champ en cours ni le bouton d'envoi. Les règles WCAG 2.2 citent justement les pieds de page fixes parmi les éléments qui peuvent masquer l'élément actif, et proposent une marge de défilement en CSS (scroll-padding) comme parade (W3C, critère 2.4.11).

C'est le genre de petit détail qui change le nombre d'appels reçus, pas l'apparence du site.

Le lien tel: : le détail technique qui fait tout

Un bouton « Appeler » n'est utile que si l'appui ouvre vraiment l'appel. Pour cela, il doit pointer vers un lien tel: suivi du numéro au format international.

• En France, on remplace le 0 initial par +33 : le numéro 06 39 98 12 34 (numéro fictif) devient tel:+33639981234 dans le lien.
• Dans le lien lui-même, écrivez les chiffres à la suite, sans espaces. À l'écran, en revanche, affichez le numéro avec des espaces (06 39 98 12 34) : c'est plus lisible.
• Le format international fonctionne quel que soit l'endroit d'où l'on appelle, y compris depuis un téléphone étranger.
• Méfiez-vous des vieux tutoriels qui proposent un lien callto: : ce format non standard était surtout associé à Skype, que Microsoft a arrêté le 5 mai 2025. Utilisez tel:.
• Sur ordinateur, un lien tel: ouvre l'application d'appel installée (FaceTime sur Mac, par exemple) ou propose une autre action selon le système. Affichez donc toujours le numéro en clair, pour qu'on puisse le composer à la main.
• Si le bouton ne montre qu'une icône, donnez-lui un libellé lisible par les lecteurs d'écran, par exemple « Appeler le garage ». Sinon, il sera annoncé de façon vague.
• Le numéro doit être du texte, jamais une image, et identique à celui de votre fiche Google Business Profile.

Couleur, texte et taille : à quoi ressemble un bouton sur lequel on appuie

Un bon bouton se voit immédiatement, on ne le devine pas. Choisissez une couleur qui contraste nettement avec le reste de la page : si tout le site est bleu, un bouton bleu disparaît. Gardez un texte clair et direct : « Appeler » vaut mieux qu'un simple « Contact », car il dit exactement ce qui se passe quand on appuie.

Quelques règles concrètes :

• Un bouton haut et large, facile à atteindre en marchant.
• Une icône de téléphone à côté du texte, reconnue instantanément.
• Un seul « bouton principal » bien visible ; les autres actions restent plus discrètes.
• Si vous avez des horaires, notez « Lun-Ven 9h-18h » près du bouton, pour qu'on sache si vous répondez maintenant.
• En dehors de ces horaires, mettez plutôt en avant WhatsApp ou une demande de rappel : un appel qui sonne dans le vide décourage souvent plus qu'un message auquel vous répondez le lendemain matin.

Le but : que quelqu'un de pressé le trouve et appuie dessus sans réfléchir.

Mesurer les appuis sur le bouton d'appel

Un bouton bien placé doit se voir dans vos chiffres. Dans Google Analytics 4, la mesure automatique des « clics sortants » est définie pour les liens qui mènent vers un autre site. Pour suivre clairement les appuis sur le bouton d'appel, le plus simple est de créer votre propre événement (nous détaillons la configuration dans notre guide sur le suivi click-to-call dans GA4).

• Dans Google Tag Manager, créez un déclencheur de clic de type « Liens uniquement », limité aux liens dont l'URL commence par tel:, et reliez-le à une balise d'événement GA4 (par exemple « clic_appel »).
• Dans GA4, marquez cet événement comme événement clé pour le retrouver dans vos rapports.
• Pour savoir quel bouton travaille le mieux (en-tête ou barre du bas), donnez-leur un nom d'événement ou un paramètre différent.
• Gardez en tête qu'un appui n'est pas un appel abouti : la personne peut renoncer au dernier moment. Comparez avec le journal d'appels de votre téléphone. Pour aller plus loin, les outils de suivi d'appels attribuent un numéro différent à chaque source (site, annonces, fiche Google).

Les erreurs qui vous coûtent des appels sur mobile

Beaucoup de sites ont un bouton téléphone et pourtant personne n'appelle. Souvent à cause de petites choses qui se corrigent vite :

• Le numéro n'est qu'un texte, pas un lien cliquable : il faut le copier à la main, et on abandonne.
• Le lien tel: contient une erreur (chiffre manquant, ancien numéro) et l'appel ne passe pas.
• Le bouton ne s'affiche qu'en haut et disparaît au défilement, juste au moment où l'on se décide.
• La bannière cookies ou la bulle de chat s'affiche par-dessus la barre fixe.
• La barre fixe recouvre le bouton d'envoi du formulaire ou un texte important.
• Des pop-ups surgissent par-dessus le bouton et il faut d'abord les fermer.
• Le bouton est trop petit ou trop proche d'un autre lien, et on appuie à côté.
• Trois ou quatre boutons aussi voyants les uns que les autres : on ne sait plus lequel est le bon.

Le test à faire sur votre propre téléphone

Ouvrez votre site comme le ferait un client pressé, puis vérifiez :

• En combien de temps arrivez-vous à appeler, depuis l'accueil et depuis une page de service ?
• L'appui sur le bouton affiche-t-il le bon numéro, sur iPhone comme sur Android ?
• Tout en bas, le pied de page est-il entièrement visible au-dessus de la barre ?
• En remplissant le formulaire, le champ actif et le bouton d'envoi restent-ils visibles ?
• Avec la bannière cookies affichée, la barre reste-t-elle utilisable ?
• Si vous agrandissez la taille du texte dans les réglages du téléphone, le bouton reste-t-il lisible et entier ?
• Sur ordinateur, le numéro est-il affiché en clair ?

Si vous, qui connaissez le site, cherchez quelques secondes, un inconnu abandonne plus tôt.

Comment nous traitons ce point chez MPO Web Studio

Sur les sites que nous réalisons, le bouton « Appeler » et la barre fixe mobile ne sont pas un ajout de dernière minute : nous les prévoyons dès le départ, car la plupart de vos clients arrivent par leur téléphone. Nous sommes un petit studio web de Cluj-Napoca, en Roumanie, et nous travaillons à distance, avec des prix transparents et sans surprise.

Pour ne pas acheter « sur parole », nous vous préparons gratuitement une démo de votre site, à l'avance, pour que vous voyiez sur votre propre téléphone où tombe le bouton et comment se comporte la barre fixe. Nous n'avançons que si elle vous plaît.

Si vous souhaitez un regard extérieur sur votre site actuel ou une démo pour votre activité, écrivez-nous sur WhatsApp : nous regardons ensemble où vous perdez des appels et ce qui se corrige vite, sans promesse de « numéro un sur Google ».