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.
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.
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.
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.
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é.
.png)
Zoom, zoom et zoom
Les trois types de grossissement du navigateur :
- Le zoom de la page est la valeur par défaut avec un raccourci clavier pratique et correspond à peu près au comportement de la propriété CSS
zoom - Le facteur d’échelle (ou « zoom par pincement ») a été introduit par les premières versions de Safari mobile et peut n’être disponible que via le pavé tactile ou les interfaces tactiles, ce qui correspond à peu près au comportement de la transformation CSS
scale - Le zoom texte seul est également fourni par Firefox et Safari. Bien qu’il ne soit pas directement disponible dans CSS , le comportement est similaire à la modification de la taille de police par défaut sur un site qui utilise un dimensionnement de texte entièrement relatif avec
rem
Zoom de la page
Les navigateurs proposent tous une fonction de zoom de page pour nous permettre de naviguer sur le Web. Je l’utilise tout le temps. Par défaut, les pages se chargent au niveau 100%du zoom de page, mais nous pouvons effectuer un zoom avant ou arrière à partir de là. En général, les navigateurs se souviennent de nos paramètres de zoom pour chaque domaine que nous visitons.
Il s’agit de la forme de zoom la plus courante à laquelle nous, internautes, avons accès. J’utilise assez souvent les raccourcis clavier Ctrl+/-( Cmd+/-sur Mac), mais ces commandes sont également disponibles dans un menu de navigateur.
Ce zoom est appliqué à la taille d’un pixel CSS , avant que la page ne soit rendue . En zoomant, nous agrandissons chaque « pixel ». Mais notre fenêtre d’affichage de mise en page ne s’agrandit pas du tout, donc notre mise en page contient maintenant moins de px pixels dans chaque dimension.
En ce qui concerne le navigateur, il y a très peu de différence entre réduire la taille de la fenêtre ou agrandir les pixels. Le résultat est le même : moins de pixels peuvent tenir dans la fenêtre d’affichage.
Facteur d’échelle
Le facteur d’échelle est également disponible dans tous les navigateurs, mais vous le remarquerez probablement plus souvent sur les appareils à écran tactile.
C’est assez différent du comportement du zoom de page.
Premièrement : nous ne pouvons que zoomer en avant, pas en arrière . Il n’y a aucun moyen de mettre la page à l’échelle pour qu’elle soit plus petite que 100 % de la fenêtre d’affichage visuelle. Et lorsque nous agrandissons la page, la mise en page ne change pas, mais nous pouvons en voir moins .
Tout sur la page Web reste exactement là où il était par rapport à tout le reste – même les requêtes multimédias restent intactes – nous regardons simplement une zone plus petite de la page globale.
Zoom texte uniquement
Firefox et Safari proposent une option supplémentaire pour zoomer uniquement sur le texte . Cette option est généralement disponible en tant qu’alternative au zoom de page.
Le texte devient plus grand et rien d’autre ne change.