Fondations

Une base solide

Une base solide est la condition de base pour créer de bons PWA. Pour mettre en œuvre cette base, vous devez concevoir et coder en fonction des contraintes du Web selon deux principes:

  • Utilisez l'appareil mobile comme contrainte de mise au point. Assurez-vous que chaque vue de votre conception ne se concentre que sur le contenu et les interactions essentiels.
  • Mettre l'accent sur le contenu et les fonctionnalités de base dans le processus de conception
  • Améliorez progressivement les performances si nécessaire. 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 souhaitez utiliser et améliorez votre composant avec elles.
  • Proposez une expérience utilisateur rapide et de qualité axée sur les métriques de performances Web centrées sur l'utilisateur, obtenez des métriques réelles sur l'expérience utilisateur et améliorez les performances pour tous vos utilisateurs, quel que soit leur connexion réseau, leur type d'entrée, leur processeur ou leur GPU.

En suivant ces principes et en les complétant avec des tendances et des fonctionnalités Web modernes, vous pouvez créer des expériences rapides et de qualité avec des conceptions véritablement intrinsèques. Des conceptions basées sur des contraintes plutôt que sur des pixels, qui permettent à chaque utilisateur d'accéder à votre contenu et à vos fonctionnalités de base de la manière la plus adaptée à son contexte de navigation particulier.

Responsive Web Design

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

Au fil du temps, cependant, ils ont été raccourcis aux tailles pour mobile, tablette et ordinateur, la largeur étant fortement influencée par les tailles d'écran iOS. Grâce au CSS moderne et à un nouvel accent mis sur l'intention initiale du responsive design, nous pouvons réintégrer les squish dans les sites squishy.

Le responsive web design introduit trois ingrédients techniques:

  • Grilles fluides
  • Médias flexibles
  • Requêtes multimédias

Ethan conclut que ces exigences techniques ne suffisent pas. La voie à suivre implique également une approche différente.

Le mythe de l'utilisateur mobile

Au début du design responsif, des hypothèses ont été émises dans le but de faciliter la conception des sites. Par exemple, les expériences de petite taille concernaient les téléphones, avec une largeur de 320 pixels, les expériences moyennes pour les tablettes et leur largeur de 1 024 pixels, et toute expérience plus grande que celle des ordinateurs de bureau. Les petits écrans ont des capacités tactiles, contrairement aux grands écrans. Les utilisateurs de téléphones étaient pressés et distraits, et avaient donc besoin d'une expérience "légère".

Rien de tout cela n'est vrai. Il s'agit de mythes sur les mobiles perpétués par l'hypothèse selon laquelle les besoins d'un utilisateur sont fondamentalement différents en fonction de la taille de l'écran ou du type d'appareil. Cette affirmation ne résiste pas à l'examen.

Prenons l'exemple d'une PWA de réseau social que vous pouvez installer dès 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 pendant qu'ils travaillent. Il serait donc faux de supposer qu'ils utilisent un appareil mobile en raison de la largeur disponible.

Le monde des PWA en dehors de l'onglet du navigateur ajoute même de nouveaux défis au monde du responsive design, comme le mini-mode et la compatibilité avec les appareils pliables.

Mini-mode

Avec une PWA installée sur un ordinateur, une fenêtre peut être très petite, plus petite que la fenêtre d'un navigateur et que la fenêtre d'affichage d'un appareil mobile. Il s'agit d'une nouveauté sur le Web : nous pouvons prendre en charge un mini-mode, une fenêtre pouvant être aussi petite que 200 x 100 pixels CSS.

De nos jours, lorsque vous créez 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 celle de la plus petite fenêtre jamais conçue pour le navigateur. Il ajoute un nouveau point d’arrêt pour votre conception de sites Web réactifs: 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 pouvant être utilisés comme téléphones ou tablettes
  • Ordinateurs portables pouvant être transformés en tablettes.
  • Tablettes pouvant faire office d'ordinateur portable avec clavier et pavé tactile.
  • Les téléphones peuvent ensuite être convertis en ordinateur de bureau à l'aide d'un hub.

Ce problème existe pour tous les sites Web, mais avec une application Web progressive, vous contrôlez et êtes responsable de la fenêtre lorsque l'application est installée. Par conséquent, votre conception doit réagir et offrir la meilleure expérience dans chaque contexte.

Tout d'abord

Mais par où commencer ? Mobile first, contenu first, hors connexion first ? Lors de la conception pour la flexibilité du Web, quelle est la bonne réponse ? La réponse est oui, tout d'abord. Le terme mobile first a été interprété de différentes manières depuis que Luke Wroblewski l'a inventé en 2009 : de l'émulation des modèles d'UI et d'UX spécifiques à la plate-forme sur le Web à la création d'applications mobiles avant de créer des applications Web, en passant par l'utilisation de requêtes multimédias de largeur minimale et l'abandon de la création d'applications Web. L'objectif initial est cependant le suivant : le mobile vous oblige à vous concentrer. Comme Luke l'a dit :

Les appareils mobiles nécessitent que les équipes de développement de logiciels se concentrent uniquement sur les données et les actions les plus importantes d'une application. Un écran de 320 x 480 pixels ne laisse tout simplement pas de place à des éléments superflus. Vous devez établir des priorités. Ainsi, lorsqu'une équipe conçoit une expérience mobile first, elle obtient une expérience axée sur les tâches clés que les utilisateurs souhaitent accomplir, sans les détours et les éléments inutiles de l'interface qui encombrent les sites Web accessibles depuis un ordinateur de bureau. C'est une bonne expérience utilisateur et c'est bon pour les affaires.

Luke Wroblewski

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

Le deuxième principe est évoqué dans la conception Web responsif : le "gradient de différentes expériences". Offrir une expérience unique, identique et parfaite au pixel près pour chaque utilisateur ne devrait pas être l'objectif de votre travail ; c'est presque 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 dans son 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 vous permet d'écrire du code qui s'exécute partout, en commençant par HTML, CSS et JavaScript standards, puis en ajoutant des couches de fonctionnalités avec des solutions de remplacement appropriées lorsqu'une API n'est pas disponible.

Comment améliorer vos performances ? La détection de fonctionnalités est un modèle qui consiste à effectuer un test de compatibilité et à réagir en fonction des résultats de ce test. Pour ce faire, plusieurs outils et pratiques intégrés aux plates-formes Web sont disponibles.

À l'aide de @supports, vérifiez si le navigateur est compatible avec une fonctionnalité CSS, puis appliquez des règles en fonction du résultat. Cela s'applique aux propriétés et aux valeurs CSS. Si une propriété est prise en charge et qu'une valeur ne l'est pas, l'opération échouera, tout comme une propriété non prise en charge. 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, la fonctionnalité "feature" de la détection de style d'objet fonctionne bien en JavaScript, tout comme les autres recherches similaires, comme la vérification de propriétés ou de méthodes sur les éléments.

Pour envoyer du code JavaScript moderne, vous pouvez utiliser le modèle module/nomodule afin de fournir des fonctionnalités plus robustes avec une charge utile plus faible aux navigateurs plus récents et une expérience de remplacement aux navigateurs plus anciens. Cela présente l'avantage de garantir un nouveau niveau de référence pour les fonctionnalités JavaScript, telles que les promesses, les classes, les fonctions flèches, et const et let 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 votre référence améliorée. Cette approche, appelée "Cutting the Mustard" (Couper le cordon) par l'équipe BBC News, vous permet de proposer une expérience de base à tous et de commencer à l'améliorer uniquement lorsque vous avez atteint un niveau spécifique de détection de fonctionnalités.

Éviter la détection des appareils

Vous devez tester directement la prise en charge des fonctionnalités plutôt que de faire des suppositions sur la base de la chaîne User-Agent.

Les chaînes de user-agent n'ont jamais été vraiment fiables. Ils doivent disposer d'une connaissance quasi parfaite de chaque navigateur, système d'exploitation et combinaison d'appareils existants pour "deviner correctement". Même dans ce cas, elles sont susceptibles d'être victimes d'usurpation d'identité. Par exemple, les redirections vers un site 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 travaillent à la congélation de leurs chaînes User-Agent, et les chaînes User-Agent pour la détection de fonctionnalités sont spécifiquement mentionnées comme raison de l'abandon, ce qui les rend encore moins fiables qu'auparavant pour identifier un utilisateur et un appareil.

Priorité au contenu

Un autre principe de conception pour le Web est de commencer par votre contenu. Par exemple, un cours boursier en temps réel avec un graphique des cours d'une action est, en substance, un tableau d'actions avec leur cours sur une période donnée, avec un lien permettant d'actualiser le site.

Vous pouvez ensuite l'améliorer avec JavaScript et des requêtes de récupération pour mettre à jour les valeurs du tableau sur un minuteur, ou avec des sockets pour fournir des mises à jour basées sur le push en temps réel. Il est possible de l'améliorer encore pour représenter les résultats sous forme de graphique, avec du CSS, du SVG ou encore avec Canvas. Mais le cœur commence par le contenu.

Conception 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 grâce aux fonctionnalités avancées disponibles, le cas échéant

La combinaison de ces principes nous donne 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, le 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 explique :

Vous pouvez faire en sorte que la mise en page soit intrinsèque pour notre contenu et la conception que nous voulons faire.

Jen Simmons

Ce nouveau CSS permet aux concepteurs de reprendre un certain contrôle sur la mise en page, mais de manière à respecter les derniers principes de conception Web. Au lieu de créer des formulaires fixes en fonction de tailles d'écran fixes, vous définissez des règles basées sur le contenu, qui déterminent la mise en page en exploitant les propriétés intrinsèques de ce contenu (taille, taille du texte et espace disponible, par exemple). Elles vous permettent de réaliser votre conception telle qu'elle interagit avec votre contenu sans avoir à contrôler le positionnement de chaque pixel.

Les mises en page intrinsèques bouclent la boucle de la discussion sur le contrôle sur le Web, en lui donnant une définition. Le contrôle sur le Web ne consiste pas à dicter les appareils, les tailles d'écran, les couleurs, les polices, les mises en page ou les fonctionnalités de chaque visiteur de votre site. Le contrôle sur le Web consiste à écrire les règles qu'un navigateur utilisera pour composer votre expérience, en la développant de manière unique pour chaque utilisateur dans votre progressive web app.

Performances Web

Enfin, les performances Web sont un élément essentiel de notre PWA. Une expérience utilisateur de qualité est obligatoire. Elle génère plus de conversions de toutes les manières possibles.

Les performances Web impliquent plusieurs étapes :

  • comprendre les principales métriques centrées sur l'utilisateur disponibles ;
  • Définissez des objectifs pour chaque métrique.
  • Mesurez notre PWA.
  • Améliorer 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 temps réel en fonction de son contexte.

Aujourd'hui, les métriques de performances Web mesurent la vitesse à laquelle votre contenu apparaît à l'écran, mais aussi le degré d'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érentes métriques pour mesurer le succès des performances Web. Aujourd'hui, un ensemble de métriques recommandées appelées Core Web Vitals se concentre sur trois domaines clés qui affectent les performances et l'expérience utilisateur :

Ensemble de métriques Core Web Vitals montrant les performances d'un site Web.

Avec les métriques Core Web Vitals, vous pouvez voir d'un coup d'œil dans quelle mesure votre PWA est performante et offre une bonne expérience utilisateur.

Principes de base des PWA

Pour offrir une expérience de qualité à tous vos utilisateurs, il est important que votre PWA dispose d'une base solide en termes de responsive design, de conception mobile avant tout, de conception intrinsèque et de performances Web.

Ressources