Et si nous dépassions les positions de principe ?
Pour faire une mise en page web « responsive », des gens biens me déconseillent de me servir des tailles des différents appareils pour imaginer les paliers sur lesquels modifier l’agencement. L’idée est de travailler sur le contenu et d’imaginer ce qui est le plus pertinent pour le contenu, indépendamment des appareils sur le marché, qui vont de toutes façons évoluer.
Oui, ok, en théorie. Maintenant il est temps de travailler la pratique.
Je peux faire une optimisation ou un nouvel agencement à chaque fois que l’espace disponible me permet d’apporter un peu de valeur ajoutée. Je finirai avec une multitude de paliers différents. Certains me demanderont du temps, peut être beaucoup, alors qu’ils ne représentent quasiment aucun visiteur. Autant dire que j’aurai perdu du temps.
À l’inverse, je peux prévoir uniquement quelques paliers principaux et laisser les marges ou tailles s’adapter parce que mon contenu le permet. Ce sera correct et lisible partout mais peut être que tel ou tel type d’appareil représente beaucoup de visiteurs et qu’un palier ou qu’une optimisation supplémentaire aurait apporté un retour sur investissement significatif.
Au final je vais devoir faire des choix de palier non seulement en fonction de mon contenu, de l’ergonomie visée et du temps disponible, mais aussi en fonction des visiteurs et de leur matériel. C’est une classique question de retour sur investissement, de ratio entre la valeur ajoutée et l’investissement nécessaire : Je veux que ce soit correct partout, mais je veux concenter mes efforts supplémentaires là où c’est le plus utile et visible.
Même sans toucher au nombre de paliers, l’ergonomie et les contenus ne dictent pas toujours un palier très précis. Je peux finalement viser un peu plus tôt ou un peu plus tard sans que ça ne change grand chose, j’apporterai juste une solution légèrement différente. Tel ou tel appareil risque de se retrouver proche d’un palier et avoir connaissance de cette proximité me permet un quick-win au niveau de la valeur ajoutée qu’il serait dommage de rater.
Bien évidemment c’est une réflexion qui dépend en partie des appareils, de la répartition des utilisateurs et des prévisions tels que nous en disposons aujourd’hui. Cela peut changer, et cela changera. Si je prends correctement en compte le design et l’ergonomie alors le rendu restera correct. Peut être pas autant optimisé qu’au départ, mais pas moins bon que si je ne prends pas du tout en compte les appareils et utilisateurs au départ.
10 réponses à “Paliers de responsive design”
Le problème de « savoir si un palier potentiel concerne 50% ou 5% des visiteurs joue forcément sur l’investissement que je vais y mettre » c’est que tu ne t’intéresse alors qu’au parc actuel d’utilisateurs / devices, ce n’est pas « future friendly »… Sais-tu si tu auras les ressources pour adapter cela plus tard ?
Je demandais les paliers courants, en espérant que d’autres avaient fait la réflexion en fonction non seulement du parc actuel mais des évolutions de ce parc, visibles ou prévisibles. À défaut je peux tenter de le faire, mais pour ça il faut quand même avoir l’info.
Je réfute aussi l’idée du « non future friendly ». Désolé mais que je fasse mon palier à 500 ou 480px c’est autant future friendly. La différence c’est que l’un des deux sera peut être *aussi* present-friendly, et ça ça n’a pas de prix. Si demain arrivent des appareils avec des résolution différentes et non prévues, ou si les % d’utilisateurs se renversent, et bien ça donnera exactement ce que vous promouvez actuellement : ça s’adaptera au mieux en fonction du contenu (ce qui donnera toujours quelque chose de correct, pas forcément quelque chose d’optimal).
« que je fasse mon palier à 500 ou 480px c’est autant future friendly »
Peut-être, mais tout dépend d’où viennent ces valeurs ! Elles doivent venir de ce qui convient à tes contenus, pas de ce que tu vois sur d’autres sites ou sur les rayonnages de la FNAC.
Déjà, le fait que tu raisonnes en « px » est un travers que tu peux corriger tout de suite. Essaye de raisonner en « em » plutôt : http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Non mais bien entendu que je gère en fonction de mes contenus. Mais que je laisse un ou des caractères de plus ou de moins mon contenu l’accepte souvent, c’est en partie un choix graphique, que je vais tenter d’adapter en fonction de là où l’effort a le plus de sens.
Inversement ce n’est pas parce que 50% des gens utilisent la résolution X que je vais faire un palier à ce niveau. Si le contenu s’adapte parfaitement je le sauterai peut être, mais je le prendrai en compte dans la décision.
Sur le em/px nous sommes d’accord. Ca ne retire rien à la démarche (juste que je vais devoir regarder les (taille écran) / (taille police) lors de l’évaluation des appareils les plus significatifs.
Je ne vois pas où est le problème alors ! ;-)
J’ai arrêté de lire avec « les pointures déconseillent »
ça a été pas mal réécrit, dont cette phrase même si celle-ci ne me choque toujours pas dans son écriture passée.
Note: le contenu a été pas mal réécrit suite aux commentaires faits par ailleurs
« les gens biens » toujours soupir. Ne personnalise pas le débat.
> Oui, ok, en théorie. Maintenant il est temps de travailler la pratique.
Ce n’est pas de la théorie. C’est tout à fait de la pratique. Le billet caractérise les autres dans une position « moi je bosse » et vous vous êtes idéalistes. J’essaie de m’extraire de cela et de comprendre ce que tu demandes :
« Je peux faire une optimisation ou un nouvel agencement à chaque fois que l’espace disponible me permet d’apporter un peu de valeur ajoutée. Je finirai avec une multitude de paliers différents. »
Je ne sais pas d’où cela vient ? Cela semble être une pratique qui s’applique justement à la taille des écrans.
Taille des écrans : des dizaines de tailles disponibles avec également des variabilités de diagonale.
Taille de la ligne de lecture. 50-60 caractères maximum. Soit une seule contrainte. Quand l’espace devient plus exigü, il y a un enjeu de taille de mots dans un écran relative à la taille de la police. Et justement si on veut rester pratique, il faut considérer que les gens grandissent les tailles de police.
« À l’inverse, je peux prévoir uniquement quelques paliers principaux et laisser les marges ou tailles s’adapter parce que mon contenu le permet. »
Oui et non. C’est incomplet. Par exemple sur un écran très large si la taille de ta ligne fait 200 caractère, elle devient illisible. Il peut donc être souhaitable de limiter la largeur maximum d’une ligne, le palier en em, et/ou de passer sur deux colonnes si tu veux occuper tout l’espace.
En te concentrant sur la lisibilité du contenu et en faisant abstraction de la taille de l’écran, tu fais justement ce quick-win.
Cela permet de penser de manière simple avec beaucoup moins de contraintes et de simplifier la proposition de design, au lieu de penser en « ce design a été conçu pour tel écran et nous l’adaptons à telle autre taille. », nous passons à « ce design a été conçu pour que le contenu soit lisible avec des lignes de 60 caractères maximum et moins. »
L’enjeu réel et pragmatique, c’est quelles instructions, le concepteur graphique a eu au départ avant de proposer un design.
Je travaille actuellement au passage « à moindre frais » en responsive « pas trop travaillé » d’un site assez ancien fait en fixe. Le budget n’est pas énorme, c’est une petite prestation/évolution. Je précise cela pour poser le contexte de l’intervention, qui est différent de celui d’un site qui serait réalisé-maquetté en responsive dès le départ. Partir du 1024px initial puis retailler le navigateur, voir où le design « casse » puis poser un point de rupture à ce moment-là est la meilleure tactique que je conçois pour ce site, pour la maintenabilité du code, aussi (nécessiterait trop de ré-écriture). J’obtiens un site techniquement abordé en « desktop first » avec 3 points de ruptures (donc 4 tailles : très petit / petit / moyen / grand).
Voilà, c’est juste pour parler d’un cas concret, dans un contexte concret. C’est en faisant que les solutions sont apparues. Aucune contrainte de terminal en amont, il fallait juste que le design s’adapte.