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 à atteindre ultérieurement. Même avec la montée en puissance du design réactif, nous sommes nombreux à commencer par la "taille réelle". site et travailler notre chemin vers le bas.
Il existe toutefois une tendance croissante dans l'industrie à inverser ce flux de travail et à commencer par les considérations relatives au mobile, puis à passer à une version de bureau plus grande. Pourquoi voudriez-vous jamais aborder un projet de cette façon? Quels sont les avantages et les inconvénients de cette stratégie? Continuez à lire pour le découvrir!
Cet article fait partie de notre série intitulée "Au-delà de la conception de bureau", qui vous est proposée en partenariat avec Heart Internet VPS.
Le Web mobile n'est pas un créneau
Si vous avez toujours à l’esprit que la conception Web mobile et le développement d’applications sont un secteur 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. Ne me crois pas? Voici quelques statistiques loufoques à prendre en compte dans Mobithinking du mois dernier.
- Il ya plus de 1,2 milliard utilisateurs Web mobiles dans le monde entier
- Aux États-Unis, 25% des utilisateurs du Web mobile 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 sont en augmentation constante avec plus de 85% des nouveaux combinés capables d'accéder au Web mobile
L'un des faits les plus importants ici est le deuxième élément, qui montre 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 portons dans nos poches, pas quelque chose qui traîne simplement près de notre bureau ou même dans nos maisons. C’est une tendance mondiale qui ne fera que continuer à croître 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 peu de chances que les lecteurs de cet article aient appris quelque chose de nouveau jusqu'à présent. Les téléphones à 200 $ et plus dans les poches de toutes les personnes que vous connaissez sont tout ce dont vous avez besoin pour indiquer que le Web est sorti de son boîtier en forme d’ordinateur.
Cependant, le fait que l’accès au Web mobile soit populaire ne me convainc presque pas que je dois poursuivre une stratégie qui donne la priorité au mobile. Le revers de 25% des utilisateurs mobiles étant uniquement mobiles, c'est que 75% d'entre eux ne le sont pas! De toute évidence, le bureau est toujours un support important, à ne pas oublier pour le moment. Alors, pourquoi envisageons-nous même de prendre le premier itinéraire mobile?
L’un des principaux catalyseurs de la montée en puissance de la première conception Web mobile a été l’annonce faite par Eric Schmidt en 2010 que Google adopterait désormais cette approche, allant jusqu’à dire? Je pense que c’est maintenant le projet commun de tous. de nous pour rendre mobile la réponse à peu près tout? (la source). Pourquoi ce changement radical d'approche?
Dégradation gracieuse vs amélioration progressive
Ce sont quelques mots à la mode importants datant d’il ya quelques années qui peuvent encore apporter une bonne idée de la notion de première conception Web mobile et expliquer pourquoi il s’agit d’un concept important à prendre en compte.
La dégradation progressive est née de la nécessité de disposer d'une fonction de conception sur autant de navigateurs et de plateformes que possible. Les concepteurs et les développeurs souhaitaient tirer parti des nouvelles technologies sans exclure les utilisateurs disposant de configurations non prises en charge. La conclusion générale était de créer et de servir la meilleure expérience possible, puis de prendre en compte chaque dégradation possible et de garantir que, malgré toutes les lacunes, le site resterait fonctionnel.
En termes de conception de sites Web mobiles, cela signifiait qu'un site Web complet et standard se réduirait et supprimerait progressivement le contenu et les fonctionnalités à mesure que la fenêtre d'affichage devenait plus petite et que le système devenait plus simple (pas de support Flash, etc.).
De cette tendance est née une nouvelle idée puissante: l’amélioration progressive. Dans cette version du conte, vous offrez votre meilleur pied sur la plate-forme mobile, offrant aux utilisateurs un minimum d’écran, une puissance de traitement et des plugins tiers, une expérience incroyable à la fois esthétique et fonctionnelle. Selon les besoins, le site peut être progressivement amélioré. et même complètement repensé pour les grandes plates-formes avec moins de contraintes.
Pourquoi l'amélioration progressive gagne
En un coup d'œil, ces deux méthodologies semblent à peu près équivalentes. Qui se soucie de l'endroit où vous commencez le processus de conception tant que c'est fait, non?
La réalité de la situation est cependant un peu plus complexe. Lorsque vous démarrez avec la plate-forme de bureau, vous avez tendance à vouloir tirer parti de tout ce que cette plate-forme peut offrir. Vous construisez un produit étonnant qui exploite de nombreuses technologies de pointe, mais vous réalisez qu’aucune de ces technologies ne se réduit au mobile. Cela peut conduire à des produits mobiles très dilués qui ressemblent davantage à une réflexion après coup qu'à un produit fini poli. Cela se produit-il avec chaque projet? Peut-être pas, mais l'histoire est probablement beaucoup plus commune que ce que vous voudriez croire.
Si nous examinons le flux de travail de l'amélioration progressive, le résultat tend à être différent. Nous commençons ici avec un projet à la fois très maigre et assez impressionnant. Vous avez utilisé toute cette énergie de départ pour créer un produit esthétique et qui fonctionne bien, malgré les nombreuses contraintes auxquelles vous faites face.
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 de mettre ce design sur le bureau, au lieu de décider quoi couper ou comment diluer votre produit, vous devez plutôt décider comment le rendre encore plus robuste!
Contenu Web: Meilleur service sélectif
L'argument ci-dessus vient d'un point de vue purement philosophique, la conclusion finale étant que le résultat final tend être mieux si une première approche mobile est prise. Si vous voulez une dispute avec un peu plus de substance observable derrière elle, ne cherchez pas plus loin que la manière dont vous diffusez 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 sur ce qui est supposé être la plus grande plate-forme. À partir de là, les versions mobiles sont comptabilisées et ignorent ou suppriment une grande partie de ce contenu de la page. Le problème cependant est qu’il était déjà chargé de savoir si la plate-forme donnée en avait besoin ou non. Nous nous retrouvons avec plus de contenu que nécessaire sur la plate-forme souvent associée aux vitesses de téléchargement les plus lentes. Vous voyez quelque chose qui ne va pas avec ça?
Avec un premier point de vue mobile, nous commençons par charger l'essentiel absolu sur des plates-formes plus petites. Cela conduit à une expérience plus vivante qui évite les retards inutiles. Les ressources supplémentaires sont chargées strictement, selon les besoins, sur des plates-formes capables de les gérer correctement.
Qu'en est-il de la conception sensible?
Comment cela s'intègre-t-il dans le responsive design, l'autre tendance qui s'empare du Web? La bonne nouvelle est que ces deux stratégies ne sont pas compétitives. En fait, vous pourriez dire qu'ils étaient faits l'un pour l'autre.
Responsive design est construit autour du concept de requêtes multimédia qui ciblent des périphériques et des tailles de fenêtres d'affichage spécifiques. En gardant cela à l'esprit, vous pouvez coder votre code CSS initial dans une perspective mobile, puis utiliser des requêtes multimédia pour diffuser sélectivement un style supplémentaire à 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 une conception réactive: commencez gros, puis réduisez. Compte tenu des arguments ci-dessus, il y a évidemment beaucoup de logique derrière la structuration de vos requêtes multimédias.
Le gros inconvénient
Hourra pour la première conception web mobile. C'est évidemment la meilleure chose à faire sur le Web depuis The Oatmeal. Alors pourquoi ne suis-je pas excité à ce sujet? Pourquoi, alors même que je me jette à terre dans le design réactif, ai-je souvent souvent carrément évité le sujet du premier design Web mobile?
La réponse ici est simple: ce n'est ni amusant ni facile. Bien sûr, le design réactif est délicat, mais il me permet de vraiment faire jouer mes techniques de mise en page et de tirer parti des nombreuses fonctionnalités du navigateur intégré pour réaliser des performances fantastiques. La conception réactive rend mon coffre à jouets plus grand, pas plus petit.
Avec la première conception mobile cependant, je suis frappé de plein fouet 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 de maux de tête. De plus, ce n'est tout simplement pas un territoire confortable. J'ai passé la majeure partie de ma carrière dans la conception de sites Web sur le bureau, à créer des expériences autour du survol de la souris et des clics, et non des tapotements. J'ai fait beaucoup de travail mobile mais je ne l'appellerais pas mon point fort.
Plus important encore, du point de vue du design strict, il m'est très difficile de vraiment plonger dans un design si je commence par le mobile et que je gravis les échelons. Je l'ai mentionné dans un article récent à beaucoup de? Huzzahs? dans les commentaires et ont même entendu des professionnels de l'industrie chanter un air similaire.
Relever le défi
Regardons un peu plus loin mes arguments pour et contre une première approche de conception mobile. Dans le? Pour? catégorie, nous avons des arguments simples et logiques difficiles à minimiser. Dans le "contre" catégorie j’ai beaucoup de gémissements et d’hésitations personnelles. Selon vous, quel camp gagne cette bataille?
Vous avez peut-être de meilleurs arguments que moi en ce qui concerne la protection anti-mobile d'abord, mais si je considère cela d'un point de vue objectif, il est évident que l'approche mobile d'abord est le concurrent le plus puissant.
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 avec la conception de mobile d'abord, c'est bon, cela signifie que j'ai de la place pour grandir et des techniques pour apprendre.
En fin de compte, si mes raisons pour adopter une approche mobile d'abord sont centrées sur l'utilisateur et que mes raisons contre cette approche sont personnelles, je dois alors renoncer à un peu de confort au nom du fait d'être un meilleur concepteur.
Qu'est-ce qui vous retient?
Vous savez maintenant à quel point le premier design Web mobile est formidable pour vos utilisateurs. Vous savez que de grandes entreprises telles que Google adoptent cette approche et vous pouvez clairement voir les avantages d'un premier flux de travail sur mobile. Alors qu'est-ce qui vous retient?
Partagez-vous mon point de vue personnel sur le fait que le mobile d’abord est une stratégie difficile à mettre en œuvre et convenez que vous avez juste besoin de vous incarner (ou d’être une femme si vous préférez) et de faire le saut? Ou y a-t-il quelque chose de plus substantiel qui vous retient? Laissez un commentaire ci-dessous et laissez-nous savoir!
Images via BigStock: Reno Martin, Yellowj et PixelsAway.