Les pages Web optimisées pour une utilisation sur les appareils mobiles diffèrent de celles qui s'affichent sur les ordinateurs de bureau et les ordinateurs portables. Ces derniers sont conçus pour les grands écrans et les clics de souris précis, tandis que les pages Web mobiles sont dimensionnées pour les écrans plus petits et les tapotements imprécis.
- Conçu pour les petits écrans et les tapotements imprécis.
- Conçu pour les grands écrans avec un clic de souris précis.
Étant donné que la majorité des visites de sites Web proviennent d'appareils mobiles, les concepteurs de sites sont chargés de fournir des versions compatibles avec les appareils mobiles et les ordinateurs de bureau. L'approche la plus courante consiste à utiliser une conception Web réactive, qui fournit automatiquement la version appropriée en fonction de l'appareil de l'utilisateur et de la taille de l'écran, tels qu'ils sont détectés par le navigateur.
Dans tous les cas, les pages Web adaptées aux mobiles se distinguent des versions pour ordinateur de plusieurs façons.
Conception de la page: les écrans mobiles ont moins d'espace
-
Les écrans des smartphones et des tablettes mesurent entre 4 et 10 pouces de diagonale.
- Les widgets de menu pliables ou extensibles remplacent généralement les barres latérales et les menus d'en-tête volumineux.
- Graphiques pleine largeur avec utilisation judicieuse de l'espace entre le texte.
- La plupart des écrans de bureau mesurent entre 19 pouces et 24 pouces de diagonale.
- Les liens sponsorisés et les grandes bannières publicitaires sont plus courants.
- Texte plus dense avec plus de latitude pour les graphiques.
La différence la plus évidente entre les pages Web pour ordinateur et mobile est l'espace à l'écran. Alors que la plupart des moniteurs de bureau mesurent au moins 19 pouces à 24 pouces de diagonale, les tablettes mesurent généralement environ 10 pouces. Les smartphones mesurent environ 4 pouces de diagonale. Un simple zoom arrière ne convertit pas avec succès une page Web en une version adaptée aux mobiles, car il rend le texte illisible et nécessite une étape supplémentaire de la part du visiteur du site. De plus, taper avec précision sur de minuscules éléments devient impossible.
Pour résoudre le problème, les concepteurs peuvent supprimer les barres latérales et les graphiques qui ne sont pas strictement nécessaires. Au lieu de cela, ils utilisent des graphiques plus petits, augmentent la taille des polices et réduisent le contenu dans des widgets extensibles. Cette limitation de l'immobilier a entraîné un tout autre type de réflexion chez les concepteurs de sites Web.
De plus, les widgets de menu pliables ou extensibles remplacent généralement les barres latérales et les menus d'en-tête volumineux. Dans leur quête pour que chaque millimètre d'espace d'écran compte, les concepteurs suppriment les espaces blancs superflus, tout en gardant un œil attentif sur la lisibilité.
Une multitude de liens sponsorisés et de grandes bannières publicitaires ne fonctionnent tout simplement pas sur un téléphone ou une petite tablette. Au lieu de cela, les petites annonces pop-up sont plus courantes sur les pages Web mobiles.
Les mises en page qui comportent du texte autour d'un graphique ne fonctionnent pas bien sur les appareils mobiles. Au lieu de cela, les concepteurs donnent souvent à ces graphiques toute la largeur de l'écran et exécutent le texte en dessous ou au-dessus. De même, une bonne conception Web divise le texte en morceaux pour plus de lisibilité; personne ne veut lire des murs solides de texte. Cela devient encore plus important sur les petits écrans. Utiliser judicieusement les espaces blancs est crucial.
Contrôles de page: Desktop Precision contre Mobile Blobs
- Grandes zones de tapotement ou hotspots pour une navigation plus précise.
- URL différente: ajoute la lettre "m". Souvent une option pour afficher la version de bureau d'un site.
- Les identifiants de connexion disposent souvent d'un espace dédié, parfois avec accès aux empreintes digitales.
- Liens et boutons basés sur le curseur plus précis.
Contrairement à un pointeur de souris précis sur votre bureau, le doigt humain est une goutte, et le tapotement nécessite de grandes cibles sur l'écran pour les hyperliens. Les sites adaptés aux mobiles offrent de grandes zones d'écoute (ou hotspots) pour faciliter une navigation précise.
Les pages Web adaptées aux mobiles incluent également généralement la lettre m dans leurs adresses; par exemple, l'adresse mobile de Facebook est m.facebook.com. L'URL mobile est généralement choisie automatiquement pour vous lorsque vous surfez avec une tablette mobile ou un smartphone. Dans certains cas, vous verrez un lien tappable qui vous permet de passer à la version de bureau normale de la page.
Les champs de connexion et de mot de passe destinés aux ordinateurs de bureau et aux ordinateurs portables deviennent minuscules et inutilisables sur un téléphone. Les éditeurs Web les agrandissent donc, leur donnant parfois leurs propres pages pour en faciliter l'utilisation. Se connecter avec une empreinte digitale ou un autre compte, tel que Google ou Facebook, devient de plus en plus courant à mesure que les capacités des appareils et des services évoluent.
Pourquoi est-ce important ?
Les pages Web mobiles sont conçues pour les appareils portables et sont très différentes des pages conçues pour la lecture sur ordinateur. Bien que vous puissiez généralement afficher la version de bureau d'une page Web sur un appareil mobile, et vice versa, elles sont conçues différemment pour faciliter l'affichage, la lecture et la navigation du contenu.
