Historiquement, la plupart des concepteurs Web et leurs clients ont d’abord abordé le côté bureau de n’importe quel projet, tout en laissant la partie mobile comme un objectif secondaire qui se réalise plus tard. Même avec la montée en puissance du design réactif, beaucoup d’entre nous commencent par le site « grandeur nature » et s’orientent vers le bas.
Il y a une tendance croissante dans l’industrie à renverser ce flux de travail et à commencer par des considérations mobiles pour ensuite passer à une version de bureau plus grande.
Pourquoi aborder un projet de cette façon ? Quels sont les avantages et les inconvénients de cette stratégie ? Lisez la suite pour le savoir !
La conception Web mobile n’est pas une niche
Si vous avez encore en tête que la conception et le développement d’applications web mobiles est une industrie de niche, vous devez changer votre façon de penser. Le mobile n’est pas une tendance, ni même l’avenir, c’est le présent. Vous ne me croyez pas ? Voici quelques statistiques folles à prendre en compte de la part de Mobithinking :
- Il y a plus de 1,2 milliard d’internautes mobiles dans le monde.
- Aux États-Unis, 25 % des utilisateurs du Web mobile sont exclusivement mobiles (ils utilisent rarement un ordinateur de bureau pour accéder au Web).
- Les applications mobiles ont été téléchargées 10,9 milliards de fois
- Les ventes d’appareils mobiles augmentent de façon générale, plus de 85 % des nouveaux appareils pouvant accéder au Web mobile.
L’un des faits les plus puissants ici est le deuxième élément, qui met en lumière que de nombreux utilisateurs ne verront probablement jamais que la version mobile de votre site. C’est une révélation stupéfiante, n’est-ce pas ?
Plus que jamais, le Web est quelque chose que nous avons dans nos poches, et non quelque chose qui traîne près de notre bureau ou même dans nos maisons. Il s’agit d’une tendance mondiale qui ne fera que croître dans les années à venir. Tu es prêt pour ça ? Vos compétences professionnelles comprennent-elles le développement Web pour toutes les plates-formes importantes ou seulement pour l’arène du bureau ?
Pourquoi Mobile First ?
Il y a fort à parier qu’aucun des lecteurs n’a rien appris de nouveau jusqu’à présent. Les téléphones à plus de 500 $ dans les poches de toutes les personnes que vous connaissez sont tous les indices dont vous avez besoin pour savoir que la toile est sortie de sa boîte en forme d’ordinateur.
Cependant, le fait que l’accès au Web mobile soit populaire ne me convainc presque rien pour me convaincre que je dois poursuivre une stratégie qui place le mobile en premier. Le revers de la médaille, c’est que 25% des utilisateurs mobiles ne sont que mobiles, 75% d’entre eux ne le sont pas ! Le bureau reste un support important, à ne pas oublier et à ne pas mettre en veilleuse pour l’instant. Alors pourquoi est-ce qu’on envisage de prendre la route du mobile d’abord ?
L’un des principaux catalyseurs de la montée en puissance du design web mobile a été l’annonce par Eric Schmidt en 2010 que Google allait désormais adopter cette approche, allant jusqu’à dire « Je pense que c’est maintenant le projet commun de nous tous de faire du mobile la réponse à presque tout » (source). Pourquoi ce changement radical d’approche ?
Dégradation gracieuse par rapport à l’amélioration progressive
Ce sont quelques mots à la mode importants d’il y a quelques années qui peuvent encore donner un bon aperçu de la notion de design web mobile d’abord et pourquoi c’est un concept important à considérer.
Une dégradation gracieuse est née de la nécessité d’avoir une fonction de conception sur autant de navigateurs et de plates-formes que possible. Les concepteurs et les développeurs voulaient profiter des nouvelles technologies sans exclure les utilisateurs dont les installations n’étaient pas prises en charge. La conclusion générale était de créer et de servir la meilleure expérience possible, puis de tenir compte de chaque dégradation possible et de s’assurer qu’en dépit de toute lacune, le site resterait fonctionnel.
En termes de conception de sites Web mobiles, cela signifiait qu’un site Web standard complet réduirait et supprimerait progressivement le contenu et les fonctionnalités à mesure que la fenêtre d’affichage rapetissait et que le système devenait plus simple (aucun support Flash, etc.).
De cette tendance est née une nouvelle idée puissante : l’amélioration progressive. Dans cette version de l’histoire, vous mettez votre meilleur pied en avant sur la plate-forme mobile, fournissant aux utilisateurs un minimum de surface d’écran, de puissance de traitement et de plugins tiers une expérience étonnante qui à la fois est superbe et fonctionne parfaitement. Au fur et à mesure des besoins, le site peut être progressivement » enrichi » et même complètement repensé pour de plus grandes plateformes avec moins de contraintes.
Pourquoi l’amélioration progressive l’emporte ?
À première vue, ces deux méthodes semblent à peu près équivalentes. Qui se soucie où vous commencez le processus de conception tant qu’il est fait, n’est-ce pas ?
La réalité de la situation est cependant un peu plus complexe. Lorsque vous commencez avec la plate-forme de bureau, vous avez tendance à vouloir profiter de tout ce que la plate-forme a à offrir. Vous construisez un produit étonnant qui tire parti d’une foule de technologies de pointe, mais vous vous rendez compte qu’aucune d’entre elles ne s’adapte bien à la mobilité. Cela peut conduire et mène effectivement à des produits mobiles sévèrement édulcorés qui ressemblent plus à une réflexion après coup qu’à un produit fini et poli. Est-ce que cela se produit pour chaque projet ? Peut-être pas, mais l’histoire est probablement beaucoup plus commune que vous ne voudriez le croire.
Si nous examinons le déroulement progressif du travail d’amélioration, le résultat a tendance à être une autre histoire. Nous commençons ici avec un projet qui est à la fois très maigre et très impressionnant. Vous avez pris toute cette énergie de départ et l’avez mise dans la création d’un produit qui a l’air et fonctionne bien malgré les nombreuses contraintes auxquelles vous avez dû faire face.
Plus important encore, vous êtes déjà passé par le problème de la réduction du contenu à ses éléments les plus vitaux. Maintenant, lorsqu’il est temps de mettre ce design sur le bureau, au lieu d’avoir à décider quoi couper et comment diluer votre produit, c’est à vous de décider comment le rendre encore plus robuste !
Contenu Web : Mieux servis sélectivement
L’argument ci-dessus s’adresse à vous d’un point de vue purement philosophique, la conclusion finale étant que le résultat tend à être meilleur si l’on adopte une approche mobile d’abord. Si vous voulez un argument avec un peu plus de substance observable derrière lui, ne cherchez pas plus loin que la façon dont vous servez votre contenu.
Si nous prenons le point de vue de la dégradation gracieuse, tout le contenu (texte, images, vidéo, audio, etc.) est servi en même temps à ce qui est supposé être la plus grande plate-forme. D’ici, les versions mobiles sont prises en compte qui ignorent ou suppriment simplement une grande partie de ce contenu de la page. Le problème cependant est qu’il était déjà chargé dans le fait de savoir si la plate-forme donnée en avait besoin ou non. Nous nous retrouvons à offrir plus de contenu qu’il n’est nécessaire sur la plate-forme qui est souvent associée aux vitesses de téléchargement les plus lentes. Tu vois quelque chose de mal à ça ?
Avec un premier point de vue mobile, nous commençons par charger l’essentiel absolu sur les plates-formes plus petites. Il en résulte une expérience plus vivante qui permet d’éviter les retards inutiles. Les ressources supplémentaires sont chargées strictement en fonction des besoins sur des plates-formes qui peuvent bien les gérer.
Qu’en est-il de la conception réactive ?
Comment tout cela s’intègre-t-il dans le design réactif, l’autre tendance qui prend le dessus sur le web ? La bonne nouvelle, c’est que ces deux stratégies ne sont pas concurrentielles. On pourrait dire qu’ils sont faits l’un pour l’autre.
La conception réactive s’articule autour du concept de requêtes média qui ciblent des périphériques et des tailles de fenêtres spécifiques. Dans cette optique, vous pouvez coder votre CSS initial dans une perspective mobile, puis utiliser les requêtes multimédias pour servir sélectivement des styles supplémentaires au fur et à mesure que la taille de la fenêtre d’affichage augmente.
C’est probablement le contraire de la méthode que vous utilisez habituellement avec un design réactif : commencez en grand et réduisez ensuite. Compte tenu des arguments ci-dessus, il y a beaucoup de logique derrière la structuration de vos requêtes médias, des plus petites aux plus grandes.
Le gros inconvénient du surplus
Hourra pour le premier web design mobile. C’est la meilleure chose sur le web depuis The Oatmeal. Alors pourquoi ne suis-je pas excité à ce sujet ? Pourquoi, même si j’adore le design réactif, ai-je souvent carrément évité le sujet du design web mobile d’abord ?
La réponse est simple : ce n’est ni amusant ni facile. Certes, la conception réactive est délicate, mais elle me permet de faire jouer mes muscles de mise en page et d’exploiter de nombreuses fonctionnalités intégrées du navigateur pour réaliser des exploits intéressants. Le design réactif rend ma boîte à jouets plus grande, pas plus petite.
Mais avec le design mobile d’abord, je suis frappé au dessus de la tête avec des contraintes à la première étape. Ce n’est pas drôle du tout ! Tout de suite, je me retrouve avec un écran plus petit, moins de ressources et beaucoup plus de maux de tête. De plus, ce n’est pas le territoire confortable. J’ai passé la majeure partie de ma carrière de webdesigner dans l’espace de bureau, en construisant des expériences autour des survols et des clics de souris, pas du bout des doigts. J’ai fait beaucoup de travail mobile, mais je n’appellerais pas ça mon point fort.
Plus important encore, du point de vue du design, il m’est très difficile de me plonger dans un design si je commence avec un mobile et que je m’oriente vers le haut. J’ai mentionné cela dans un article récent à de nombreux « huzzahs » dans les commentaires et j’ai même entendu des professionnels de l’industrie de premier plan chanter un air similaire.
Relever le défi
Examinons une seconde mes arguments pour et contre une approche de conception axée sur le mobile d’abord. Dans la catégorie « pour », nous avons des arguments simples et logiques qu’il est difficile de minimiser. Dans la catégorie « contre », j’ai beaucoup de plaintes et d’hésitations personnelles. Quel camp pensez-vous gagner cette bataille ?
Je dois renoncer à un peu de confort au nom d’être un meilleur designer.
Vous avez peut-être de meilleurs arguments anti-mobile first que moi, mais si je regarde cela d’un point de vue objectif, il est évident que l’approche mobile first est le plus fort concurrent.
Cela signifie que j’ai probablement besoin de me dépasser et de relever le défi de commencer des projets avec un point de vue mobile. Si je ne suis pas à l’aise pour concevoir d’abord pour le mobile, tant mieux, cela signifie que j’ai de l’espace pour grandir et des techniques pour apprendre.
En fin de compte, si mes raisons d’adopter une approche mobile first sont centrées sur l’utilisateur et mes raisons contre sont personnelles, alors je dois abandonner un peu de confort au nom d’être un meilleur designer.
Qu’est-ce qui vous retient ?
Vous savez maintenant à quel point la conception de sites Web mobile first est formidable pour vos utilisateurs. Vous savez que de grandes entreprises comme Google adoptent cette approche et vous pouvez voir les avantages d’un premier flux de travail mobile. Alors, qu’est-ce qui te retient ?
Partagez-vous mon point de vue selon lequel le mobile first est une stratégie difficile à mettre en œuvre et convenez-vous que vous n’avez qu’à faire le saut ? Ou y a-t-il quelque chose de plus substantiel qui vous retient ?
