Version mobile d'un site Web : huit endroits qu'il casse le plus souvent

Plus de la moitié des visites proviennent de téléphones, et la vérification se fait sur un bureau

Un propriétaire de site regarde leur site sur un grand écran, avec Internet rapide, une souris et un cache chaud. Leur visiteur est habituellement sur un téléphone, dans un train, en utilisant une main.

À cause de cela, toute une classe de défauts reste invisible pendant des mois. Non pas parce qu'ils sont difficiles à trouver, mais parce que personne ne regarde du côté où ils existent.

Il est aggravé par la version mobile presque toujours en étant construit deuxième. La disposition grand écran d'abord, puis pressez-la pour les téléphones. La pression est exactement là où les choses se brisent.

Ci-dessous : huit endroits qui se brisent le plus souvent, par ordre de fréquence, et un moyen de vérifier votre propre site en une demi-heure qui trouve de vrais problèmes plutôt que de le confirmer.

Pourquoi être beau n'est pas un chèque

La façon la plus courante de vérifier est d'ouvrir le site sur votre propre téléphone et défiler. Il ne capte que les défauts de configuration bruts et manque tout le reste.

Votre téléphone n'est pas un téléphone moyen. Il est plus récent, l'écran est plus grand, la connexion est plus rapide, et la moitié du site est déjà mise en cache lors de visites précédentes.

Et surtout : vous savez où taper. Vous ne cherchez pas un bouton, ne lisez pas les étiquettes, ou vous demandez ce qui s'ouvrira. Ces trois choses sont exactement ce que consiste l'expérience mobile d'un étranger.

Un vrai contrôle est de compléter une tâche spécifique fin à fin: trouver un prix, soumettre une demande, passer un appel. Et combien de temps ça a pris.

Vérifiez séparément sur les données mobiles plutôt que la maison wifi. La différence de vitesse peut être de cinq fois, et la moitié des problèmes ne sont visibles que de cette façon.

Boutons : taille et frappe

La faute la plus courante et la moins chère à réparer.

Un doigt n'est pas un curseur. La zone tapable doit être nettement plus grande que le regard du bouton: un carré d'environ un centimètre par côté est le guide. Un lien de la hauteur d'une ligne de texte ne correspond pas.

La seconde difficulté est les boutons placés en rouge entre eux. Deux éléments voisins sans écart signifient que les gens frappent régulièrement le mauvais, et ne remarquent pas toujours.

Le troisième est un bouton sous la barre du navigateur. Le bas d'un écran de téléphone appartient à l'interface, et un élément épinglé au bas finit à moitié caché.

Et un quatrième, moins évident : un numéro de téléphone qui ne compose pas une fois tapé. Écrire le nombre comme texte simple et ne pas en faire un lien signifie forcer quelqu'un à le sélectionner et à le copier en une seule main.

Formulaires : où les demandes sont perdues

Une forme sur un téléphone est l'endroit où la plupart des gens qui l'ont fait jusqu'à la fin du voyage tombent.

Chaque champ supplémentaire coûte plus que sur un bureau : la saisie est gênante, l'écran est petit, tout autour est distrayant. Demande exactement ce que tu dois rappeler quelqu'un.

Vérifiez quel clavier s'ouvre sur chaque champ. Un champ de téléphone devrait faire monter le clavier numérique, un champ de courriel celui avec le signe, pas le simple. C'est une ligne de balisage et une différence notable dans le confort.

Regardez ce qui se passe quand le clavier couvre la moitié de l'écran. Souvent le champ étant tapé dans finit en dessous, et la personne tape aveugle.

Vérifiez que la confirmation de soumission est visible sans défilement. Si le message de remerciement apparaît au-dessus de la fenêtre, les gens ne le verront pas et appuieront sur le bouton une deuxième fois.

Tableaux, listes de prix et tout ce qui est large

La deuxième source de défauts la plus courante et la première en conséquences si vous avez un catalogue.

Une table de six colonnes ne convient pas à un téléphone par aucun moyen. Il y a deux options : lui donner le défilement horizontal dans son propre conteneur, ou le reconstruire en cartes où chaque rangée devient un bloc.

Ce qui ne peut pas être fait, c'est de le laisser tel quel. Puis toute la page défile, et quelqu'un essayant de voir le bord droit de la table dérive latéralement avec le menu et l'en-tête.

Il en va de même pour les images larges, les blocs de code et les cartes intégrées. Tout élément plus large que l'écran doit défiler en lui-même plutôt que de traîner la page le long.

Il faut un geste pour tester : glisser latéralement n'importe où sur une page. Si la page a bougé, vous avez un élément qui la brise.

Popups

Sur un bureau, un popup couvre une partie de l'écran. Sur un téléphone, il couvre tout.

D'où une règle qui mérite d'être traitée comme dure: un popup sur un téléphone doit fermer sur la première tentative, via un bouton de fermeture de taille adéquate, et ne doit pas réapparaître dans la même session.

Popups qui apparaissent immédiatement à l'arrivée sont les plus dommageables. Quelqu'un qui vient de la recherche n'a pas encore déterminé s'il est au bon endroit et doit déjà rejeter quelque chose. Une proportion part tout simplement.

Une catégorie de sa propre est le consentement et la notification invite à s'empiler l'un sur l'autre. Deux dialogues à la fois sur un petit écran signifie que le contenu n'est pas visible du tout.

Un compromis pratique: montrer l'offre non pas immédiatement, mais après que quelqu'un a défilé à mi-chemin ou a passé au moins une demi-minute sur la page.

Texte: taille, longueur de la ligne, contraste

Trois choses qui ressemblent au goût et qui décident si quelqu'un lit.

Taille: petit texte sur un téléphone ne se lit pas, il se pince plus grand, et c'est irritant. Le texte du corps ne devrait pas être plus petit que sur un bureau, plutôt que l'inverse.

Longueur de la ligne : sur un écran étroit, les lignes sont courtes, mais les marges latérales sont souvent trop larges. Le texte a besoin de place, mais pas au prix de la moitié de l'écran.

Contraste: gris pâle sur blanc semble élégant sur un bon moniteur à l'intérieur et disparaît sur un téléphone au soleil. Il doit être vérifié à l'extérieur, pas à un bureau.

Et ne pas désactiver le zoom. Certains sites s'éteignent pour la stabilité de la mise en page — pour les personnes ayant une mauvaise vue qui rend le site inutilisable.

Ce qui ralentit spécifiquement un téléphone

La vitesse mobile diffère non pas en degré, mais en nature : les goulets d'étranglement sont différents.

Des images. Ce qui est affiché à mille pixels sur un grand écran a besoin de moitié que sur un téléphone. Si le site sert chacun un seul fichier, le téléphone télécharge ce qu'il ne peut pas utiliser.

Des scripts tiers. Chats, compteurs, revues de widgets, cartes. Chacun est imperceptible sur un ordinateur puissant et ensemble ils ajoutent jusqu'à des secondes d'attente sur un téléphone moyen.

Polices. Si le texte attend le téléchargement d'une police, quelqu'un passe plusieurs secondes à regarder l'espace vide. Il est configuré en une seule ligne, et cette ligne est presque toujours oubliée.

Et tout se charge en même temps. Tout ce qui se trouve sous le premier écran doit être chargé sur défilement. Sur un bureau, la différence est à peine visible; sur un téléphone, elle est décisive.

Comment vérifier correctement

Quatre méthodes, moins chères à plus précises.

Réduire la fenêtre du navigateur sur un bureau à la largeur du téléphone. Attrape des défauts de disposition bruts en une minute, mais rien sur les doigts ou la vitesse.

Mode périphérique dans le navigateur. Plus près de la vérité : elle émule la taille de l'écran, la densité des pixels et le toucher au lieu d'une souris. Une bonne façon de tester les formulaires et les cibles de boutons.

Votre propre téléphone sur les données mobiles. La seule façon de voir la vitesse réelle. Avec le cache effacé — ouvrez le site dans une fenêtre privée.

Et le téléphone de quelqu'un d'autre, de préférence plus vieux que le vôtre. Le contrôle le plus honnête de tous, et il révèle régulièrement ce que rien d'autre ne fait.

Mise en page réactive ou site mobile séparé

Une question qui était contestée et qui a maintenant une réponse claire.

Un site mobile séparé sur sa propre adresse est une solution obsolète. Cela signifie deux séries de pages, deux séries de textes, et un risque permanent qu'ils divergent.

Une mise en page réactive est un ensemble de pages qui se réorganise en largeur d'écran. Une adresse, un texte, un travail lors de la mise à jour.

Les moteurs de recherche jugent un site par sa version mobile : c'est celui qui est traité comme primaire. Ce qui signifie que le contenu que vous cachez sur les téléphones pour la compacité peut ne pas exister pour la recherche du tout.

La conséquence pratique : ne cachez pas de texte et de liens sur la version mobile. Le collage dans des blocs extensibles est très bien; les enlever entièrement ne l'est pas.

Une liste de contrôle d'une demi-heure: Ouvrir le site sur votre propre téléphone et défiler…

Prenez un téléphone, éteindre le wifi, et de travailler à travers les points.

Ouvrez le site dans une fenêtre privée et le temps jusqu'à ce que le contenu apparaisse.

Trouvez le prix de tout service sans utiliser la recherche propre du site.

Soumettre une demande à la fin et attendre la confirmation.

Appuyez sur le numéro de téléphone et vérifiez que le composeur s'ouvre.

Faites glisser latéralement sur plusieurs pages et voyez si la page elle-même bouge.

Ouvrez une page avec un tableau ou une liste de prix et essayez de lire le bord droit.

Et prenez le site dehors par une journée ensoleillée. La moitié des problèmes de contraste sont visibles seulement là.