Comment créer un sous-domaine « m » pour sites web mobiles

De plus en plus de gens naviguent sur Internet via un appareil mobile (smartphone, tablette). Les propriétaires de sites peuvent soit faire en sorte que leur site s'adapte à la taille d'écran (responsive), soit rediriger les visiteurs mobiles vers une version distincte optimisée pour mobile. Créer un sous-domaine « m » pour la version mobile est une bonne façon de la séparer du site principal, mais il faut aussi rediriger les visiteurs mobiles vers ce sous-domaine. Détecter la taille d'écran est une méthode simple pour rediriger les navigateurs mobiles.

Créer un sous-domaine

Étape 1

Connectez-vous au panneau de contrôle de votre hébergement web. Cliquez sur l'icône « Sous-domaines », souvent groupée avec les outils liés aux domaines.

Étape 2

Saisissez « m » dans le champ sous-domaine. Sélectionnez le domaine auquel ajouter le sous-domaine via la liste déroulante.

Étape 3

Notez l'emplacement FTP où iront les fichiers de votre nouveau sous-domaine. Cette info s'affiche généralement sur la page de création dès que vous entrez le nom. Validez le formulaire pour créer le sous-domaine. Il devrait être actif immédiatement, mais vous devez y uploader des fichiers avant qu'il n'affiche quoi que ce soit.

Écrire la redirection

Étape 1

Ouvrez le fichier de la page d'accueil de votre site, généralement « index.html » ou « index.php ». S'il n'y a pas de balises </head> dans ce fichier, ouvrez le fichier d'en-tête, généralement « header.html » ou « header.php ».

Étape 2

Ajoutez le code JavaScript suivant dans la section <head> :

Étape 3

Écrivez un petit script JavaScript pour détecter la largeur d'écran de l'appareil visitant votre site. Si la largeur est inférieure à 700 pixels, supposez que l'utilisateur est sur mobile et redirigez-le vers le sous-domaine « m » :

<script type="text/javascript">
if (screen.width < 700) {
    window.location = "https://m.votredomaine.com";
}
</script>

Dans le script ci-dessus, remplacez « votredomaine.com » par votre propre domaine.

Astuce

Le script de redirection fonctionne aussi avec un domaine « .mobi ». Dans ce cas, vous auriez un domaine comme « monsite.mobi » au lieu de « m.monsite.com ».

Note importante : Approche moderne recommandée

Aujourd'hui, le design responsive (media queries CSS, grilles fluides, images flexibles) est la norme recommandée par Google et la communauté web. Il évite les problèmes de contenu dupliqué, de référencement et de maintenance de deux versions distinctes. Utilisez plutôt : <meta name="viewport" content="width=device-width, initial-scale=1"> et des media queries CSS. La redirection par sous-domaine « m » est considérée comme une pratique obsolète (legacy).