Vues d'initiés sur le design réactif: le débat se poursuit
Depuis Coke vs Pepsi, il n’ya pas eu un tel débat et une intense controverse sur un sujet particulier. Les blogs sur la technologie et le design à travers le Web débattent de la conception adaptative par rapport aux sites mobiles, en argumentant sur la solution la mieux adaptée à l'expérience mobile.
Ne pouvons-nous pas tous être d'accord? Non, pas dans cette vie, surtout pour un sujet aussi controversé que celui-ci. Étant donné le grand nombre de développeurs et de concepteurs Web qui desservent les clients aujourd'hui, et l’absorption massive des appareils mobiles qui ont mis l’accent sur le problème, il serait presque impossible pour tout le monde d’être d’accord.
Vous voulez être une proie pour entendre ce que les entreprises professionnelles pensent du design réactif et comment elles servent leurs clients?
J'ai interviewé quatre organisations de premier plan qui créent quotidiennement des expériences mobiles pour leurs clients. Ci-dessous, vous trouverez les informations internes sur leurs processus de développement mobile
Deux positions opposées
Bien qu'il existe de nombreux points de vue différents, il semble y avoir deux opinions prédominantes entourant le Web.
Dans le coin bleu ...
Les fans de responsive design vantent les nombreux avantages comme une preuve suffisante que cette technologie doit être appliquée à tous ou à la plupart des sites mobiles.
Selon les concepteurs réactifs:
- Les utilisateurs veulent une expérience de site Web complète, quel que soit leur appareil, et non une version simplifiée de ce que les webmasters pensent que les utilisateurs voudront voir. L'utilisabilité vise à faire en sorte que les visiteurs du site Web aient l'impression de contrôler et de prendre les décisions. Les experts soutiennent qu'un site mobile séparé peut frustrer l'utilisateur final.
- La conception réactive est un choix rentable car il n’ya qu’un seul site à gérer. Les entreprises devront créer des sites mobiles distincts pour chaque périphérique, ce qui peut s’ajouter à long terme aux exigences de contenu et de maintenance.
- Avec les sites réactifs, il n'y a pas de mises à niveau coûteuses et futures lorsque de nouveaux appareils mobiles arrivent sur le marché.
- De nombreux experts SEO estiment que les sites Web conçus avec responsive design sont plus adaptés aux moteurs de recherche, car ils ne transmettent pas le lien vers d'autres domaines, comme le font les sites Web spécifiques à certains mobiles. Selon Google, cette mise à jour "utilise l'URL de destination finale du smartphone" dans leurs résultats de recherche mobile, en contournant les redirections, ce qui permet un temps de chargement plus rapide.
Selon Michael Wyszomierski, qui travaille pour Google dans le domaine de la qualité des produits, le design réactif est la solution. Voici son post sur Google+:
Michael a répondu aux critiques dans les commentaires en déclarant que dans certains cas, des sites mobiles peuvent être nécessaires, mais dans l’ensemble, il est un fervent partisan de la conception réactive et estime que de nombreux sites pourraient considérablement améliorer leur expérience utilisateur.
Donc, si le design réactif est si cool, tendance et tendance, pourquoi y a-t-il une hystérie de masse autour du sujet? Voici quelques raisons…
Dans le coin rouge ...
L’autre côté de l’argument n’est pas obstinément opposé à la conception réactive, mais ils estiment que cela ne convient que dans des situations spécifiques. Ce camp souligne que la décision de construire un site mobile distinct sur un design réactif dépend des besoins de l'utilisateur mobile.
Voici quelques arguments contre la conception réactive:
- Vitesse - Lorsqu'un utilisateur mobile ouvre un site avec un design réactif, tous les éléments du site du bureau sont téléchargés et redimensionnés pour s'adapter à l'écran. Cela ralentit le chargement du site car tout le code Javascript et HTML d'origine est toujours présent. (Lorsque les concepteurs créent des sites Web spécifiques aux mobiles, ils considèrent le périphérique lors de la conception du site et l'optimisent en conséquence.)
- Contenu distinct - Le camp en faveur des sites spécifiques aux mobiles soutient généralement que les utilisateurs mobiles peuvent avoir besoin d'un autre niveau de contenu qui n'est pas présent sur un site Web de bureau. La conception réactive peut convenir à l'appareil, mais elle ne profite pas de l'optimisation de l'expérience utilisateur pour répondre à leurs besoins uniques.
Nous avons décidé de pousser cet argument dans la rue pour voir comment les entreprises rentables répondent aux besoins mobiles de leurs clients. J'ai parlé à quatre organisations de haut niveau et je leur ai posé des questions sur leur approche du design réactif. Je les ai choisis parce qu'ils réussissent à fournir un excellent travail à leurs clients et leur croissance en témoigne.
Je me suis posé les mêmes questions pour voir si leur approche était différente / similaire sur le sujet.
Colin Proctor, des idées fracassantes
Le premier est Des idées fracassantes , une agence interactive basée à Seattle en affaires depuis 1996. Le directeur artistique Colin Proctor a eu la gentillesse de partager ses réflexions sur le design réactif.
Q: À quelle fréquence développez-vous des sites Web mobiles pour vos clients?
A: Nous en avons fait une poignée. Avec bon nombre de nos clients, nous voyons des initiatives Web mobile décoller dès maintenant. L'expérience du Web mobile a été un sujet majeur de planification et de conversation au cours de l'année écoulée pour la plupart de nos projets. Les sites mobiles que nous avons développés ont été soit des sites réactifs en tant que compagnons, soit une seule mise en page réactive. La plupart d'entre eux ont eu un contenu très concentré. Nous avons un large éventail d'expériences mobiles, qu'il s'agisse d'applications natives ou hybrides, d'applications Web, etc.
Q: Utilisez-vous automatiquement responsive design pour tous les clients mobiles? Expliquez brièvement pourquoi ou pourquoi pas.
R: Non, mais ça fait toujours partie de la conversation. Nous explorons le contexte du public avant de prendre des décisions concernant la technologie. Pour être transparentes, les mises en page entièrement réactives ont toujours des limites techniques qui inquiètent les grandes entreprises: la publicité, l'imagerie réactive et le support de l'intégration par une tierce partie sont parmi les principales préoccupations. Pour les sites de brochures, nous utilisons presque toujours un design réactif car la hiérarchie de contenu de ces sites a tendance à se dégrader facilement sur une multitude de points de rupture. Souvent, le contexte de l'utilisateur pour les sites de brochure est cohérent sur tous les appareils.
Q: Diriez-vous que vous êtes ...
a) En faveur du design réactif
b) Pas en faveur du design réactif
c) En faveur de la conception réactive et de sites mobiles distincts
Expliquez brièvement pourquoi vous avez choisi votre réponse ...
R: Je pense qu'il est dangereux d'utiliser la mise en page réactive comme un tout, et qu'une stratégie réactive déterminera les manières dont votre système de conception répondra au contexte de votre utilisateur (ce qui est la clé). La conception / mise en page réactive est une approche très évolutive, mais prend-elle toujours en compte ce que fait l'utilisateur? Ce n'est pas le cas, car il s'agit d'un système de nombreuses solutions de conception pour mobiles.
Si je construisais un site Web de transport public, je devrais considérer qu'un utilisateur assis à son bureau planifie probablement son horaire ou ses itinéraires, tandis qu'un utilisateur sur son téléphone essaie de déterminer où se trouve son bus / train et cherche plus solutions immédiates. Ces deux contextes présentent des comportements différents, des besoins d'opportunité, des besoins de navigation et des contenus à présenter en amont. Un ensemble de modèles avec un style et une mise en page contextuels peut ne pas être la solution - il peut être nécessaire de créer un ensemble de fonctionnalités entièrement différent.
Q: Quel est votre meilleur conseil pour les concepteurs / développeurs Web qui cherchent à créer des expériences mobiles avec succès pour leurs clients?
R: Le design réactif n'est pas un point de départ. C'est une technologie formidable que beaucoup de membres de la communauté Web ont mis beaucoup de temps à mettre au point pour résoudre les problèmes qui l'empêchent d'avoir une présence plus globale. Je pense que nous verrons l’adoption de la mise en page et du design réactifs au fil des ans.
À mon avis, la meilleure chose à tirer de l’explosion du Web mobile est de rompre avec l’idée que notre toile est définie, et que nous devons simplement la remplir. Nous sommes obligés de dépasser nos anciennes hypothèses sur l’expérience utilisateur, et sont responsables de nos processus de pensée plus que nous l’avons été dans l’histoire récente. En tant que société, nous ne sommes plus un auditoire captif qui regarde un rectangle d'une surface d'affichage moyenne de 1024 × 768, de sorte que les règles sont en train d'être réécrites. En tant qu'industrie, c'est le moment d'expérimenter et de grandir.
Evolve Creative Group
Le prochain est Evolve Creative Group , une société de solutions Web à service complet basée à Akron, en Ohio. J'ai posé les mêmes questions aux développeurs et voici leurs réponses:
Q: À quelle fréquence développez-vous des sites Web mobiles pour vos clients?
R: Nous développons probablement des sites Web mobiles environ 30% du temps. C'est une combinaison de désir, de budget et de nécessité pour nos clients. De nombreux clients n’ont pas le besoin ou le désir de prendre en charge le mobile en raison de leur audience et de leur budget. En raison de la flexibilité des sites que nous construisons (non mobiles), ils travaillent suffisamment sur mobile pour que les clients ne puissent pas justifier le coût. Cela peut être difficile à vendre, mais au fur et à mesure que les tendances en matière de mobilité se développent et se solidifient, de plus en plus de clients entrent en ligne de compte.
Q: Utilisez-vous automatiquement responsive design pour tous les clients mobiles?
R: Non, nous ne l'utilisons pas pour tous les clients mobiles. Nous faisons simplement ce qui est dans le meilleur intérêt du client et de ses utilisateurs. Nous évaluons soigneusement l'approche mobile au cas par cas en fonction de leurs besoins.
Si les utilisateurs mobiles du client ont un sous-ensemble d'intérêts, ou un objectif spécifique nécessitant une modification de la disposition ou de la quantité d'informations livrées, nous vous recommandons un site mobile distinct sur un sous-domaine, ce qui nous permet de simplifier le site pour expérience mobile. En revanche, si le site est déjà simple et universel en termes de messagerie et d'objectifs (comme les blogs, les pages de destination et les petits sites d'information, par exemple), un site unique, flexible sur toutes les plateformes, est certainement avantageux.
Q: Diriez-vous que vous êtes ...
a) En faveur du design réactif
b) Pas en faveur du design réactif
c) En faveur de la conception réactive et de sites mobiles distincts.
Expliquez brièvement pourquoi vous avez choisi votre réponse ...
R: Comme dans tout ce secteur, l’approche mobile est un compromis, car il existe des avantages et des inconvénients pour chaque méthode. Des sites mobiles séparés offrent l'avantage de concentrer l'utilisateur sur un contenu spécifique concis et optimisé. Mais l'inconvénient inhérent est que le client peut avoir deux fois plus de temps pour les futures mises à jour.
C'est là que le design réactif retentit avec l'argument "un site pour les gouverner tous". Avoir un site unique, universel, riche en flexibilité et offrant l'intégralité du site avec lequel les utilisateurs peuvent interagir est une idée très intéressante. Il met le pouvoir entre les mains des clients et des utilisateurs et résout le problème de la conception et de la création de sites Web pour un périphérique spécifique (ordinateur de bureau ou autre). Mais les arguments contre la conception réactive comme le temps de téléchargement, les coûts de développement et la surcharge d'informations peuvent être tout aussi convaincants.
La morale ici est de personnaliser la solution en fonction du projet et des utilisateurs, et de ne pas s’accrocher au débat toujours plus ardent.
Q: Quel est votre meilleur conseil pour les concepteurs / développeurs Web qui cherchent à créer des expériences mobiles avec succès pour leurs clients?
R: Le plus grand conseil que nous puissions vous donner est de choisir intelligemment votre approche. Ne vous contentez pas de monter sur le wagon de bande réactif, car c'est la nouveauté ou rester sur des sites mobiles distincts car il est sûr et familier. Vous devez évaluer soigneusement les avantages et les inconvénients de chaque approche pour le projet en question.
En outre, basez-le sur l'utilisateur final de la solution. Sont-ils le type qui a un objectif spécifique et pas d'attention? Veulent-ils entrer, sortir et continuer leur vie? Ou sont-ils dans un café et veulent-ils profiter de l'expérience complète? La réponse à cette question donnera probablement le bon choix.
Ryan Anderson, Alchemy50
Ensuite, j'ai parlé à Ryan Anderson, président de Alchemy50 , une agence numérique basée à Brooklyn, NY. Voici ce que Ryan avait à dire sur le processus de son entreprise:
Q: À quelle fréquence développez-vous des sites Web mobiles pour vos clients?
A: rarement Je pense que les sites Web spécifiques au mobile deviennent une chose du passé. Il y a tellement de tailles d'écran, de résolutions, etc. différentes que de considérer ces jours-ci que créer un site "mobile" spécifique est généralement plus utile que nécessaire et ne résout pas complètement le problème.
Q: Utilisez-vous automatiquement responsive design pour tous les clients mobiles?
Un: pas automatiquement, mais fréquemment. Cela dépend vraiment de la nature du projet - qu'il s'agisse d'une application Web ou d'un site Web d'entreprise - les deux ont des paramètres uniques à prendre en compte. De plus, nous ne séparons plus vraiment le «mobile», nous allons plutôt dans un projet en sachant que dans la plupart des cas, il s’agit de plusieurs périphériques, multi-résolutions, multi-navigateurs, etc. base de code pour être rentable.
C'est là qu'un cadre réactif adéquat est essentiel: vous pouvez traiter la plupart des permutations avec un bon cadre. Alchemy50 a créé son propre framework, qui combine des éléments rigides et une mise à l’échelle dynamique. Nous avons constaté que les sites plus complexes utilisent généralement des frameworks élastiques, de sorte que notre framework utilise des requêtes média pour ajuster nos pages à des résolutions définies. Il s'est avéré extrêmement utile et efficace dans nos efforts pour prendre en charge plusieurs appareils et navigateurs avec une base de code unique.
Q: Diriez-vous que vous êtes ...
a) En faveur du design réactif
b) Pas en faveur du design réactif
c) En faveur de la conception réactive et de sites mobiles distincts selon le client et ses utilisateurs
Expliquez brièvement pourquoi vous avez choisi votre réponse ...
R: C’est vraiment le seul moyen de se développer sur le Web ces jours-ci. Nous devons nous mettre à la place de nos clients et en tenir compte - coût total, échéancier, évolutivité, capacité de prise en charge, etc. Il est important de souligner, cependant, que parfois, ce qui est demandé ne peut pas être fait sans les bibliothèques natives du système d’exploitation - un framework Web réactif n’est donc pas la solution à tout.
Q: Quel est votre meilleur conseil pour les concepteurs / développeurs Web qui cherchent à créer des expériences mobiles avec succès pour leurs clients?
R: Ne choisissez pas de solution tant que vous ne comprenez pas parfaitement ce que le client veut faire. Et méfiez-vous, il arrive souvent qu'un client veuille "un site HTML5" ou une "application mobile qui fonctionne partout" - nous avons constaté qu'ils ne comprennent généralement pas parfaitement ce qu'ils disent. Demandez-leur d'oublier la technologie pendant une minute et d'expliquer en langage clair ce qu'ils cherchent à construire. Quel est le marché cible? Quelles sont les habitudes de ce marché (technologie, navigateur, sont-ils assis à des bureaux, etc.) Quelles fonctionnalités le site / l'application fournira-t-il? Souvent, lorsque vous parlez de ces points avec le client, une approche efficace (et parfois très différente!) Apparaîtra.
Nicholas Davison, Digitaria
Enfin, j'ai parlé avec le directeur du développement Web de Digitaria , Nicholas Davison. Digitaria est une agence numérique à service complet fondée en 1997 avec cinq sites aux États-Unis. Voici ce que Nicholas avait à dire sur le design réactif:
Q: À quelle fréquence développez-vous des sites Web mobiles pour vos clients?
R: La majorité de nos versions incluent un composant mobile ces jours-ci. Avec un portefeuille aussi large et aussi profond que celui de Digitaria, cela signifie que mon équipe dispose généralement de plusieurs sites avec des composants mobiles à un moment donné.
Q: Utilisez-vous automatiquement responsive design pour tous les clients mobiles? Expliquez brièvement pourquoi ou pourquoi pas.
R: Ignorant Zeldman et respectant la définition de Marcotte ... si vous séparez Responsive, essentiellement, Adaptive Plus, Liquid Layouts et images, nous ne choisissons pas automatiquement Responsive over Adaptive. La principale raison en est le retour sur investissement.
Les mises en page liquides posent une série de défis: le mélange de dimensions et de pourcentages fixes nécessite généralement des éléments div supplémentaires pour bloquer la conception. Les erreurs d'arrondi entraînent des problèmes dans les versions plus anciennes d'Internet Explorer et laissent souvent des pixels vides, même dans les navigateurs les plus modernes. Si l'assurance qualité est effectuée correctement, il convient de vérifier chaque élément à chaque taille dans chaque navigateur, ce qui augmente considérablement les coûts d'assurance qualité.
Qu'est-ce que ces coûts vous apportent sur un design adaptatif qui prend déjà en charge 320, 480, 720, 960 et 1140? Ils utilisent légèrement mieux l’espace et ajoutent un léger facteur wow. Si ces avantages justifient le coût, nous construisons Responsive. S'ils ne le font pas, Adaptive est plus approprié.
Si, comme le suggère Zeldman, nous utilisons indifféremment Responsive et Adaptive et ne cherchons pas à trouver des variantes liquides, cela ne devrait jamais être une décision automatique. Quiconque pense à son client cherche les bons outils pour le bon travail.
Adaptive présente de nombreux avantages et a généralement un sens. Cependant, il existe toujours des exceptions: Mdot fonctionne souvent mieux lorsque le client souhaite un contenu différent pour le mobile. Les applications fonctionnent souvent mieux lorsque le client souhaite des fonctionnalités très avancées nécessitant une interface personnalisée et des interactions pour chaque facteur de forme.
Occasionnellement, Mobile n'a pas de sens, point. Si un client doit simplement disposer d'un site minimal pour des raisons légales ou liées à l'octroi de subventions et souhaite maintenir des coûts peu élevés tout en cochant simplement une case, la survente n'est pas appropriée.
Donc, Adaptive est quelque chose que nous recommandons généralement, mais en tant que bon partenaire, nous ne devrions jamais recommander quoi que ce soit sans écouter en premier.
Q: Diriez-vous que vous êtes ...
a) En faveur du design réactif
b) Pas en faveur du design réactif
c) En faveur de la conception réactive et de sites mobiles distincts
Expliquez brièvement pourquoi vous avez choisi votre réponse ...
R: La conception adaptative est incroyablement convaincante dans presque tous les cas. Ignorer la téléphonie mobile et les tablettes devient rapidement une mauvaise affaire, au mépris du Web il ya dix ans. Vous devez simplement les considérer pour la plupart des projets. Les jours des sites partiels Mdot sont numérotés. Les utilisateurs attendent tout le contenu sur le périphérique qu'ils utilisent. Une fois les mobiles inexistants ou partiels ne sont même pas des options, Adaptive est le moyen le plus rentable de le délivrer dans la grande majorité des cas. Comparé à un site Mdot complet et complet, il est moins cher. Comparé à Mdot, Tablet et Desktop, il est beaucoup moins cher.
Et ce ne sont que les arguments pour aujourd'hui: la maintenance adaptative est moins chère à entretenir et à développer qu’en une seule plate-forme. Les sites ne sont pas seulement pour aujourd'hui. Avec la durée de vie de plusieurs années sur la plupart des sites, nous ne devons pas nous contenter de penser à la quantité d’utilisateurs de mobiles et de tablettes actuels, mais à combien ils les utiliseront bien avant la fin du cycle de vie du site.
Q: Quel est votre meilleur conseil pour les concepteurs / développeurs Web qui cherchent à créer des expériences mobiles avec succès pour leurs clients?
A: plan. Considérez le mobile et le bureau en même temps. Revenir en arrière et moderniser la structure sous-jacente pour répondre à vos besoins actuels en matière de conception surprise est bien plus coûteux que la planification et la construction d’une structure propre qui sert les deux.
Utilisez respond.js pour que votre site fonctionne sur tous les navigateurs, pas seulement sur ceux qui connaissent les requêtes sur les médias. Ne construisez pas de liquide juste parce que Responsive est la version la plus froide d'Adaptive. Il a des avantages mais il a aussi des coûts. Assurez-vous de choisir ce qui vous convient le mieux.
Testez tôt et testez souvent. C'était vrai quand nous développions sur quatre navigateurs de bureau et qu'Internet Explorer était plus ancien à considérer. Cela est doublement vrai maintenant, nous ajoutons de nombreuses plates-formes mobiles: un problème est facile à résoudre proprement si vous le détectez dès sa première apparition. Il est presque impossible de résoudre le problème lorsque des dizaines de couches sont construites dessus, masquant ainsi le problème central. Si vous ne testez pas, multipliez les plates-formes, après chaque nouvelle fonctionnalité ajoutée, vous le faites mal.
Pour des raisons de santé mentale, vous devez accepter une liste de plates-formes pour lesquelles vous donnez une garantie de code. Il y a tellement de variantes Android, d'anciennes versions de points iOS, d'appareils Windows Mobile que vous allez offrir des correctifs gratuits à vie si vous êtes assez stupide pour simplement accepter "tous les smartphones". Et puis il y a Blackberry où les anciennes versions semblent conçu avec un amour pervers de briser.
Le débat continue
Merci à tous les participants de nous avoir donné un aperçu de leurs processus quotidiens.