En 2024 tout bon site internet se doit d’être adapté aux version mobiles. Oui mais …
Peut-on adapter son site à toutes les résolutions ?
En voilà une question bête me direz vous. La réponse semble être évidente et se résumerait à “oui” n’est-ce pas ? Après tout, les sites sont bien accessibles sur tous les supports, c’est bien qu’on y arrive ? Et vous n’auriez pas complètement tord, mais selon moi la vérité s’il devait y en avoir une est un peu plus complexe, et c’est le sujet que je voulais traiter dans cet article.
Sur quels supports adapter un site internet ?
C’est la première question que l’on se pose quand on développe un site et donc sa maquette en amont : Sur quels supports doit-on optimiser son site ? On pourrait simplement se dire “Bahh sur mon PC et sur mon téléphone, ça fait 2 non ?”. Pourquoi pas mais plusieurs questions viennent alors :
- Les tablettes on en fait quoi ?
- Les PC, ça correspond à quelle résolution ?
- Les mobiles, ça correspond à quelle résolution ?
- Format portrait ou paysage ?
- Et les grands écrans alors ?
Vous voyez que ce n’est pas aussi simple que “PC et mobile”.
Une histoire de résolution
Quand bien même vous souhaitez optimiser votre site sur PC, tout le monde n’a pas le même écran et donc n’a pas la même résolution, donc il y a plus ou moins de place disponible sur l’écran.
D’accord Micka, mais il y a combien de résolutions, ça doit pas être si énorme que ça…
Ce que vous êtes innocents ! En 2023 on dénombre plus de 2000 résolutions différentes. Source : Screen resolution
Vous comprenez bien qu’avec autant de résolutions, il est juste impensable (mais théoriquement possible) d’optimiser un site sur chacune des résolutions possibles. Pour éviter de développer 2000 versions différentes, il faut donc trouver des solutions efficaces pour non seulement adapter un site aux résolutions existantes, mais prévoir les nouvelles résolutions possibles.
Des solutions, des compromis
Afin d’adapter un site internet aux multiples résolutions possibles, on définit des “Points d’arrêt” qui vont être une sorte de frontière entre une version (exemple PC) à une autre (exemple Mobile). On peut définir autant de frontières que l’on veut, mais plus on en définit plus le travail sera long et fastidieux.
C’est pour cela que généralement on définit quelques résolutions que l’on peut répartir de la manière suivante : Mobile / Tablette / PC Portable / PC écran large.
Ah voilà, ça semble plutôt bien ça non ?
On s’y approche en tout cas, avec ces 4 points d’arrêt on couvre tout de même une bonne partie des résolutions existantes, mais est-ce bon pour autant ?
Une affaire de design
Même si nos 4 résolutions ci-dessus couvrent une bonne partie de nos résolutions, il faut faire attention car le design d’un site impacte directement le nombre de points d’arrêts nécessaires pour une bonne adaptabilité. Par exemple un menu en longueur surchargé nécessitera des adaptations au sein même du “point d’arrêt” PC écran large pour ne pas qu’il passe en deux lignes ou sorte de l’écran.
De même des éléments graphiques qui occupent le “blanc” autour d’une grille de lecture peuvent se retrouver sur le contenu et donc gêner la lecture avec une résolution un peu plus basse. De fait on multiplie les points d’arrêt.
Et que dire des résolutions qui sont des entre deux ? J’appelle “entre deux” une résolution qui correspond à deux supports différents mais d’utilisations différentes. Par exemple une tablette et un pc portable peuvent partager une résolution plus ou moins similaire, pourtant la manière de naviguer n’est pas la même et les éléments affichés ainsi que les interactions ne sont pas les mêmes. Donc il faut détecter la résolution d’une part mais aussi si cette résolution appartient à un écran “classique” ou à une tablette, et donc détecter l’orientation également. Et je pense que vous voyez toute la problématique. Où fixer la limite de points d’arrêts ?
Il y aura toujours des imperfections
Je pense qu’il est vain de chercher la perfection sur tous les supports existants car cela prendrait simplement beaucoup trop de temps et ne serait pas tellement rentable. Alors oui certains clients vont demander à ce que leur site soit adapté à la perfection sur leur tablette en particulier ou leur téléphone en particulier, ce que l’on comprend, mais généralement pour avoir un résultat convaincant sur un maximum de supports, la solution passera par une simplification du design et des informations présentent tout en se basant sur des grands points d’arrêts (qui correspondent aux résolutions les plus fréquemment utilisées). Cela permettra d’englober la grande majorité des résolutions et limitera les éventuels problèmes sur des résolutions atypiques.
De même pour le designer, on préférera éviter les bizarreries de design qui sont susceptibles de faire n’importe quoi dans des résolutions intermédiaires et plutôt préférer des éléments adaptatifs qui pourront s’adapter à un maximum de résolution.
