Concepts de développement

Une multitude de terminaux

Le défi de créer des sites internet pour tous va être de gérer les différentes tailles d’écrans et les différentes vitesses de connexions, qui ne sont plus toujours liées.

Aujourd’hui un grand nombre de nos visiteurs utilise un smartphone ou une tablette. Ceci juste pour préciser que ce que vous voyez sur votre écran lorsque vous créez un site web ne sera pas forcément l’expérience de tout le monde.

Avant, on pouvait être à peu près sur que nos utilisateurs visitaient  nos sites assis à leur bureau, sur un écran assez grand, et avec une connexion assez rapide. Nous avions juste à nous soucier de la diversité des navigateurs graphiques et d’ajouter quelques lignes de codes pour être supporté par les anciennes versions d’Internet Explorer .

L’arrivée des iPhones et d’Android et leur croissance exponentielle a bouleversé tout ça. Les tailles d’écrans se sont multipliées. De même pour les navigateurs sur les télés, les consoles de jeux et autres systèmes.

https://screensiz.es/

https://screensizemap.com/

Respecter les standards

Alors comment gérer cette diversité ? Un bon départ est de respecter les standards documentés par le Word Wide Web Consortium (W3C). Respecter les standards, c’est le premier fondement pour s’assurer un rendu correct sur tous les navigateurs conformes aux normes, soient à peu près 99% des navigateurs dans l’usage. C’est aussi le meilleur moyen de s’assurer que le site sera bien interprété par les évolutions des navigateurs, et les solutions futures.

https://validator.w3.org/

Enrichissement progressif

Avec la multitude de navigateur, vient une multitude de niveaux de support des standards. En fait aucun navigateur n’a implémenté 100% des standards. En plus du fait que les utilisateurs peuvent paramétrer leurs navigateurs, par exemple en désactivant JavaScript.

http://acid3.acidtests.org/

L’enrichissement progressif est une stratégie pour gérer les navigateurs dont on ne connais pas a priori les capacités. En créant votre site ainsi, vous commencez par vous assurer que l’expérience de base permettant d’accéder aux contenus et aux fonctions vitales du site sur la plupart des navigateurs, même les plus rudimentaires, comme peuvent l’être les aides techniques.

A partir de là vous ajoutez des couches qui proposeront une expérience plus aboutie aux utilisateurs qui disposent de moyens de consultation plus complets, en ajoutant des animations ou autres, qui ne sont pas cruciales pour la marque.

Pyramide de l’enrichissement progressif

Stratégie de création

Quand le HTML est écrit dans un ordre logique et que les éléments sont utilisés avec une sémantique correcte, il est utilisable sur la pus grande art des navigateurs, y compris les plus anciens, les plus récents, les mobiles ou les assistances techniques. L’apparence ne sera pas exactement la même partout, mais le contenu sera disponible et accessible.

Stratégie de mise en forme

A partir de là vous pouvez créer les styles que vous voulez, des plus simples aux plus évolués. Les directives qui ne seront pas comprises par certains navigateurs seront ignorées.

Vous devez juste vous appliquer à mettre en forme l’expérience de base en premier, puis à ajouter les améliorations une fois que le minimum requis est posé.

Stratégie de script

Comme pour les autres technologies, il y  a de grandes divergences dans la manière dont les navigateurs interprètent le JavaScript, particulièrement sur les terminaux hors ordinateurs de bureau, et certains utilisateurs le désactivent purement. La première règle de l’enrichissement progressif est de s’assurer que toutes les fonctions de base, comme la navigation, ou les tâches essentielles, comme la saisie d’un formulaire, sont intactes même si JavaScript est désactivé. De cette manière vous garantissez le fonctionnement de votre service, tout en l’améliorant pour ceux qui disposent de JavaScript.

Accessibilité

Nous avons évoqué la multitude des navigateurs qui peut exister, mais nous avons principalement parlé des navigateurs graphiques, contrôlés par une souris ou par le toucher. Il est indispensable de garder en tête que des personnes naviguent sur le web en utilisant d’autres moyens de consultation et d’interaction. Certains ne disposent que d’un clavier pour interagir avec une page, d’autres consultent les sites à l’aide d’une plage Braille, ou en utilisant le zoom, ou un vocalisateur de page, ou toute autre solution.

Nous devons faire en sorte quand nous créons des pages que ces utilisateurs rencontrent le moins d’obstacles possible, quelles que soient leurs capacités physiques, cognitives, leur matériel, leur culture ou leur connexion.

Les techniques et les stratégies de mise en oeuvre de l’accessibilité sont également bénéfiques aux autres utilisateurs, ceux qui ont du matériel ancien, les personnes âgées, les personnes en bas débit…

Les sites accessibles sont aussi mieux perçus par les moteurs de recherche. Google, “l’aveugle le plus connu du web”, recommande de tester ses sites avec un navigateur textuel pour plus d’efficacité.