La conception pour les appareils mobiles conduit d’abord à des solutions web plus efficaces sur le plan énergétique et plus conviviales.

Nous avons tous fait l’expérience de visiter un site web sur nos téléphones pour obtenir des informations comme les horaires d’un magasin et un numéro de téléphone, et de trouver ces informations difficiles à localiser ou à cliquer depuis un téléphone portable. Ou peut-être avez-vous fait l’expérience inverse : vous avez visité un site web depuis votre téléphone en allant au cinéma, par exemple, et vous avez pu accéder rapidement et facilement aux horaires des films et aux informations sur les parkings.

Qu’est-ce qui rend une expérience d’utilisateur mobile unique ?

Comme 17,4 % des utilisateurs mondiaux accèdent désormais au web par le biais du mobile, de plus en plus de concepteurs considèrent que l’expérience mobile est fondamentalement différente de celle du bureau. Par exemple, un client de United Airlines qui navigue à partir d’un téléphone a la possibilité de s’enregistrer ou d’obtenir le statut d’un vol, car on suppose que ce sont les tâches les plus importantes qu’un voyageur pourrait vouloir accomplir en déplacement. D’autre part, l’expérience de United.com en matière de bureau est axée sur la navigation et la réservation de vols – des activités qu’une personne peut souhaiter effectuer avant de partir en voyage. Les concepteurs répondent aux différents besoins des clients sur les appareils mobiles, les tablettes et les ordinateurs portables ou de bureau en planifiant ces expériences utilisateur au début du processus de conception plutôt qu’à la fin.

C’est l’idée qui sous-tend une stratégie de conception axée sur le mobile d’abord, et elle représente un changement de paradigme dans la façon dont nous concevons les sites web. L’expérience utilisateur sur une tablette ou un téléphone n’est plus une pensée après coup. Nous restructurons l’expérience mobile, en nous demandant quelles informations sont les plus essentielles dans un contexte mobile, et ce qui peut être laissé de côté de cette expérience, ou développé dans une version du site adaptée au bureau.

En quoi la conception de Mobile First est-elle plus durable ?

Pourquoi une stratégie « Mobile First » permet-elle d’obtenir un site web plus durable ? Pour dire les choses simplement, elle oblige le propriétaire du site web à se demander quels sont les contenus et les transactions les plus essentiels pour une expérience mobile. Lorsque le contenu et les transactions sont bien hiérarchisés, le client charge moins de pages, ce qui lui permet de consommer moins d’énergie. Si l’on tient compte de la conception visuelle, de la taille des photos et des graphiques pour une expérience mobile, les pages mobiles se chargeront plus rapidement tout en utilisant moins de bande passante, ce qui se traduira également par des économies d’énergie.

L’encadrement des premiers sites web mobiles

L’encadrement dans le contexte d’un quart de la taille typique d’un écran de téléphone portable avec un espace limité pour travailler, oblige le concepteur et le propriétaire de l’entreprise à travailler en étroite collaboration pour développer un consensus précoce sur le contenu et les appels à l’action qui sont les plus essentiels dans la conception. Cela peut également être utile pour la conception d’écrans plus grands.

Tout est dans le contexte du client

Concevoir en utilisant une première approche mobile nécessite un processus réfléchi et intentionnel. Voici quelques-unes des questions que vous pourriez vous poser lors de la création d’un design de mobile first :

Où mon client est-il susceptible d’utiliser mon site web ?

• Dans un cinéma
• Dans une épicerie
• Dans un train, utiliser une connexion internet peu performante
• Au cabinet d’un médecin

Quelles actions ou transactions un utilisateur mobile doit-il effectuer ?

Acheter un billet de cinéma

• Vérifier si un article est en stock dans un magasin particulier
• Sortez une carte de fidélité qui peut être scannée par un caissier
• Faire un don après avoir reçu un appel par courrier électronique pour faire un don, sans que la transaction ne soit interrompue par une connexion irrégulière
• Ajouter un rendez-vous de suivi médical à un calendrier

Quelles sont les informations ou les éléments essentiels pour un client utilisant un téléphone portable dans ce contexte ?

• Trouver les horaires des films
• Obtenir des informations sur le stationnement ou les transports publics
• Comparaison des prix
• Obtenir la confirmation que le don a réussi
• Trouver les heures d’ouverture du cabinet du médecin

Quelles sont les informations supplémentaires qui pourraient être fournies dans une version du site pour ordinateur de bureau ou portable et qui ne seraient pas aussi pertinentes dans un contexte mobile ?

• Bandes-annonces de films
• Critiques de films
• Biographie des médecins
• Critiques de produits
• Informations sur la recherche d’emploi

Contraintes de la conception mobile

Le mobile s’accompagne d’un ensemble de contraintes naturelles qui comprennent des écrans et des claviers de petite taille, des connexions sans fil inégales et des utilisateurs distraits et impatients. Selon Kissmetrics, soixante-treize pour cent des utilisateurs de l’internet mobile disent avoir rencontré un site web qui se chargeait trop lentement, ce qui les rendait impatients et les poussait à quitter le site. Lorsque les concepteurs créent des sites pour ces clients impatients, nous adoptons la philosophie de Léonard de Vinci, adoptée plus tard par Steve Jobs et Apple, selon laquelle « la simplicité est la sophistication ultime ».

Conseils aux développeurs

Les éléments consommateurs d’énergie tels que les grands carrousels d’images, les plugins de médias sociaux et les menus de navigation complexes détournent l’attention du contenu principal tout en augmentant la consommation d’énergie. Selon James Christie, un carrousel typique de cinq images de 600 x 400 pixels ajoute environ 750 Ko à 1 Mo de bande passante utilisée par page. Avec une solide stratégie de contenu pour les clients utilisant des appareils mobiles en place, un développeur peut commencer à écrire du HTML5 bien structuré pour le site avec une grande clarté.

Pour économiser de l’énergie lors du codage d’un site web, commencez par les vues mobiles et ajoutez progressivement des styles pour les écrans plus grands, comme un moniteur de bureau haute résolution. Avec le CSS, cela signifie qu’il faut écrire les styles par défaut pour les sites web dotés de petites fenêtres d’affichage, puis utiliser les requêtes média pour ajouter des styles au fur et à mesure que la fenêtre d’affichage s’agrandit. (C’est l’inverse de l’approche habituelle, où les requêtes de médias se trouvent à la fin de votre feuille de style). Selon le concepteur de sites web et éducateur Shay Howe, la philosophie qui sous-tend cette approche est qu’un client utilisant un navigateur mobile ne devrait pas avoir à charger les styles pour un navigateur de bureau pour les voir écrasés par des styles mobiles plus tard. (Pour un aperçu des premiers styles pour mobiles, voir le guide de Shay, ou celui de Brad Frost à HTML5Rocks).

Rendez votre site web plus vert !