Aswin Lutchanah

Hybrid Social Media Specialist + Php/MySql Developer Metz (Développeur Php/MySql Metz) + SEO-SMO

Google mobile friendly et le champ url en HTML5

Dans le monde du Web et plus précisément dans celui du SEO (référencement), on n’arrête pas de parler du 21 avril 2015 date à laquelle est rentrée en vigueur la norme mobile-friendly de Google. Pour aider les développeurs à améliorer leurs sites et les rendre compatibles mobiles, Google a mis en place une url de test de compatibilité mobile.

En voulant tester quelques sites dans le bus en rentrant du boulot, j’ai lancé cette url sur mon iPhone et j’ai été surpris de voir que le grand Google n’avait pas daigné utiliser le champ url de l’HTML 5 pour son formulaire de test de compatibilité mobile. Ironique n’est-ce pas ? Surtout qu’en utilisant le formulaire pour taper une url, la première lettre s’est automatiquement mise en majuscule et comme Google avait rajouté une validation par expression régulière sur ce champ, l’url que j’avais tapée n’était pas valide… Pourquoi ? Tout simplement parce que l’expression régulière n’autorisait que du texte commençant par “http” tout en minuscule. L’image dans mon tweet ci-dessous illustre bien cela.

Screenshot Test de compatibilité - Google Mobile friendly

Champ url en HTML 5

HTML 5 propose plusieurs champs (input) qui permettent d’autoriser ou de faciliter la saisie d’un type de texte. Quelques nouveaux champs (inputs) en HTML 5 sont :

  • tel : pour faciliter la saisie d’un numéro de téléphone
  • email : pour simplifier la saisie d’un email
  • search : pour la saisie d’un mot-clé
  • datetime et datetime : pour la saisie d’une date, d’une heure ou les deux
  • month : pour la saisie d’un mois
  • week : pour la saisie d’une semaine
  • number : pour la saisie d’un nombre
  • range : pour la saisie d’une valeur en utilisant un curseur
  • color : pour le choix d’une couleur

Bon, aujourd’hui, je vais vous parler du champ url car c’est le sujet de cet article.

Pourquoi utiliser un champ de type url au lieu du champ de type text comme avant ?

Tout simplement pour que le formulaire soit user-friendly et que cela évite d’avoir des soucis ressemblant à celui du formulaire de compatibilité mobile de Google. En effet sur mobile quand on utilise un champ HTML 5, le clavier s’adapte au type de champ et propose des caractères adaptés. Le champ url ne déroge pas à la règle. Voyons cela avec un exemple concret. Comme vous pouvez le constater en analysant les 2 images ci-dessous, il y a une différence entre les deux claviers proposés selon si on a un champ de type texte ou un champs de type url ; la différence est illustrée avec l’encadré rouge.

Avant HTML 5

Champ type texte avant HTML 5 pour saisir une urlAvant HTML 5, pour saisir une url, on créait un champ de type texte comme ci-dessous. Je vous propose de voir le rendu sur votre mobile en dessous du code.

  1. <input name="url" type="text" />

Et maintenant, vous pouvez tester cela avec votre mobile.

Avec HTML 5

Champ type url avec HTML 5 pour saisir une urlVoici un champ de type url pour saisir une url.

  1. <input name="url" type="url" />

Maintenant, regardez la différence sur votre mobile avec le champs ci-dessous :

Posted In: HTML, SEO, Web Development

Tags: , , , ,

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*