C’est quoi ça « $var_TxtSite »?

Il y a encore beaucoup de site internet qui proviennent des premières palpitations du «.com» et du «.ca». Ceux de l’époque où pour aller naviguer nous devions utiliser l’ordinateur du bureau ou pour les plus chanceux celui de la maison. La technologie a énormément changée depuis, si vite qu’il y a encore considérablement de sites fonctionnels et conçus seulement pour cette ancienne technologie homogène.

Si l’on se fie au rapport de «wearesocial.com»* de 2018, les pourcentages d’utilisateur d’internet démontrent que plus de 50% de ceux‑ci utilisent un maintenant un téléphone portable. De ces données, vous pouvez conclure que plusieurs sites que l’on retrouve sur internet ne soient plus nécessairement au bon format pour l’écran du client potentiel. Ces malheureux visiteurs avec leur cellulaire sur un site non adapté, risquent de ne pas pouvoir y naviguer facilement ou encore pire, ils pourraient tout simplement refermer la fenêtre à sa première vue, ce que je fais fréquemment1). Ce geste insignifiant d’un visiteur peut se répercute en un mauvais signe pour Google** et pourrait affecter votre classement sur le moteur de recherche. Pour ceux qui désirent refaire leur site ou simplement une mise‑à‑jour, il y a plusieurs options qui s’offrent à vous. Ci‑dessous quelques explications sur les types de sites et des idées qui pourraient vous éclairer ou vous mélanger complètement pour la refonte de votre site internet.

C’est quoi ça site Web «réactif»?

Site s’adapte à l’écran / au moment d’écrire ce texte: «Responsive» ou «Reactive» en anglais selon OQLF (www.oqlf.gouv.qc.ca)

La solution réactive est la plus rependue avec l’avènement WordPress®, une application web très populaire et utilisé ici même sur Typographie Montréal. Vous pourriez créer et administré un site internet qui s’adapte aux largeurs variante des écrans. Que cela soit d’un téléphone intelligent en format paysage ou portrait jusqu’à un moniteur d’ordinateur. Les positions et dimensions d’images s’ajusteront et le flot et la grandeur du texte changeront selon ceux‑ci. De ce fait, vous pourriez qu’avoir besoin seulement de versions différentes pour les langages.

Êtes‑vous devant un ordinateur en ce moment? Si oui, amusez‑vous. Réduisez lentement la largeur de l’actuelle de la fenêtre de votre navigateur. Constatez comment ce site est réactif à la dimension de celle‑ci. En premier, l’image de fond disparaîtra pour éliminer les marges, en suite c’est le tour de la section recherche à la droite à être éradiqué et puis pour finir, le menu principal en haut de page, qui lui est remplacé par un menu de style hamburger sur la droite en haut. J’en profite pour vous invitez du même coup à visiter le site de centre TYPO, de continuez de vous amuser sur leurs pages et remarquer comment celui‑ci s’adapte différemment.

Il y a qu’un seul autre inconvénient que j’ai remarqué avec des sites réactifs appart leurs temps de téléchargement. Fréquemment sur un ordinateur conventionnel, les sites de ce type affichent des lettrages et des champs d’écriture surdimensionnés et vous devez faire défiler énormément pour lire un simple paragraphe. Malheureusement, certain infographistes négligent ce rendu et l’apparence sur ceux‑ci. De plus, il y a une certaine perte de contrôle sur l’aspect graphique et typographique.

C’est quoi ça un site Web «adaptatif»?

Site réceptif à l’appareil / au moment d’écrire ce texte: «Adaptive» en anglais selon OQLF / Mozilla.org utilise le terme «Reactive» dans le cas d’un serveur gérant la demande du visiteur

L’autre solution, vous pourriez avoir recourt à un script pour détecter quel est le type d’appareil utilisé. Ce script fonctionne sous le même principe que l’aiguillage des trains. Par exemple, dans le cas d’un visiteur utilisant un ordinateur, la personne sera redirigée sur la version du site adapté pour un tel appareil. Par contre, si un portable est reconnu, le script le fera bifurquer vers une autre version adaptée ou pourrait même servir un site adaptatif tel que mentionner ci‑haut. En gros, cela consiste d’avoir un site pour les ordinateurs et un ou plusieurs sites pour les portables. Je n’entrerais point dans les formats des tablettes et non plus des téléphones intelligents qui eux aussi ont des dimensions variantes.

L’inconvénient avec ce type de système, cela pourrait dédoubler le travail et peut‑être même le quadrupler pour les mises à jour à venir. Surtout si vous avez des versions dans d’autres langues, tel qu’en anglais.

C’est quoi ça « $var_TxtSite« ?

Cette partie du texte n’a aucun rapport direct avec l’affichage à l’écran, mais cela ne pourrait être plus qu’utile dans le cas de site multilingue. Comme vous l’avez compris ci‑haut, un site réactif n’est qu’un seul site pour tous, comme un film pour la famille. Tandis qu’un site adaptatif classe les clients selon sa catégorie, soit Général, 13ans+ et 18ans+ pour notre exemple (image: Site internet de base).

Donc, chacun aurait son propre film et sa présentation visuelle ne varierait que selon l’âge de la personne. Disons, pour notre plaisir, qu’Anne Dorval faisait qu’une seule narration et que l’on puisse utiliser exactement la même trame sonore pour les trois films. La voix d’Anne Dorval devient donc une donnée partagé à plusieurs sites internet que représente les trois format de films (image: Options en ajoutant une banque de donnée). Il serait donc possible de pousser le bouchon plus loin en utilisant une base de données et des textes variables, d’où provient le titre de ce paragraphe.

Les variables vous permettre d’avoir qu’une seule et unique place à corriger pour les textes de toutes les représentations de votre site. En plus, vous pourriez y ajouter d’autres langues dans votre base de données. Par contre, si vous utilisez cette option, vous devriez prévoir que vous allez nécessité d’images alternatives, dans le cas de celles incluant du texte, et d’utiliser des liens avec variables pour celle‑ci. Sinon, vous pourriez simplement vous arranger pour que cela soit que des images sans texte incorporé ou de texte multilingue. Dans les deux cas, que cela soit un site adaptatif ou réactif, cette option de texte variable n’est pas négligeable. Elle donne la flexibilité de basculer le texte d’une langue à l’autre sans nécessairement télécharger à nouveau la page internet au complet. Ajoute de la rapidité et de l’économie de bande passante.

Pour conclure, si j’étais propriétaire d’une entreprise avec les moyens et le temps pour concevoir un site internet le plus complet possible, j’utiliserais naturellement ces trois points mentionnés ci‑haut. Une version pour l’ordinateur d’une largeur approximative 1100 pixels et minimum une version adaptative (image: Le summum). J’opterais peut‑être pour deux versions adaptatives, offrant le choix entre l’une pour les données cellulaires et l’autre pour le Wi‑Fi, que les tablettes utilisent fréquemment. Le tout utiliserait une base de donnée pour mes textes en français et en anglais.


*   Référence à l’article original de «We Are Social».
** Texte intéressant à‑propos de Google Analytics du le journal Les Affaires.
1)  Mes 4 principales raisons de fermer un site à première vue: pop‑up, publicité invasive, menu compliqué et mauvais format.

Les droits d’auteurs:
UFF ! LES DELIRES D’UFF (bédéiste)
Disney‑Pixar 1986‑2018 – Stuff légal
Anne Dorval: Le Journal de Montréal, Chantal Poirier.

Si vous êtes propriétaire de droit d’une photo utilisé ici, dite‑vous bien que j’aie cherché à contacter les personnes visées. Je me ferais un plaisir d’ajouter un lien ou d’enlever votre ouvrage de ma page si vous le désirez, Merci.