Vous souvenez-vous d’Internet vers 1997 ? Les pages ont été conçues pour les moniteurs CRT basse résolution et les modems lents. Le texte dominait le Web et, occasionnellement, des images JPEG et GIF décoraient des pages ici et là. La plupart du temps, nous ne les voyions pas, car désactiver les images était un moyen sûr d’augmenter un peu la vitesse d’un modem commuté. Plus d’une décennie plus tard, l’ensemble du paysage Internet a changé. L’Internet haut débit via des connexions par câble et DSL est la norme dans les pays développés, et les pages Web peuvent utiliser des éléments plus complexes (des tonnes d’images, des effets de transparence et même de la vidéo) pour diffuser du contenu. Nous pouvons même diffuser des films entiers depuis Internet vers nos ordinateurs sans attendre le téléchargement des fichiers !
Aussi énorme que soit le passage à des moniteurs à plus haute résolution, à des vitesses à large bande et à des options graphiques sophistiquées, une deuxième tendance a eu un impact majeur sur le World Wide Web tel qu’il existe aujourd’hui. À mesure que la technologie téléphonique est devenue plus avancée et moins coûteuse, les smartphones sont devenus une partie intégrante de l’expérience Internet. Les appareils mobiles représentent une passerelle clé vers le Web pour des millions et des millions d’utilisateurs qui ne possèdent pas de PC. Par exemple, en Inde, l’utilisation du populaire navigateur Web Opera Mini a augmenté de 300 % entre mars 2010 et mars 2011. Dans de nombreuses régions du monde, la fenêtre sur Internet ne se trouve pas sur un écran de 23 pouces. C’est sur un écran de téléphone de 3 pouces. Même les téléphones « idiots » bon marché, sans écran tactile ni matériel puissant, peuvent surfer sur le Web.
Accédez au site Web mobile. Étant donné que la popularité de l’Internet mobile s’est accompagnée d’un service Internet haut débit et d’un matériel informatique plus puissant, les développeurs de contenu en ligne sont confrontés à un défi unique. Les sites Web conçus pour les grands écrans, les ordinateurs rapides et l’Internet rapide s’appuient fortement sur des graphiques et une programmation de pointe qui ne fonctionnent pas toujours sur les écrans plus petits et les réseaux plus lents des appareils mobiles. La solution réside dans les sites Web mobiles – des pages spécialement conçues pour fonctionner sur des appareils plus petits et fournir du contenu important tout en réduisant les graphiques qui ralentissent le chargement des pages. Même si les sites Web mobiles sont intentionnellement plus simples que les sites complets, cela ne signifie pas qu’ils sont faciles à créer. Les sites Web mobiles nécessitent toujours une attention particulière en matière de conception et de technologie, et les limitations strictes du matériel mobile ne facilitent pas les choses.
Pourquoi les sites Web mobiles nécessitent des considérations de conception particulières
Le passage d’un navigateur de bureau à un navigateur mobile ne consiste pas seulement à réduire l’écran. Il s’agit d’éliminer le bruit. Lorsque vous concevez un site Web mobile, vous ne vous contentez pas de réduire la taille. Vous repensez ce qui compte.
Les utilisateurs d’ordinateurs de bureau attendent une touche visuelle. Ils disposent de la bande passante et du nombre de pixels nécessaires pour le gérer. Utilisateurs mobiles ? Pas tellement. Un utilisateur disposant d’une connexion 3G dans une zone rurale n’attend pas le chargement d’une image de héros. Ils veulent le texte. Ils veulent les données. Si vous imposez une expérience de bureau sur un appareil mobile, vous n’êtes pas innovant. Vous êtes un obstacle.
Cela crée un problème spécifique pour les développeurs. Comment équilibrez-vous le besoin d’un contenu riche avec la réalité de ressources limitées ?
Les principales contraintes de la conception Web mobile :
- L’espace d’écran est rare. Un écran de 3 pouces ne peut pas afficher la même disposition qu’un moniteur de 23 pouces. La navigation doit être intuitive et non tentaculaire.
- La puissance matérielle varie énormément. Bien que les smartphones soient devenus puissants, les téléphones de base existent toujours. Un code qui s’exécute correctement sur un iPhone peut s’étouffer sur un appareil Android d’entrée de gamme ou un téléphone polyvalent.
- L’instabilité du réseau est la norme, pas l’exception. Contrairement à la connexion haut débit stable à la maison, les réseaux mobiles fluctuent. Les actifs lourds tuent les temps de chargement.
C’est un parcours sur la corde raide. Vous coupez trop et le site semble cassé. Vous en gardez trop, et c’est comme si c’était à nouveau en 1998.
“Les sites Web mobiles sont intentionnellement plus simples que les sites complets, cela ne veut pas dire qu’ils sont faciles à créer.”
Il ne s’agit pas
Screen Real Estate dicte la conception
Cela se résume à des pouces carrés. Ou plutôt leur absence.
Même les plus grands écrans de smartphone, ceux qui dépassent 10,2 cm de diagonale, ressemblent à des timbres-poste à côté d’un écran de bureau. Les chiffres de résolution peuvent augmenter, mais la physique ne ment pas. Un nombre élevé de pixels sur un petit écran ne permet toujours pas d’afficher lisiblement un site Web complet. Vous finissez par pincer pour zoomer, combattant des dispositions à plusieurs colonnes qui transforment la navigation en un jeu de taupe.
Une bonne conception de sites Web mobiles ne consiste pas à réduire un site de bureau. Il s’agit de recommencer avec des mises en page sur une seule colonne.
Cela signifie tout condenser en un seul flux vertical. Vous réorganisez les liens de navigation. Vous enlevez les déchets décoratifs. Vous réduisez la colonne principale pour l’adapter à la largeur réelle du téléphone. La plupart des moniteurs sont de larges rectangles. Des téléphones ? Ce sont de grandes bandes. Bien sûr, vous pouvez faire pivoter l’appareil en mode paysage, mais l’expérience par défaut est le portrait. Concevez d’abord la bande étroite.
Ensuite, il y a le problème de la méthode de saisie.
Les navigateurs de bureau s’appuient sur la souris. Passez la souris sur un menu et une liste déroulante apparaît. Essayez ça avec un pouce. Ça ne marche pas. La conception Web mobile nécessite de repenser ces « états de survol de la souris ». Les menus doivent être exploités et non survolés. Les boutons doivent être suffisamment gros pour un doigt, pas pour un curseur précis. Si votre site repose sur des effets de survol, il est déjà en panne sur mobile.
Le cauchemar de la fragmentation des appareils
Construire pour le bureau est déjà assez difficile. Internet Explorer fait des crises, Firefox fait son travail et Chrome consomme toute la RAM. Mais mobile ? C’est une bête complètement différente.
La variété matérielle est stupéfiante. D’un côté, vous avez des téléphones « stupides » avec de minuscules écrans basse résolution et des navigateurs basiques. De l’autre, vous avez des smartphones dotés d’écrans tactiles nets et haute résolution et de processeurs puissants.
Une taille unique ne convient pas à tout le monde. Parfois, vous avez besoin d’interfaces distinctes.
Regardez Facebook. Il ne sert pas seulement le même code HTML à tout le monde. Il détecte l’appareil que vous utilisez. Si vous utilisez un iPhone ou Android, vous bénéficiez d’une expérience sur mesure optimisée pour cet écran et cette fonctionnalité de navigateur spécifiques. Si vous utilisez un téléphone polyvalent, vous obtenez une version plus légère.
Un seul site mobile ne suffit pas. Vous devez concevoir pour l’appareil, pas seulement pour le navigateur.
Cette logique de détection est le pont entre l’utilisateur et la bonne interface. C’est la technologie qui rend la conception possible.
Plus intelligent, pas plus simple
Simplifier l’interface ne signifie pas abrutir l’expérience. En fait, le mobile peut être plus puissant que le bureau pour des tâches spécifiques.
Les smartphones disposent d’un matériel qui manque aux PC. Caméras. GPS. Accéléromètres.
Les QR Codes en sont un parfait exemple. Pointez votre appareil photo sur un code et il lancera instantanément un site Web ou téléchargera une application. Pas de saisie d’URL. Aucune recherche. Scannez simplement et partez.
Les cartes sont liées aux données GPS pour vous donner des itinéraires en temps réel ou des recommandations de restaurants en fonction de votre position exacte. Il ne s’agit pas simplement d’un « site Web plus petit ». C’est un utilitaire différent.
La création d’un site mobile efficace nécessite une utilisation intelligente de cette technologie backend. Il ne s’agit pas seulement de CSS et de HTML. Il s’agit d’exploiter l’appareil lui-même. Le design et la technologie sont les deux faces d’une même médaille. Vous ne pouvez pas avoir l’un sans l’autre.
Regardons de plus près comment cette détection se produit. Comment Facebook sait-il que vous êtes sur un iPhone et non sur un vieux Nokia ?
Au service de l’expérience mobile : détection, sous-domaines et choix de l’utilisateur
Vous voyez les lignes épurées et le texte lisible. Cela a l’air simple. Sous le capot, c’est un gâchis d’ingénierie intelligente. La conception Web moderne s’appuie sur des feuilles de style en cascade ou CSS. Ce code dicte les polices, les couleurs, les marges et la largeur de la page. Le contenu réside dans une base de données ou des fichiers HTML. CSS décide de l’apparence de ce contenu.
Chaque modification de conception mentionnée précédemment se produit ici. Pour créer rapidement un site mobile, vous remplacez une image d’arrière-plan épaisse par une couleur unie. Cela économise de la bande passante. Cela accélère le chargement de la page.
Construire le site est la première étape. Amener les gens à l’utiliser est la deuxième étape. Il n’existe pas une seule bonne façon de créer un site mobile. Plusieurs options existent.
La méthode la plus simple est un lien. Vous l’avez mis sur le site complet. Il est écrit “Afficher le site mobile”. Les développeurs utilisent souvent un sous-domaine tel que « m.website.com ». C’est facile à analyser. « Website.com » accède à la version de bureau. m.website.com accède à la version mobile. Certains sites utilisent « i.website.com » à cause de l’iPhone. Le code fonctionne de la même manière.
Certains utilisateurs doivent saisir manuellement « m.website.com ». La plupart des sites automatisent ce processus.
Comment les sites Web mobiles détectent votre appareil
D’autres techniques sont plus complexes. De nombreux sites détectent automatiquement le type de votre appareil. Ils décident quel fichier CSS servir en fonction de votre matériel.
Cela se produit en interrogeant l’appareil. Le serveur vérifie les facteurs d’identification tels que la largeur de l’écran en pixels. Il lit la chaîne de l’agent utilisateur. Cette chaîne déclare quel navigateur charge la page.
Les requêtes multimédias sont des lignes de code CSS. Ils font référence à la chaîne de l’agent utilisateur. Ils sélectionnent des facteurs d’identification spécifiques. Si l’agent utilisateur s’identifie comme un navigateur mobile avec un écran étroit, le serveur charge la page mobile.
Cette méthode présente des défauts. Certains navigateurs vous permettent d’usurper l’agent utilisateur. Les nouveaux navigateurs publient constamment de nouvelles chaînes. Les serveurs envoient généralement le bon site au bon appareil. Mais ce n’est pas parfait.
Ce système d’identification s’inscrit dans une autre option. Donnez le choix à l’utilisateur. Accédez à IMDB.com sur un téléphone. Il charge automatiquement le site mobile. Il vous invite également à télécharger une application mobile. L’application offre plus de fonctionnalités.
Avantages et inconvénients des navigateurs mobiles
Les sites mobiles fonctionnent généralement mieux que les sites complets sur smartphones. Ils sont faits sur mesure pour les petits écrans. La « taille unique » fonctionne rarement.
Mais « mieux » est relatif. Les sites mobiles offrent une expérience limitée. Ils tiennent compte des limitations de l’appareil. La navigation disparaît souvent. Il n’y a pas assez d’espace sur l’écran pour garder les menus visibles à tout moment.
Interagir avec un site est la partie la plus difficile de la navigation mobile. Faire défiler un formulaire de saisie prend du temps. La sélection des champs est fastidieuse. Taper sur un téléphone est plus lent que sur un ordinateur. Les écrans tactiles et les claviers logiciels aggravent la situation.
Les navigateurs téléphoniques peuvent stocker des cookies. Ils se souviennent des mots de passe comme le font les navigateurs de bureau. Cela aide. Les navigateurs dotés d’équivalents de bureau comme Firefox pour Android et Opera Mobile peuvent synchroniser les données. Vous transférez vos données enregistrées depuis votre ordinateur. Cela simplifie la navigation sur les deux plateformes.
Les téléphones ont aussi des astuces. Pincer pour zoomer agrandit le texte. Appuyer pour zoomer adapte un paragraphe à la largeur de l’écran.
Pourquoi la vidéo Flash échoue sur les appareils mobiles
La vidéo Flash entre dans toutes les discussions sur la navigation mobile. C’est exigeant pour les processeurs. Cela épuise la durée de vie de la batterie. Cela s’est amélioré au fil des années. Cela fonctionne sur de nombreux appareils.
Cela ne fonctionne sur aucun appareil Apple.
Apple bloque la vidéo Flash sur iOS. Ils prennent plutôt en charge la vidéo HTML5. YouTube utilise la vidéo HTML5. De nombreux autres sites le font également.
Vous pouvez intégrer des vidéos Flash dans des pages Web mobiles. Cela va à l’encontre des principes de conception mobile. La simplicité est la plus grande force des sites mobiles. Ils se chargent rapidement car ils utilisent du texte et de petites images. Flash brise cela.
Mettre Flash sur votre site limite les utilisateurs d’iPhone. Ils ne peuvent pas interagir avec la page. Vous perdez une grande partie de votre audience.
Achats sur mobile : est-ce réellement plus sûr que sur ordinateur ?
Voici une tournure. Votre téléphone pourrait être l’endroit le plus sûr pour déposer votre carte de crédit.
La plupart des virus Web ciblent Windows. Ils ne fonctionnent pas sur iOS ou Android. Vous êtes essentiellement invisible pour une grande partie des logiciels malveillants simplement parce que vous n’êtes pas sur un PC. Les téléphones modernes prennent en charge le cryptage HTTPS et SSL, tout comme votre ordinateur portable.
Mais ne soyez pas arrogant.
Vous devez toujours surveiller la barre d’URL. Recherchez l’icône de verrouillage. Tenez-vous-en à des sites réputés. Si un site semble sommaire sur un ordinateur de bureau, il le sera sur un téléphone. Juste plus petit. Le paysage des menaces change, mais le principe demeure. Mieux vaut être prudent que désolé.
Conception de pages mobiles expliquée
Qu’est-ce qu’une conception de page mobile ?
Il ne s’agit pas simplement d’un site Web réduit. Il s’agit d’une optimisation spécifique pour les écrans tactiles et les fenêtres étroites. Pensez plus petit. Plus simple. Pas de désordre.
Les sites de bureau s’appuient sur des survols de souris et des clics précis. Le mobile repose sur les pouces. Cela change tout. Les boutons grossissent. Les menus sont masqués. Le contenu est priorisé. Si vous essayez de lire un paragraphe dense sur un écran de 6 pouces, vous combattez l’appareil. Une bonne conception mobile arrête ce combat avant qu’il ne commence.
Sites Web mobiles par rapport aux sites traditionnels
Les gens confondent tout le temps ces termes. Séparons-les.
Un site Web standard est conçu pour les ordinateurs de bureau. Claviers. Souris. De gros moniteurs. Cela suppose que vous ayez de la bande passante et de la patience.
Un site Web mobile est conçu pour les smartphones et les tablettes. Cela enlève la graisse. Les fonctionnalités qui ne fonctionnent pas sur les écrans tactiles sont supprimées. Les images se compressent. Les scripts s’éclaircissent.
La différence compte.
Pourquoi? Parce que les sites mobiles se chargent plus rapidement. Ils utilisent moins de données. Ce n’est pas seulement une commodité pour les utilisateurs Apple de Manhattan. C’est une nécessité pour les habitants des pays en développement où l’Internet haut débit est un luxe et non un utilitaire. Si votre site est lourd, ils ne peuvent pas le charger. Période.
Pourquoi la conception mobile est importante
Cela se résume à des frictions.
La navigation sur le bureau est efficace. La navigation mobile est pratique. Vous avez Internet dans votre poche. Mais taper sur un écran en verre est fastidieux.
Une bonne conception mobile fait disparaître cet ennui. Cela respecte votre temps. Il respecte votre forfait de données. Il respecte le fait que vous marchez probablement en l’utilisant.
La publicité fonctionne ici aussi. Mais des pop-ups géants ? Non, ceux-ci sont de toute façon interdits par la plupart des navigateurs mobiles. Google AdSense fait l’affaire. Petit. Non intrusif. Pertinent.
Le Web mobile n’est pas une version réduite du Web de bureau. C’est un animal différent. Traitez-le de cette façon.
