27-12-2010, 05:13 PM
D’après certaines prévisions estiment qu’en 2011, seulement 10% des processeurs écoulés sur le marché seront à destination d’ordinateurs fixes.
C'est-à-dire que tout le reste (90%) sera à destination : de portables, de net book, de smart phone, de tablettes, d’eBookReader, de webTV (googleTV, appleTV, etc.) et autre systèmes embarqués.
Depuis un peu plus d’un an, on assiste à une mutation des terminaux utilisés pour naviguer sur le web, et là où avant on se cassait le cul pour que notre site fonctionne aussi bien avec Internet Explorer et Firefox, aujourd’hui nous devons anticiper un peu plus et nous adapter à des outils de plus en plus variés.
Avec la diversité de plus en plus grande des outils s’ajoutent donc des contraintes d’utilisations différentes : résolutions d’écran, interface de contrôle (clavier, souris, tactile, télécommande) et de couleurs (noir et blanc pour les eBookReaders ou problème de luminosité sur les tablettes et smartphones en extérieur)
Je ne compte pas ici, vous dire comment faire pour que votre site fonctionne partout, mais plutôt vous sensibiliser sur un certains nombre de trucs à faire ou ne pas faire, et quelques points à prendre en considération, libre à vous ensuite d’essayer de rendre compatible votre site avec une ou plusieurs de ces interfaces alternatives.
Une chose est sûre, ces interfaces se multiplient et se limiter à un site pour un écran fixe, un clavier et une souris est à mon goût une grosse erreur.
Résolution d’écran :
Je me souviens encore d’une époque où il fallait que la page du site tienne sur un écran en 800x600 pour tout ceux qui était encore sur un écran 14 pouces et Windows 95.
Puis le standard est passé à 1024, puis dernièrement 1280.
Aujourd’hui les écrans de la plupart des nets books ne dépassent pas le 1024, parfois même en dessous. Quand aux smart phones, on tourne au mieux à 800 pixels de large.
Pour les télés, c’est encore différent, sur un écran cathodique (il en reste encore beaucoup) le balayage rend la lecture de texte souvent difficile, une résolution de 640 est à conseiller. Les télévision numérique (écran LCD, télé HD) ont une meilleure résolution, et une lecture d’une résolution plus fine est possible, mais la distance de l’utilisateur par rapport à l’écran est en général plus grande que face à un ordinateur, il est donc conseillé de ne pas dépasser une résolution de 1024.
D’un autre côté, pour les ordinateurs fixe, la taille standard des écrans augmente à vue d’œil, de nombreux écrans vendu sont maintenant à 20 puces de diagonale ou plus, et ont donc une résolution de 1800 pixels de large…
On distingue donc trois familles :
- les grandes résolutions ( > 1280)
- les standard (1024 à 1280)
- les petites ( < 1024)
Pour les grandes résolutions : le truc, c’est de rapporter l’interface à une résolution standard, centrer votre site au milieu du navigateur, mettez des marges ou des bordures en dégradés et une couleur de fond unie ou une texture répétitive pour tout le reste. Attention à la grande image de fond qui finit par se répéter sur un grand écran.
Pour les résolutions standard, vous savez faire.
Pour les petites résolutions : plusieurs solutions...
- soit vous arrivez à faire en sorte soit élastique et puisse se réduire automatiquement pour les petits écrans
- soit vous proposez une CSS alternative qui remettra en page votre site pour s’adapter aux écrans plus petits sans toucher aux formats plus « standard »
- soit vous proposez une version alternative du site, plus light et adapter à ce type d’écran.
Interface de contrôle
Le clavier et la souris, c’est dépassé…
Non, j’exagère, mais ce n’est plus la seule interface possible.
Depuis 2 ans environs, les smartphones utilisent plutôt des écrans tactiles, de même, HP en premier (avec son TouchSmart) les ordinateurs fixes se mettent aussi au tactile, et maintenant c’est au tour des tablettes d’arriver sur le marché (iPad d’apple et Galaxy Tab de Samsung pour citer les deux plus importantes).
A côté, Apple en premier et Google ensuite sortent leur interface de navigation web via la télévision… je crois même que l’on peut en faire de même avec certaines consoles de jeu (à confirmer, je n’en ai pas) ces appareils sont dépourvu de souris et de clavier et utilisent à la place une télécommande ou un équivalent.
Qu’est ce que ça change me direz-vous ?
Et bien un truc très con : les "onMouseOver" ne fonctionnent généralement plus... ben oui, il n’y a souvent plus de curseur de souris à déplacer, on clique directement sur la zone à activer... adieu les jolies menus déroulants, adieu les infos bulles qui se déclenchent quand la souris passe au-dessus d’un élément.
Et pour les interfaces utilisant une télécommande, la navigation de lien en lien fonctionne généralement comme la touche Tab de votre clavier, c'est-à-dire que l’attribut « tabindex » que l’on utilise souvent heu... pas du tout... devient indispensable à la navigation.
Quand à la barre de statut du navigateur... elle n’existe tout simplement pas sur de nombreux terminaux.
Que faire ?
Ne supprimez pas tout de suites vos menus déroulant et vos infos-bulles !! Il faut surtout prévoir une solution alternative, c’est à dire que ce que vous proposer par des infos-bulles par exemple doit pouvoir être accessible par un autre moyen.
Utilisez judicieusement le tabindex
Et... oubliez la barre de statut du navigateur, de nombreux terminaux n’en ont pas, et de toute façon, personne ne la regarde.
Gestion des couleurs
Deux cas sortent de l’ordinaire :
- premièrement les eBookReaders (de type Amazon Kindle) qui utilisent des écrans à base d’encre électronique (eInk), cette technologie à l’avantage d’être très très me en énergie et de ne pas souffrir des reflets du soleil par exemple... les écrans à encre électronique ne sont pas lumineux et sont donc aussi facilement lisible que du papier imprimé. Leur inconvénient est d’être par contre en noir et blanc.
- Deuxièmement, l’utilisation de tablettes et de smartphone en extérieur, et en particulier quand il y a du soleil, les écrans deviennent souvent illisibles s’ils ne sont pas suffisamment contrastés
Pour rester utilisable sur ce type d’interface il suffit de se conformer aux règles élémentaires d’accessibilités : si vos interface est lisible par les daltoniens, elle sera probablement lisible sur les eBookReaders et autre smartphone… utiliser des contrastes forts pour les données importantes, pas de bleu sur du vert par exemple.
Conclusion
Voilà, je ne vous ais pas énuméré toutes les différences qui découlent de la diversité des terminaux Internet mais les plus importants, et pour ceux qui se sont déjà frotté aux problématiques d’accessibilité (faire en sorte que son site soit accessible au plus grand nombre, y compris les personnes handicapées ou à visibilité réduites) constateront que ces nouveaux terminaux apportent le même type de problèmes, et nécessite souvent le même type de correction.
Voilà, maintenant, il semble presque impossible de faire un site et une interface pouvant répondre à toutes ces contraintes, tout en restant esthétique et ludique. Par conséquent, la solution que moi (personnellement) je préconiserait c’est de construire votre site de manière à pouvoir rapidement, ajouter une interface adaptée au périphérique les plus courants, le plus souvent en proposant une CSS alternative suffit, et utiliser l’attribut "media" lors de l’insertion de la feuille de style et le tour est joué.
Le développement de l’informatique et d’Internet est très rapide, l’image d’Internet aujourd’hui est déjà très différente de ce que nous avions il y a seulement 3 ans (apparition de l’Internet mobile) et nous ne pouvons pas savoir ce qu’il en sera dans seulement 2 ans... alors il faut anticiper, éviter tout ce qui peut, plus tard, nous empêcher de nous adapter à de nouvelles forme de navigation.
C'est-à-dire que tout le reste (90%) sera à destination : de portables, de net book, de smart phone, de tablettes, d’eBookReader, de webTV (googleTV, appleTV, etc.) et autre systèmes embarqués.
Depuis un peu plus d’un an, on assiste à une mutation des terminaux utilisés pour naviguer sur le web, et là où avant on se cassait le cul pour que notre site fonctionne aussi bien avec Internet Explorer et Firefox, aujourd’hui nous devons anticiper un peu plus et nous adapter à des outils de plus en plus variés.
Avec la diversité de plus en plus grande des outils s’ajoutent donc des contraintes d’utilisations différentes : résolutions d’écran, interface de contrôle (clavier, souris, tactile, télécommande) et de couleurs (noir et blanc pour les eBookReaders ou problème de luminosité sur les tablettes et smartphones en extérieur)
Je ne compte pas ici, vous dire comment faire pour que votre site fonctionne partout, mais plutôt vous sensibiliser sur un certains nombre de trucs à faire ou ne pas faire, et quelques points à prendre en considération, libre à vous ensuite d’essayer de rendre compatible votre site avec une ou plusieurs de ces interfaces alternatives.
Une chose est sûre, ces interfaces se multiplient et se limiter à un site pour un écran fixe, un clavier et une souris est à mon goût une grosse erreur.
Résolution d’écran :
Je me souviens encore d’une époque où il fallait que la page du site tienne sur un écran en 800x600 pour tout ceux qui était encore sur un écran 14 pouces et Windows 95.
Puis le standard est passé à 1024, puis dernièrement 1280.
Aujourd’hui les écrans de la plupart des nets books ne dépassent pas le 1024, parfois même en dessous. Quand aux smart phones, on tourne au mieux à 800 pixels de large.
Pour les télés, c’est encore différent, sur un écran cathodique (il en reste encore beaucoup) le balayage rend la lecture de texte souvent difficile, une résolution de 640 est à conseiller. Les télévision numérique (écran LCD, télé HD) ont une meilleure résolution, et une lecture d’une résolution plus fine est possible, mais la distance de l’utilisateur par rapport à l’écran est en général plus grande que face à un ordinateur, il est donc conseillé de ne pas dépasser une résolution de 1024.
D’un autre côté, pour les ordinateurs fixe, la taille standard des écrans augmente à vue d’œil, de nombreux écrans vendu sont maintenant à 20 puces de diagonale ou plus, et ont donc une résolution de 1800 pixels de large…
On distingue donc trois familles :
- les grandes résolutions ( > 1280)
- les standard (1024 à 1280)
- les petites ( < 1024)
Pour les grandes résolutions : le truc, c’est de rapporter l’interface à une résolution standard, centrer votre site au milieu du navigateur, mettez des marges ou des bordures en dégradés et une couleur de fond unie ou une texture répétitive pour tout le reste. Attention à la grande image de fond qui finit par se répéter sur un grand écran.
Pour les résolutions standard, vous savez faire.
Pour les petites résolutions : plusieurs solutions...
- soit vous arrivez à faire en sorte soit élastique et puisse se réduire automatiquement pour les petits écrans
- soit vous proposez une CSS alternative qui remettra en page votre site pour s’adapter aux écrans plus petits sans toucher aux formats plus « standard »
- soit vous proposez une version alternative du site, plus light et adapter à ce type d’écran.
Interface de contrôle
Le clavier et la souris, c’est dépassé…
Non, j’exagère, mais ce n’est plus la seule interface possible.
Depuis 2 ans environs, les smartphones utilisent plutôt des écrans tactiles, de même, HP en premier (avec son TouchSmart) les ordinateurs fixes se mettent aussi au tactile, et maintenant c’est au tour des tablettes d’arriver sur le marché (iPad d’apple et Galaxy Tab de Samsung pour citer les deux plus importantes).
A côté, Apple en premier et Google ensuite sortent leur interface de navigation web via la télévision… je crois même que l’on peut en faire de même avec certaines consoles de jeu (à confirmer, je n’en ai pas) ces appareils sont dépourvu de souris et de clavier et utilisent à la place une télécommande ou un équivalent.
Qu’est ce que ça change me direz-vous ?
Et bien un truc très con : les "onMouseOver" ne fonctionnent généralement plus... ben oui, il n’y a souvent plus de curseur de souris à déplacer, on clique directement sur la zone à activer... adieu les jolies menus déroulants, adieu les infos bulles qui se déclenchent quand la souris passe au-dessus d’un élément.
Et pour les interfaces utilisant une télécommande, la navigation de lien en lien fonctionne généralement comme la touche Tab de votre clavier, c'est-à-dire que l’attribut « tabindex » que l’on utilise souvent heu... pas du tout... devient indispensable à la navigation.
Quand à la barre de statut du navigateur... elle n’existe tout simplement pas sur de nombreux terminaux.
Que faire ?
Ne supprimez pas tout de suites vos menus déroulant et vos infos-bulles !! Il faut surtout prévoir une solution alternative, c’est à dire que ce que vous proposer par des infos-bulles par exemple doit pouvoir être accessible par un autre moyen.
Utilisez judicieusement le tabindex
Et... oubliez la barre de statut du navigateur, de nombreux terminaux n’en ont pas, et de toute façon, personne ne la regarde.
Gestion des couleurs
Deux cas sortent de l’ordinaire :
- premièrement les eBookReaders (de type Amazon Kindle) qui utilisent des écrans à base d’encre électronique (eInk), cette technologie à l’avantage d’être très très me en énergie et de ne pas souffrir des reflets du soleil par exemple... les écrans à encre électronique ne sont pas lumineux et sont donc aussi facilement lisible que du papier imprimé. Leur inconvénient est d’être par contre en noir et blanc.
- Deuxièmement, l’utilisation de tablettes et de smartphone en extérieur, et en particulier quand il y a du soleil, les écrans deviennent souvent illisibles s’ils ne sont pas suffisamment contrastés
Pour rester utilisable sur ce type d’interface il suffit de se conformer aux règles élémentaires d’accessibilités : si vos interface est lisible par les daltoniens, elle sera probablement lisible sur les eBookReaders et autre smartphone… utiliser des contrastes forts pour les données importantes, pas de bleu sur du vert par exemple.
Conclusion
Voilà, je ne vous ais pas énuméré toutes les différences qui découlent de la diversité des terminaux Internet mais les plus importants, et pour ceux qui se sont déjà frotté aux problématiques d’accessibilité (faire en sorte que son site soit accessible au plus grand nombre, y compris les personnes handicapées ou à visibilité réduites) constateront que ces nouveaux terminaux apportent le même type de problèmes, et nécessite souvent le même type de correction.
Voilà, maintenant, il semble presque impossible de faire un site et une interface pouvant répondre à toutes ces contraintes, tout en restant esthétique et ludique. Par conséquent, la solution que moi (personnellement) je préconiserait c’est de construire votre site de manière à pouvoir rapidement, ajouter une interface adaptée au périphérique les plus courants, le plus souvent en proposant une CSS alternative suffit, et utiliser l’attribut "media" lors de l’insertion de la feuille de style et le tour est joué.
Le développement de l’informatique et d’Internet est très rapide, l’image d’Internet aujourd’hui est déjà très différente de ce que nous avions il y a seulement 3 ans (apparition de l’Internet mobile) et nous ne pouvons pas savoir ce qu’il en sera dans seulement 2 ans... alors il faut anticiper, éviter tout ce qui peut, plus tard, nous empêcher de nous adapter à de nouvelles forme de navigation.
