Mobile First Design: pourquoi c'est génial et pourquoi ça craint

Historiquement, la plupart des concepteurs Web et leurs clients ont d'abord abordé le côté bureau de tout projet, tout en laissant la partie mobile comme objectif secondaire qui sera accompli plus tard. Même avec l'essor du design réactif, beaucoup d'entre nous commencent par le site «en taille réelle» et descendent.

Il y a cependant une tendance croissante dans l'industrie à inverser ce flux de travail et à commencer par des considérations mobiles, puis à passer à une version de bureau plus grande.

Pourquoi aborderiez-vous un projet de cette façon? Quels sont les avantages et les inconvénients de cette stratégie? Continuez à lire pour le découvrir!

La conception Web mobile n'est pas une niche

Si vous avez toujours en tête que la conception Web mobile et le développement d'applications sont 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. Tu ne me crois pas? Voici quelques statistiques folles à considérer de Mobithinking:

• Il y a plus de 1, 2 milliard d'internautes mobiles dans le monde
• Aux États-Unis, 25% des utilisateurs Web mobiles sont uniquement 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 manière générale, plus de 85% des nouveaux combinés pouvant accéder au Web mobile

L'un des faits les plus puissants ici est le deuxième élément, ce qui montre que de nombreux utilisateurs ne verront probablement que la version mobile de votre site. C'est une révélation étonnante, n'est-ce pas?

Plus que jamais, le Web est quelque chose que nous portons dans nos poches, pas quelque chose qui traîne simplement près de notre bureau ou même dans nos maisons. Il s'agit d'une tendance mondiale qui ne continuera de croître que dans les années à venir. Es-tu prêt pour ça? Votre ensemble de compétences professionnelles inclut-il le développement Web pour toutes les plates-formes importantes ou uniquement l'arène de bureau?

Pourquoi Mobile First?

Il y a de fortes chances qu'aucune des personnes qui lisent ceci n'ait rien appris de nouveau jusqu'à présent. Les téléphones de 500 $ et plus dans les poches de tous ceux que vous connaissez sont tous des indications dont vous avez besoin que le Web soit sorti de sa boîte en forme d'ordinateur.

Cependant, le fait que l'accès au Web mobile soit populaire ne fait presque rien pour me convaincre que je dois poursuivre une stratégie qui donne la priorité au mobile. Le revers de la médaille de 25% des utilisateurs mobiles est que 75% d'entre eux ne le sont pas! Le bureau est toujours un support important, à ne pas oublier ou à mettre en veilleuse tout de suite. Alors, pourquoi envisageons-nous même de prendre la voie du mobile first?

L'un des principaux catalyseurs de l'essor de la conception de sites Web destinés aux mobiles 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 chacun d'entre nous de faire du mobile la réponse à presque tout »(source). Pourquoi ce changement radical d'approche?

Dégradation gracieuse vs amélioration progressive

Ce sont des mots à la mode majeurs d'il y a quelques années qui peuvent encore donner beaucoup de perspicacité dans la notion de conception de sites Web pour mobile et pourquoi c'est un concept important à considérer.

La dégradation gracieuse est née du besoin d'avoir une fonction de conception sur autant de navigateurs et de plateformes que possible. Les concepteurs et les développeurs voulaient profiter des nouvelles technologies sans exclure les utilisateurs dont les configurations 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 Web mobile, cela signifiait qu'un site Web standard complet réduirait et supprimerait progressivement le contenu et les fonctionnalités à mesure que la fenêtre devenait plus petite et le système plus simple (pas de prise en charge Flash, etc.).

De cette tendance est née une nouvelle idée puissante: l'amélioration progressive. Dans cette version du conte, vous mettez votre meilleur pied en avant sur la plate-forme mobile, offrant aux utilisateurs un espace d'écran minimal, une puissance de traitement et des plugins tiers une expérience incroyable qui à la fois a fière allure et fonctionne parfaitement. Au fur et à mesure des besoins, le site peut être progressivement «amélioré» et même complètement repensé pour des plateformes plus grandes avec moins de contraintes.

Pourquoi l'amélioration progressive progresse

En un coup d'œil, ces deux méthodologies semblent à peu près équivalentes. Peu importe où vous commencez le processus de conception tant qu'il est fait, non?

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 exploite de nombreuses technologies de pointe, mais vous vous rendez compte qu'aucune de ces technologies ne s'adapte bien au mobile. Cela peut conduire à des produits mobiles fortement dilués qui ressemblent plus à une réflexion après coup qu'à un produit fini et poli. Cela se produit-il avec chaque projet? Peut-être pas, mais l'histoire est probablement beaucoup plus courante que vous ne le pensez.

Si nous examinons le flux de travail d'amélioration progressive, le résultat a tendance à être une histoire différente. Ici, nous commençons avec un projet à la fois super allégé et assez impressionnant. Vous avez pris toute cette énergie de départ et l'avez investie dans la création d'un produit qui ressemble et fonctionne bien malgré les nombreuses contraintes auxquelles vous avez été confronté.

Plus important encore, vous avez déjà traversé le problème de la réduction du contenu à ses éléments les plus vitaux. Maintenant, quand il est temps d'apporter cette conception sur le bureau, au lieu de faire face à la décision de quoi couper et comment édulcorer votre produit, vous devez plutôt décider comment le rendre encore plus robuste!

Contenu Web: mieux servi de manière sélective

L'argument ci-dessus vous vient d'un point de vue purement philosophique avec la conclusion ultime étant que le résultat a tendance à être meilleur si une approche mobile-first est adoptée. Si vous voulez un argument avec une substance un peu plus observable, ne cherchez pas plus loin que la façon dont vous servez votre contenu.

Si nous adoptons 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. À partir 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 est cependant qu'il était déjà chargé, que la plate-forme donnée en ait besoin ou non. Nous nous retrouvons à fournir plus de contenu que nécessaire sur la plate-forme qui est souvent associée aux vitesses de téléchargement les plus lentes. Vous voyez quelque chose de mal à cela?

Avec un point de vue mobile d'abord, nous commençons par charger l'essentiel absolu sur les plates-formes plus petites. Cela conduit à une expérience plus vive qui évite les retards inutiles. Les ressources supplémentaires sont chargées strictement selon les besoins sur les plates-formes qui peuvent les gérer correctement.

Qu'en est-il de la conception réactive?

Comment tout cela s'inscrit-il dans le design réactif, l'autre tendance qui envahit le Web? La bonne nouvelle est que ces deux stratégies ne sont pas compétitives. On pourrait dire qu'ils ont été faits l'un pour l'autre.

La conception réactive est construite autour du concept de requêtes multimédias qui ciblent des appareils spécifiques et des tailles de fenêtre d'affichage. Dans cet esprit, vous pouvez coder votre CSS initial en fonction d'une perspective mobile, puis utiliser des requêtes multimédias pour proposer sélectivement un style supplémentaire à mesure que la taille de la fenêtre d'affichage augmente.

C'est probablement l'opposé de la méthode que vous adoptez généralement avec la conception réactive: commencez grand puis réduisez. Compte tenu des arguments ci-dessus cependant, il y a beaucoup de logique derrière la structuration de vos requêtes multimédias de petite à grande.

The Big Fat Downside

Hourra pour la conception web pour mobile. C'est la meilleure chose à faire sur le Web depuis The Oatmeal. Alors pourquoi je ne suis pas excité à ce sujet? Pourquoi, même si j'excuse sur la conception réactive, ai-je souvent carrément évité le sujet de la conception Web pour mobile?

Tout de suite, je suis confronté à un écran plus petit, à moins de ressources et à beaucoup plus de maux de tête.

La réponse est simple: ce n'est ni amusant ni facile. Bien sûr, la conception réactive est délicate, mais elle me permet de fléchir mes muscles de mise en page et de tirer parti de nombreuses fonctionnalités de navigateur intégrées pour effectuer des exploits sympas. Un design réactif rend mon coffre à jouets plus grand, pas plus petit.

Avec la conception mobile d'abord, je suis frappé par la tête avec des contraintes sur la première étape. Ce n'est pas amusant du tout! Tout de suite, je suis confronté à un écran plus petit, à moins de ressources et à beaucoup plus de maux de tête. De plus, ce n'est tout simplement pas le territoire confortable. J'ai passé la majeure partie de ma carrière en conception de sites Web dans l'espace de bureau, à créer 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 fort.

Plus important encore, d'un point de vue strict du design, je trouve très difficile de plonger dans un design si je commence par le mobile et que je monte. 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. Dans la catégorie «pour», nous avons des arguments simples et logiques difficiles à minimiser. Dans la catégorie «contre», j'ai beaucoup de gémissements et d'hésitations personnelles. De quel côté pensez-vous gagne cette bataille?

Je dois abandonner un peu de confort au nom d'être un meilleur designer.

Peut-être avez-vous 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 concurrent le plus fort.

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 de concevoir pour le mobile d'abord, c'est bien, cela signifie que j'ai de la place pour grandir et des techniques à apprendre.

En fin de compte, si mes raisons d'adopter une approche axée sur le mobile sont centrées sur l'utilisateur et que mes raisons s'y opposent sont personnelles, alors je dois renoncer à un peu de confort au nom d'être un meilleur concepteur.

Qu'est-ce qui vous retient?

Vous savez maintenant à quel point la conception Web pour mobile est excellente pour vos utilisateurs. Vous savez que les grandes entreprises comme Google adoptent cette approche et vous pouvez voir les avantages d'un flux de travail axé sur les mobiles. Alors qu'est-ce qui vous retient?

Partagez-vous mon point de vue que le mobile-first est une stratégie difficile à mettre en œuvre et convenez que vous avez juste besoin de faire le saut? Ou y a-t-il quelque chose de plus substantiel qui vous retient?