Présentation de TriRig 2.0

Aujourd'hui, je lance un projet secret qui est resté presque entièrement secret. Jusqu'à tout récemment, pas la moindre allusion à cette nouvelle n'était rendue publique pendant les mois pendant lesquels nous y travaillions. Les dernières touches viennent d'être apportées et ce produit est enfin prêt à être commercialisé.

Je parle bien sûr du tout nouveau design web de TriRig.com. C'est presque le troisième anniversaire de TriRig.com. Notre nouvelle année se termine techniquement le 1er juillet, mais j'avais hâte de dévoiler le nouveau site, c'est donc notre cadeau d'anniversaire pour vous. Et même si le lancement d'aujourd'hui ne concerne pas un produit que vous pouvez tenir entre vos mains, il peut être encore plus critique pour nos lecteurs. Ce qui est en jeu aujourd'hui, c'est l'élément le plus fondamental de TriRig : le site lui-même.

Beaucoup d’entre vous ont exprimé des mots aimables sur le design existant. Alors pourquoi s’en mêler ? Eh bien, la plupart du temps, nous ne l'avons pas fait. Vous remarquerez probablement que les choses se ressemblent fondamentalement. Mais il se passe BEAUCOUP de choses – le site entier a été réécrit de haut en bas. Et si vous lisez ceci sur un iPhone, vous comprendrez immédiatement pourquoi.

Folie Mobile
L’avènement de la navigation Web mobile omniprésente a toujours été une pierre d’achoppement pour les propriétaires de sites Web. Quel est le meilleur itinéraire à emprunter ? Faut-il créer un site spécifique aux mobiles ? Pour quelle plateforme optimisez-vous ? Il existe de nombreux types d'écrans différents, même parmi les appareils mobiles, et leurs densités de résolution sont omniprésentes.

Franchement, la voie empruntée par la plupart des administrateurs est nulle. Les sites spécifiques aux mobiles sont bien souvent très pénibles, ne fournissant qu'une fraction des fonctionnalités complètes du site et essayant désespérément de fournir au moins la majorité du contenu important. Certains concepteurs choisissent simplement d'ignorer complètement le site mobile, permettant aux utilisateurs de parcourir le site de bureau sur leurs appareils mobiles. C'est ce que nous faisons chez TriRig depuis trois ans, mais cela a aussi ses inconvénients. Les pages sont difficiles à lire et à parcourir, le texte est incroyablement petit jusqu'à ce que vous zoomiez sur une section spécifique (et une fois que vous l'avez fait, c'est comme essayer de lire un journal avec un télescope.

Les utilisateurs sont également confus. Nous avons mené un sondage en mars, demandant si ceux d'entre vous qui naviguent sur des appareils mobiles aimeraient voir un site spécifique aux mobiles. Et vous étiez assez partagés dans vos réponses. Certains d'entre vous souhaitaient une page spécifique au téléphone. Certains d’entre vous souhaitaient une page spécifique aux tablettes. Un autre groupe, presque aussi important, a voté en faveur de la navigation sur les sites de bureau sur leurs appareils mobiles. Je soupçonne que cela est dû à la médiocrité des expériences de navigation spécifiques aux mobiles. Mais c'est TriRig, et le principe fondateur de ce site est que nous pouvons faire mieux que le statu quo. Je pense qu'il existe une solution qui attend d'être développée. C'est donc ce que nous avons fait. Et je pense que vous allez adorer le résultat.

Unité de Design

Voici une page en taille réelle, presque inchangée par rapport à la dernière itération de notre conception v1.
En fin de compte, je crois vraiment que l'avenir de la conception Web n'est pas une expérience de navigation divisée qui vous oblige à vous familiariser avec une interface utilisateur différente pour chaque appareil que vous utilisez. Je pense plutôt que les développeurs Web devraient se concentrer sur la création de pages dynamiques qui s'adaptent aux appareils que nous utilisons. Une page pour les gouverner tous, si vous voulez.

C’est donc exactement ce que nous avons décidé de créer.

Le nouveau TriRig est une expérience de navigation entièrement dynamique et évolutive qui s'adaptera à l'écran sur lequel elle est consultée, en fonction de la taille de la fenêtre du navigateur. Vous pouvez constater par vous-même la mise à l’échelle dynamique. Placez simplement cette page dans une fenêtre redimensionnable et commencez lentement à réduire la largeur du navigateur. Au fur et à mesure que vous redimensionnerez la page, vous commencerez à voir tout réduire. Les images, les vidéos et les éléments de page sont mis à l'échelle proportionnellement, afin d'éviter l'apparition d'une redoutable barre de défilement horizontale. Le texte reste de la même taille afin de rester parfaitement lisible.

Bien sûr, à un moment donné, il n'est plus idéal de simplement tout écraser et de conserver la même structure de page - vous essaieriez simplement d'en faire tenir trop sur un seul écran. Cela est particulièrement vrai pour la navigation sur smartphone, où la taille de l'affichage est suffisamment petite pour que vous n'obteniez qu'une seule colonne de texte utilisable. Ainsi, à un point d'arrêt de 768 px et moins, les éléments de la page TriRig se réorganisent. La barre latérale passe en dessous du contenu principal, laissant plus de place pour lire sur ces petits appareils. Vous pouvez le constater vous-même : continuez simplement à réduire la fenêtre de votre navigateur et vous verrez soudainement la barre latérale disparaître. Il n'a pas réellement disparu, il a simplement été déplacé sous le texte principal de l'article afin de vous donner plus d'espace pour lire. C'est la structure qui reste en place pour toutes les petites tailles d'écran. Tout continue à être réduit comme avant, pour que tout reste visible. Sur des écrans de très petite taille, la barre de navigation en haut se réduit en un menu déroulant, économisant ainsi un espace précieux sur l'écran tout en conservant cette navigation simple et familière sur le site.

Et voici à quoi ressemble cette même page lorsqu'elle est un peu réduite - notez que TOUS le même contenu et la même fonction sont toujours intacts. La barre latérale vient de se déplacer sous l'article principal.
Oh oui, et comme TriRig a été conçu à l'origine comme un site basé sur une base de données, le nouveau design s'applique à chaque page du site, depuis le tout premier article que nous avons jamais publié.

Ce qui est si important dans cette conception (à mon avis), c'est que même si l'expérience de navigation est optimisée pour chaque taille d'affichage, l'intégralité du contenu de chaque page du site est disponible quel que soit l'appareil sur lequel vous naviguez. Il se trouve peut-être dans un endroit légèrement différent, mais il sera néanmoins disponible.

Ce n’est certainement pas le seul moyen de résoudre le problème de la disparité d’affichage afin de créer une expérience de navigation plus cohérente. Et ce n'est peut-être pas la meilleure solution. Mais c'est le mieux que j'ai pu trouver pour le moment. Et à mon avis, c'est bien mieux que la manière aléatoire et ad hoc dont se comportent actuellement de nombreux sites. Vous ne perdez pas un seul instant du contenu du site et vous n'avez pas besoin d'apprendre une nouvelle interface utilisateur pour profiter de TriRig sur votre téléphone, votre tablette ou tout autre appareil.

Zurbifié
Aucune de ces améliorations dynamiques n’aurait été possible sans le travail formidable d’un groupe appelé Zurb. Ils ont mis au point un outil open source appelé Foundation qui rend relativement simple le codage de toutes les fonctionnalités que j'ai décrites ci-dessus. Pour les geeks du codage parmi vous, Foundation n'est essentiellement qu'une feuille de style CSS et le Javascript qui l'accompagne qui mettent à votre disposition un grand nombre de classes prédéfinies et d'outils JS pratiques. Il est très facile de réfléchir dans les termes que j'ai décrits ci-dessus et de créer des pages qui s'y conforment.

Dans des largeurs très étroites, la barre de navigation se réduit en un menu extensible - une fonctionnalité pratique pour les téléphones mobiles disposant d'un espace d'affichage limité.
TriRig reste un logiciel entièrement codé à la main - il a toujours existé sous la forme de quelques dizaines de scripts PHP qui définissent tous les éléments de l'interface utilisateur, d'une base de données SQL qui stocke et sert tout le contenu du site, et de quelques autres petits éléments. code servant à diverses fins. Et désormais, Foundation fournit le socle sur lequel ces éléments sont empilés. J'ai toujours été extrêmement égoïste avec mes actifs et je n'ai jamais voulu confier TriRig à un type de modèle de boîte noire ou de CMS que je ne pouvais pas contrôler complètement. Ainsi, la quasi-totalité de TriRig est entièrement manuscrite dans un simple éditeur de texte (j'utilise Notepad++). Foundation m’attirait car elle fournissait les outils que je souhaitais sans m’obliger à renoncer à ce contrôle. Les deux scripts Foundation sont entièrement modifiables par l'utilisateur et ont été considérablement modifiés afin de conserver l'apparence et la convivialité d'origine de TriRig.

Conclusions
Qu'est-ce que tout cela signifie pour vous, l'utilisateur ? Eh bien, peut-être pas grand-chose. Si vous n'êtes pas un technicien, vous pouvez simplement continuer à naviguer sans même penser à la façon dont tout cela fonctionne. Exactement. La navigation sur TriRig est désormais plus simple, quel que soit l'appareil sur lequel vous le faites. Mais là encore, si vous n'êtes pas un responsable technique, vous ne lisez probablement pas TriRig en premier lieu. Quelques-uns d'entre vous (environ cinq pour cent) utilisent encore Internet Explorer version 8 ou antérieure, et ces navigateurs ne sont pas compatibles avec les scripts Foundation. Ces navigateurs utilisent par défaut la version smartphone du site ; la barre de navigation est réduite en un menu et le contenu de la barre latérale est affiché sous le contenu principal. Donc, pour ceux d'entre vous qui utilisent IE8 et versions antérieures, TriRig est toujours utilisable, mais pas idéal. Malheureusement, je viens de décider que l'énorme avantage qu'apportent les 95 % restants d'entre vous aux navigateurs plus modernes en valait la peine.

Que pensez-vous de la refonte ? Pensez-vous que nous avons trouvé une bonne solution pour une utilisation moderne du Web ? Voyez-vous des bizarreries étranges auxquelles nous devons remédier ? Nous aimerions connaître votre avis dans la section commentaires ci-dessous.