Fondations

Une base solide

Pour créer des PWA de qualité, il est essentiel de disposer d'une base solide. Pour mettre en œuvre ces bases, vous devez concevoir et coder pour tenir compte des contraintes du Web en suivant ces quelques principes:

  • Utilisez le mobile comme contrainte de concentration. Assurez-vous que chaque vue de votre conception se concentre uniquement sur le contenu et les interactions essentiels.
  • Mettre l'accent sur le contenu et la fonctionnalité de base dans le processus de conception.
  • Améliorez progressivement les performances selon les besoins. Commencez par créer le contenu et les fonctionnalités de base d'un composant à l'aide des outils les plus simples et les plus largement disponibles. Rendez-le accessible. Testez ensuite les fonctionnalités avancées que vous aimeriez utiliser et améliorez-les grâce à elles.
  • Offrez une expérience utilisateur de qualité, rapide et axée sur les métriques de performances Web axées sur l'utilisateur, obtenez des métriques utilisateur réelles et améliorez les performances pour tous vos utilisateurs, quels que soient leur connexion réseau, le type d'entrée, la puissance du processeur ou du GPU.

En suivant ces principes et en améliorant les modèles modernes et les fonctionnalités Web, vous pouvez créer des expériences de qualité et rapides avec des conceptions vraiment intrinsèques. Des conceptions reposant sur des contraintes plutôt que des pixels, permettant à chaque utilisateur d'accéder à votre contenu et aux fonctionnalités de base de la manière la mieux adaptée à son contexte de navigation particulier.

Responsive Web Design

Depuis l'article A List Apart publié par Ethan Marcette en 2010, Responsive Web Design, les concepteurs et les développeurs sont encouragés à créer des expériences flexibles, créant ainsi des interfaces utilisateur qui fonctionnent sur un large éventail de tailles d'écran et d'appareils.

Cependant, au fil du temps, elle est devenue abrégée en tailles d'écran pour mobile, tablette et ordinateur, avec des largeurs fortement influencées par les tailles d'écran iOS. Grâce aux CSS modernes et à l'intérêt toujours plus grand pour l'intention initiale du responsive design, nous pouvons à nouveau limiter la taille des fichiers sur des sites peu résistants.

Le responsive web design introduit trois ingrédients techniques:

  • Grilles fluides
  • Support flexible
  • Requêtes média

Ethan conclut que ces exigences techniques ne sont pas suffisantes ; la voie à suivre nécessite également une approche différente.

L'idée reçue sur les mobinautes

Aux débuts de la conception réactive, des hypothèses avaient pour but de faciliter la conception des sites. Par exemple, les expériences de petite taille correspondaient aux téléphones et aux tablettes de 320 pixels de large, aux tablettes de 1 024 pixels de large, et les expériences supérieures à celles des ordinateurs de bureau. Les petits écrans étaient des fonctionnalités tactiles, contrairement aux grands écrans. Les utilisateurs de téléphones étant pressés et distraits, ils avaient donc besoin d'une expérience "légère".

Aucune de ces affirmations n'est vraie. Il s'agit de mythes sur les mobiles perpétués par l'hypothèse que les besoins d'un utilisateur sont fondamentalement différents en fonction de la taille de l'écran ou du type d'appareil. Cela ne résistant pas à un examen minutieux.

Prenons l'exemple d'une PWA de réseau social que vous pouvez installer aujourd'hui sur mobile et ordinateur. Sur ordinateur, de nombreux utilisateurs peuvent conserver une fenêtre étroite avec le flux sur un côté de l'écran lorsqu'ils travaillent. Ils peuvent supposer qu'ils utilisent un appareil mobile en raison de la largeur disponible.

L'univers des PWA, qui se cache derrière l'onglet du navigateur, ajoute même de nouveaux défis à l'univers du responsive design, comme le mode Mini et l'utilisation des appareils pliables.

Mini-mode

Lorsqu'une PWA est installée sur un ordinateur de bureau, une fenêtre peut devenir très petite (plus petite que celle d'un navigateur ou d'un navigateur mobile). C'est quelque chose de nouveau sur le Web: nous acceptons un mini-mode, une fenêtre pouvant avoir une taille minimale de 200 x 100 pixels CSS.

Aujourd'hui, lorsqu'on crée une PWA, il est judicieux de réfléchir à ce qu'il faut proposer en mode mini, grâce au Responsive Web Design, comme les boutons de commande d'un lecteur de musique, les informations du tableau de bord ou les actions rapides.

Sur un ordinateur de bureau, une PWA peut être affichée dans une fenêtre plus petite que la plus petite fenêtre que vous ayez jamais conçue pour le navigateur. Il ajoute un nouveau point d'arrêt pour votre Responsive Web Design: le mode mini.

Appareils pliables et hybrides

Les appareils pliables et hybrides sont également courants de nos jours:

  • Petits téléphones à clapet
  • Appareils pliables qui peuvent servir de téléphones ou de tablettes.
  • Des ordinateurs portables qui peuvent être transformés en tablettes.
  • Tablettes pouvant servir d'ordinateur portable avec clavier et pavé tactile.
  • Les téléphones peuvent ensuite être convertis en ordinateurs de bureau avec un hub.

Bien que le défi existe pour chaque site Web, avec une progressive web app, vous gardez le contrôle et la responsabilité de la fenêtre d'installation de l'application. Par conséquent, votre conception doit réagir et offrir la meilleure expérience dans chaque contexte.

Tout d'abord

Mais par où commencer ? D'abord axé sur le mobile, sur le contenu et sur l'activité hors connexion ? De quoi s'agit-il lorsque vous concevez pour la flexibilité du Web ? Eh bien, la réponse est oui, tout d'abord. Depuis que Luke Wroblewski l'a inventé en 2009, le terme Priorité au mobile a été interprété de diverses manières: il a émulé des modèles d'interface utilisateur et d'expérience utilisateur spécifiques à une plate-forme sur le Web, puis a développé des applications mobiles, en passant par l'utilisation de requêtes multimédias de largeur minimale et l'appel quotidien. Mais son objectif initial est le suivant: le mobile vous oblige à vous concentrer. Comme Luke l'a dit:

Les équipes de développement logiciel doivent se concentrer uniquement sur les données et les actions les plus importantes d'une application sur les appareils mobiles. Il n'y a tout simplement pas de place dans un écran de 320 x 480 pixels pour des éléments superflus et inutiles. Vous devez définir des priorités. Ainsi, lorsqu'une équipe conçoit Mobile First, le résultat est une expérience axée sur les tâches clés que les utilisateurs veulent accomplir sans les détours et les débris d'interface qui salissent les sites web actuellement accessibles sur ordinateur. C'est une bonne expérience utilisateur et un bon pour les affaires.

Luke Wroblewski

Axez chaque vue de votre site Web uniquement sur les tâches essentielles qu'un utilisateur veut accomplir sur ce site, et n'ajoutez pas plus de choses à l'idée simplement parce qu'il dispose de plus d'espace à l'écran.

Le Responsive Web Design évoque le deuxième principe: le "dégradé d'expériences différentes". L'objectif de votre travail n'est pas d'offrir à chaque utilisateur une expérience unique, identique et parfaite au pixel près : c'est tout sauf impossible.

Au lieu de considérer vos expériences Web comme un élément fixe, considérez-les comme un ensemble de recommandations que l'appareil de l'utilisateur utilisera pour créer la meilleure expérience possible en fonction du contexte actuel. Pour ce faire, l'amélioration progressive doit être adoptée.

amélioration progressive

L'amélioration progressive est un modèle qui nous permet d'écrire du code qui s'exécute partout, à partir de code HTML standard, CSS et JavaScript, puis en ajoutant des couches de fonctionnalités avec des alternatives appropriées lorsqu'aucune API n'est disponible.

Comment s'améliorer ? La détection de caractéristiques consiste à effectuer un test d'assistance et à réagir en fonction des résultats. Plusieurs outils et pratiques de plate-forme Web intégrés permettent d'y parvenir.

À l'aide de @supports, vérifiez si le navigateur accepte une fonctionnalité CSS et appliquez des règles en fonction du résultat. Cela s'applique à la fois aux propriétés et aux valeurs CSS. Si une propriété est compatible et qu'une valeur ne l'est pas, elle échouera, tout comme une propriété non compatible. Le code JavaScript peut y accéder via CSSSupportsRule.

La plupart des nouvelles fonctionnalités de la plate-forme Web sont associées à des objets existants. Par conséquent, "feature" dans la détection de style d'objet fonctionne bien en JavaScript, de même que d'autres recherches similaires, comme la vérification des propriétés ou des méthodes sur des éléments.

Pour envoyer du code JavaScript moderne, vous pouvez utiliser le modèle module/nomodule afin d'offrir des fonctionnalités plus robustes avec une charge utile plus petite pour les navigateurs plus récents et une expérience de remplacement pour les navigateurs plus anciens. L'avantage, c'est que vous disposez d'une nouvelle base de fonctionnalités JavaScript, telles que les promesses, les classes, les fonctions fléchées et const et let, qui sont disponibles pour les navigateurs compatibles avec les modules ES.

Vous pouvez même combiner plusieurs formes de détection de caractéristiques pour créer une référence améliorée. Inventée par l'équipe de BBC News, cette vidéo s'appelle Cutting the Mustard. Elle vous permet de proposer une expérience de base à tous les utilisateurs et de ne commencer à l'améliorer qu'une fois qu'une barre de fonctionnalité spécifique a été détectée.

Éviter la détection de l'appareil

Nous vous conseillons de tester directement la compatibilité des fonctionnalités plutôt que d'émettre des hypothèses concernant cette compatibilité en vous basant sur la chaîne user-agent.

Les chaînes de user-agents n'ont jamais été vraiment fiables. Ils s'appuient sur une connaissance quasi parfaite de toutes les combinaisons de navigateurs, systèmes d'exploitation et appareils existantes pour "devenir les bonnes". Même dans ce cas, elles sont sujettes au spoofing. Par exemple, les redirections vers des sites pour ordinateur dans les navigateurs mobiles sont souvent aussi simples que l'usurpation d'une chaîne user-agent pour ordinateur.

De plus, les navigateurs s'efforcent de figer leurs chaînes user-agent, avec des chaînes user-agent pour la détection des fonctionnalités spécifiquement citées comme un motif d'abandon, ce qui les rend encore plus peu fiables qu'auparavant pour identifier un utilisateur et un appareil.

Priorité au contenu

Un autre principe de la conception Web est le suivant: commencez par votre contenu. Par exemple, un boursier en temps réel avec un graphique du cours d'une action est, à la base, un tableau des actions avec leur cours sur une période donnée, éventuellement avec un lien pour actualiser le site.

Elle peut ensuite être améliorée à l'aide de JavaScript et de requêtes fetch pour mettre à jour les valeurs de la table sur un minuteur ou améliorée avec des sockets pour fournir des mises à jour push en temps réel. Vous pouvez l'améliorer à nouveau pour représenter graphiquement les résultats, avec CSS, SVG, ou avec Canvas. Mais l'essentiel commence par le contenu.

Design intrinsèque

  • Le mobile comme contrainte de concentration pour l'expérience utilisateur.
  • Mettre l'accent sur le contenu et les fonctionnalités de base dans le processus de conception.
  • Amélioration progressive des fonctionnalités avancées (si disponibles)

Ces principes se combinent pour nous donner quelque chose de nouveau: la conception intrinsèque. Dans sa vidéo Concevoir des mises en page intrinsèques, Jen Simmons explique comment utiliser des outils CSS modernes, tels que la grille, la Flexbox, la mise en page de flux et les modes d'écriture, pour concevoir et créer des interfaces utilisateur. Grâce à ces outils, elle déclare:

Vous pouvez vraiment faire en sorte que la mise en page soit intrinsèque au contenu que nous avons et à la conception que nous voulons réaliser.

Jen Simmons

Ce nouveau CSS permet aux concepteurs de reprendre le contrôle de la mise en page, mais d'une manière conforme aux derniers principes de conception Web. Au lieu de créer des formes fixes basées sur des tailles d'écran fixes, vous définissez des règles basées sur le contenu selon lesquelles la mise en page s'effectue en exploitant simultanément les propriétés intrinsèques de ce contenu, telles que sa taille, la taille du texte et l'espace disponible. Ils vous permettent de concrétiser votre conception lorsqu'elle interagit avec votre contenu sans avoir à contrôler l'emplacement de chaque pixel.

Les mises en page intrinsèques permettent d'amplifier le débat sur le contrôle sur le Web et de l'affiner. Le contrôle sur le Web ne consiste pas à dicter des appareils, des tailles d'écran, des couleurs, des polices, des mises en page ou des fonctionnalités à chaque visiteur de votre site. Le contrôle sur le Web consiste à rédiger les règles que le navigateur utilisera pour créer votre expérience, en les adaptant à chaque utilisateur de votre progressive web app.

Performances Web

Les performances Web constituent la dernière base, et non la moins importante, de notre PWA. Vous devez impérativement offrir une expérience utilisateur de qualité pour générer davantage de conversions.

Les performances Web impliquent plusieurs étapes:

  • Familiarisez-vous avec les principales métriques axées sur l'utilisateur disponibles.
  • Définissez des objectifs pour chaque métrique.
  • Mesurez notre PWA.
  • Améliorez nos métriques en appliquant des techniques et des bonnes pratiques de manière statique dans notre code ou notre serveur.
  • Mesurez à nouveau.
  • Améliorez l'expérience de chaque utilisateur, en direct, en fonction du contexte de l'utilisateur.

Aujourd'hui, les métriques de performances Web mesurent la vitesse à laquelle votre contenu s'affiche à l'écran, mais aussi l'interactivité de votre site Web et la façon dont les utilisateurs perçoivent l'expérience.

Core Web Vitals

Au cours de la dernière décennie, nous avons utilisé différents indicateurs pour mesurer les performances en ligne. Aujourd'hui, un ensemble de métriques recommandées, appelées Core Web Vitals, se concentre sur trois aspects clés qui affectent les performances et l'expérience utilisateur:

Ensemble de métriques Core Web Vitals affichant les résultats des performances d'un site Web.

Avec les métriques Core Web Vitals, vous pouvez voir en un coup d'œil si votre PWA est bonne ou mauvaise en termes de performances et d'expérience utilisateur.

Éléments de base des PWA

Il est important que votre PWA ait une base solide en matière de responsive design, de mobilité, tout avant tout, de conception intrinsèque et de performances Web afin d'offrir une expérience de qualité à tous vos utilisateurs.

Ressources