Nouvelle mise en page

Qu’est-ce qui m’a finalement donné le petit coup de pied au cul dont j’avais besoin ? Et bien c’est Google qui me chicanait en me disant que la mise en page de mon site n’était pas adaptée aux téléphones. Tout simplement.

En fait, il n’y a pas que cela. Je n’avais jamais été en mesure de tester réellement la mise en page jusqu’à il y a quelques semaines lorsque j’ai retiré la carte SIM de mon vieux ZTE Z223 pour l’insérer dans un tout nouveau Umidigi G3 Max équipé d’Android 13. J’insiste sur ce dernier détail. J’ai spécialement choisi ce modèle afin de ne pas me retrouver avec un appareil dont le système serait déjà périmé. Mon chum utilise encore une tablette Samsung Pro 12 fabriquée en 2012 dont le système Android est resté figé à la version 5 et il se plaint tout le temps que les applications qu’il souhaite utiliser rencontrent des problèmes. Firefox étant le pire…

De plus, je n’aime pas les appareils Samsung parce que la compagnie change toute l’interface du système à leur sauce. Sans dire qu’un modèle équivalent Samsung est plus cher et que le modèle chinois vient avec un protecteur d’écran préinstallé et une coque transparente. Toutefois, je ne peux pas vraiment recommander cet appareil, car évidemment lorsqu’on achète du « bas de gamme » il faut s’attendre à ce qu’il y ait quelques défauts. Par exemple, lorsque l’on utilise l’appareil sans y connecter une oreillette ou des écouteurs Bluetooth, nos interlocuteurs se plaignent parfois d’un effet d’écho; ils s’entendent parler. Dernier détail, l’appareil n’a pas de capteur NFC qui nous aurait été utile pour savoir combien de billets il nous reste sur notre carte Opus. Mais de toute façon, on a le lecteur de carte Opus pour PC à la maison et il y a un guichet dans toutes les stations de métro.

Bref, maintenant équipé d’un appareil me permettant de tester une mise en page « responsive » en situation réelle (les outils de développeur de Chrome et Firefox, bien que très utiles, ne constituent pas à proprement parler une situation réelle), j’ai commencé à faire des recherches sur le sujet (encore une fois). Je savais déjà que depuis mes débuts avec le HTML et les CSS autour de 2002, les standards du web publiés par le W3C ont connu de nombreuses évolutions, de nombreux ajouts et autres changements.

D’ailleurs, mon site web était déjà codé en HTML5 et intégrait des éléments <header> et <aside>, mais n’étant pas un développeur professionnel, un bon nombre des nouveaux éléments de HTML5 ne m’étaient d’aucune utilité. Par exemple, la nouvelle balise <video> me sert à rien parce que je ne travaille pas sur un site qui affiche fréquemment des vidéos tel que Youtube et les réseaux sociaux. Et si jamais je voulais vraiment mettre une vidéo quelque part, ce serait sur ce blogue qui fonctionne sous DotClear et intègre déjà toutes les fonctionnalités d’insertion de médias.

Cela étant dit, ce que mes recherches récentes m’ont appris, c’est que faire une mise en page qui s’adapte à différentes largeurs d’écran n’est pas aussi pénible que l’impression que j’en ai eu durant toutes ces années que j’ai passées à bouder, car je n’avais pas envie de devoir gérer une multitude de requêtes « @media » dans mes feuilles de style (sans dire que je n’avais pas encore de téléphone intelligent). En effet, durant des années lorsque l’on faisait des recherches à ce sujet, tous les articles d’aide nous disaient de mettre en place une série de règles « @media » pour chacune des différentes tailles d’écran d’appareils sur le marché. Enfin, pas vraiment non plus.

Il fallait créer ce qu’ils nommaient des « breakpoint ». Donc il fallait définir que pour les appareils allant de 320 pixels à 480 pixels le navigateur utiliserait une première série de règles de styles et ensuite pour les appareils allant de 480 pixels à 640 pixels une deuxième série de règles et ainsi de suite jusqu’aux tailles supérieures des écrans d’ordinateur de bureau. Et je comprenais mal pourquoi puisqu’en parallèle à cela je m’informais aussi de la résolution d’écran des derniers modèles de téléphone du marché et ils en étaient déjà à près de 800 pixels. Aussi large que la résolution de mon premier écran d’ordinateur !

Mais le problème, c’est que cette résolution se retrouve comprimée dans un écran qui fait seulement quelques centimètres de large. Et ainsi les navigateurs ont dû adapter le rendu des pages selon le DPI de l’écran de chaque appareil plutôt que la résolution. Donc sur mon nouveau téléphone qui a une résolution de 1080 par 2408 sur un écran large de 2.75 pouces environ (j’ai mesuré avec une règle la partie interne de l’écran où une image s’affiche) cela signifie que son DPI est d’environ 392 pixels. Et si je compare cela à mon écran d’ordinateur qui a 1920 pixels pour une largeur de 20 pouces et 7/8 (environ), cela donne un DPI de 92 pixels. Et malgré cela, je suis souvent obligé d’augmenter le zoom des pages web afin de pouvoir lire confortablement le texte de certains sites web. Alors rendre lisible du texte sur un appareil dont les pixels sont 4 fois plus petits n’est pas une chose facile.

Du moins, c’est ce que j’ai longtemps cru et juste à y penser j’en avais presque mal à la tête. Mais lors de mes récentes recherches, je suis tombé sur le blogue d’un jeune développeur de Montréal nommé Josh W Comeau et ses articles m’ont bien aidé, même s’ils sont seulement en anglais. Je mentionne ce détail seulement afin de prévenir mes lecteurs. Je n’ai aucun problème avec l’anglais écrit. Je fais d’ailleurs presque toutes mes recherches en anglais, même si l’interface de mon Google est réglée sur français Canada, comme tous mes appareils (et les logiciels qui le permettent). Même mon clavier physique de Logitech possède une disposition de touches français Canada. Cela surprenait les très rares personnes qui ont utilisé mon ordinateur par le passé. N’est-ce pas étonnant qu’au Québec en milieu de travail les ordinateurs soient souvent réglés sur la langue anglaise ? Comme si nous avions honte que notre langue officielle soit le français. Le Canada a bien deux langues officielles, mais le Québec n’en a qu’une! Vous ne verriez pas cela en France. Mais bon, c’est un autre débat.

En ce qui concerne la nouvelle mise en page du site idyllours.ca, je n’ai qu’une seule chose à ajouter, c’est qu’elle n’est évidemment pas terminée. Et je crois qu’elle ne le sera jamais. Je fais constamment des modifications ici et là dans l’espoir d’améliorer les choses. Par exemple, au début les deux boites de navigation supplémentaires qui se trouvent sous le titre des pages qui en ont besoin, s’obstinaient à vouloir pousser plus bas le contenu de la page lorsqu’on les dépliait. J’ai essayé toute sorte de choses pour tenter de faire en sorte qu’elles s’ouvrent de la même manière que le menu principal situé en haut à droite. Rien ne fonctionnait. Après quelques recherches Google, j’ai fini par découvrir qu’il suffisait de restreindre la hauteur maximale du conteneur parent. Rien de plus simple ! J’aurais dû y penser.

En ce qui concerne la nouvelle apparence du blogue, il y aurait bien plus à dire. Car jusqu’ici je n’en ai pas vraiment parlé. Premièrement, ce n’est pas moi qui ai programmé tout ce que vous voyez ici. Le blogue tourne sous DotClear qui est une alternative à WordPress bien plus connu. Et l’apparence du blogue peut être changée en quelques clics au sein de l’interface d’administration du logiciel. Toutefois, le fait ce que ce logiciel soit moins connu apporte son lot de problèmes. Par exemple, lorsque le logiciel principal est mis à jour, tous les thèmes et les « plugins » (modules complémentaires) peuvent cesser de fonctionner ou carrément provoquer un bogue majeur dans le logiciel.

Ce fut le cas de mon compteur de lecture au printemps. Le blogue n’affichait plus qu’une page blanche du côté administration. J’ai téléchargé et installé une mise à jour de l’extension sur GitHub. Cela a réglé le problème de page blanche, mais le compteur ne fonctionnait plus malgré tout. Et je n’ai aucun moyen de savoir pourquoi. Si je m’y connais assez en PHP pour lire et comprendre dans les grandes lignes le code de l’extension, je ne suis pas assez familier des différents modules et classes de DotClear. Tout ce que je peux faire, c’est attendre une prochaine mise à jour.

En terminant, j’ai passé quelques jours à tester des thèmes DotClear de la catégorie « responsive », mais rien ne fonctionnait correctement. La majorité des thèmes n’ont pas reçu de mise à jour depuis des années. Puis, je suis accidentellement tombé sur le thème « Origine Mini » et je l’ai adopté. En bonus, ce thème est très bien adapté à l’affichage du blogue sur un téléphone.