Carnet de notes

Paliers de respon­sive design

in

Et si nous dépas­sions les posi­tions de prin­cipe ?

Pour faire une mise en page web « respon­sive », des gens biens me décon­seillent de me servir des tailles des diffé­rents appa­reils pour imagi­ner les paliers sur lesquels modi­fier l’agen­ce­ment. L’idée est de travailler sur le contenu et d’ima­gi­ner ce qui est le plus perti­nent pour le contenu, indé­pen­dam­ment des appa­reils sur le marché, qui vont de toutes façons évoluer.

Oui, ok, en théo­rie. Main­te­nant il est temps de travailler la pratique.

Je peux faire une opti­mi­sa­tion ou un nouvel agen­ce­ment à chaque fois que l’es­pace dispo­nible me permet d’ap­por­ter un peu de valeur ajou­tée. Je fini­rai avec une multi­tude de paliers diffé­rents. Certains me deman­de­ront du temps, peut être beau­coup, alors qu’ils ne repré­sentent quasi­ment aucun visi­teur. Autant dire que j’au­rai perdu du temps.

À l’in­verse, je peux prévoir unique­ment quelques paliers prin­ci­paux et lais­ser les marges ou tailles s’adap­ter parce que mon contenu le permet. Ce sera correct et lisible partout mais peut être que tel ou tel type d’ap­pa­reil repré­sente beau­coup de visi­teurs et qu’un palier ou qu’une opti­mi­sa­tion supplé­men­taire aurait apporté un retour sur inves­tis­se­ment signi­fi­ca­tif.

Au final je vais devoir faire des choix de palier non seule­ment en fonc­tion de mon contenu, de l’er­go­no­mie visée et du temps dispo­nible, mais aussi en fonc­tion des visi­teurs et de leur maté­riel. C’est une clas­sique ques­tion de retour sur inves­tis­se­ment, de ratio entre la valeur ajou­tée et l’in­ves­tis­se­ment néces­saire : Je veux que ce soit correct partout, mais je veux concen­ter mes efforts supplé­men­taires là où c’est le plus utile et visible.

Même sans toucher au nombre de paliers, l’er­go­no­mie et les conte­nus ne dictent pas toujours un palier très précis. Je peux fina­le­ment viser un peu plus tôt ou un peu plus tard sans que ça ne change grand chose, j’ap­por­te­rai juste une solu­tion légè­re­ment diffé­rente. Tel ou tel appa­reil risque de se retrou­ver proche d’un palier et avoir connais­sance de cette proxi­mité me permet un quick-win au niveau de la valeur ajou­tée qu’il serait dommage de rater.

Bien évidem­ment c’est une réflexion qui dépend en partie des appa­reils, de la répar­ti­tion des utili­sa­teurs et des prévi­sions tels que nous en dispo­sons aujourd’­hui. Cela peut chan­ger, et cela chan­gera. Si je prends correc­te­ment en compte le design et l’er­go­no­mie alors le rendu restera correct. Peut être pas autant opti­misé qu’au départ, mais pas moins bon que si je ne prends pas du tout en compte les appa­reils et utili­sa­teurs au départ.

Comments

10 réponses à “Paliers de respon­sive design”

  1. Avatar de Nicolas Hoizey
    Nicolas Hoizey

    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 ?

    Répondre
    1. Avatar de edaspet
      edaspet

      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).

  2. Avatar de Nicolas Hoizey
    Nicolas Hoizey

    « 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/

    Répondre
    1. Avatar de edaspet
      edaspet

      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.

    2. Avatar de Nicolas Hoizey
      Nicolas Hoizey

      Je ne vois pas où est le problème alors ! ;-)

  3. Avatar de karl
    karl

    J’ai arrêté de lire avec «  les pointures déconseillent »

    Répondre
    1. Avatar de edaspet
      edaspet

      ç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.

  4. Avatar de edaspet
    edaspet

    Note: le contenu a été pas mal réécrit suite aux commentaires faits par ailleurs

    Répondre
  5. Avatar de karl
    karl

    « 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.

    Répondre
  6. Avatar de Emmanuel
    Emmanuel

    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.

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *