Pages Web mobiles vs. Pages Web de bureau
Les pages Web optimisées pour une utilisation sur les appareils mobiles diffèrent de celles qui apparaissent sur les ordinateurs de bureau et 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 des écrans plus petits et des tapotements imprécis.
Mobile
Conçu pour les écrans plus petits et les tapotements imprécis du doigt.
Bureau
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 qui fonctionnent à la fois 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, telles que détectées par le navigateur.
Dans tous les cas, les pages Web adaptées aux mobiles se distinguent des versions de bureau à plusieurs égards.

Conception de page: les écrans mobiles ont moins d'espace
Mobile
Les écrans des smartphones et tablettes mesurent 4 à 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 les textes.
Bureau
La plupart des moniteurs de bureau mesurent de 19 à 24 pouces de diagonale.
Les liens sponsorisés et les grandes bannières publicitaires sont plus courants.
Texte plus dense avec plus de liberté pour les graphiques.
La différence la plus évidente entre les pages Web de bureau et les pages Web mobiles est la surface de l'écran. Alors que la plupart des moniteurs de bureau mesurent au moins 19 à 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 cela 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 immobilière a conduit à un tout autre type de pensée parmi les concepteurs de sites Web.
De plus, les widgets de menu réductibles 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 à l'écran compte, les concepteurs suppriment les espaces blancs superflus, tout en gardant un œil attentif sur la lisibilité.
Une foule 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 enroulé 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 de solides murs de texte. Cela devient encore plus important sur les petits écrans. L'utilisation judicieuse des espaces blancs est cruciale.
Contrôles de page: Desktop Precision vs. Blobs mobiles
Mobile
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 ont souvent un espace dédié, parfois avec une accessibilité par empreinte digitale.
Bureau
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 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. Le mobile URL est généralement choisi automatiquement pour vous lorsque vous surfez avec une tablette mobile ou un smartphone. Dans certains cas, vous verrez un lien exploitable qui vous permet de basculer vers la version de bureau standard de la page.
Connectez-vous et le mot de passe les champs destinés aux ordinateurs de bureau et portables deviennent minuscules et inutilisables sur un téléphone, de sorte que les éditeurs Web les agrandissent, leur donnant parfois leurs propres pages pour en faciliter l'utilisation. Connexion avec un 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 assez 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 dans le contenu.