Développé en interne par Paul Lewis, le site Web de la CDS a montré comment créer une expérience Web mobile de qualité pour les visiteurs de conférences.
Coulisses
La fluidité d'affichage du site sur différents navigateurs mobiles est remarquable. Il exploite au mieux les cycles de mise en page et de rendu du navigateur.
Nouvelles fonctionnalités utilisées de la plate-forme Web
- Service Worker
- Manifest
- Couleur du thème
Patterns
- Cartes dépensées
- Grille responsive
- Material Design
Code source
L'interview
Développement
Lorsque Paul Smith a entrepris de créer le site, l'une de nos principales priorités était d'adopter l'amélioration progressive. Au lieu de concevoir pour les ordinateurs de bureau, il l'a d'abord conçue pour les petits écrans, avant de l'adapter à des écrans plus grands, en s'améliorant progressivement au lieu de se dégrader progressivement. Cela nécessitait de nombreuses requêtes média, mais aussi une certaine liberté pour examiner de petits changements entre les points d'arrêt clés. En effectuant le suivi des différentes tailles d'écran, il peut avoir une idée de l'emplacement du contenu et ainsi résoudre le problème rapidement.
Un autre aspect important de l'EP est la rétrocompatibilité possible. Paul a choisi d'utiliser des floats plutôt que Flexbox, car il pensait que cela augmenterait le nombre de navigateurs compatibles avec le site. Pour la mise en page spécifique du site, cela s'est avéré sans problème. S'il avait besoin d'une Flexbox, il aurait utilisé l'EP pour l'ajouter.
L'un des principaux défis du site était la fonctionnalité d'expansion et de réduction des fiches, qui nécessitait de repenser la façon dont les animations étaient opérationnelles. Paul a élaboré une stratégie qu'il appelle FLIP, qui consiste à animer des éléments pour leur état final. À partir de là, vous appliquez des propriétés compatibles avec les compositeurs telles que les transformations et l'opacité pour inverser les modifications et replacer l'élément à sa position de départ. Enfin, activez les transitions sur les transformations et l'opacité, puis supprimez ces modifications. Cela permet aux éléments de reprendre leur position finale une fois de plus ! Paul avoue que c'est un peu inattendu, mais cette stratégie fonctionne très bien et permet d'améliorer les performances.
Performances
Considérant Paul Lewis comme un gourou de la performance, je n'ai pas été surpris d'apprendre que la formation de puissance était une considération très importante lors de la création du site. Il s'est appuyé sur WebPageTest pour obtenir une valeur d'indice de vitesse aussi faible que possible. Sans l'intégration YouTube, Paul Smith a réussi à atteindre moins de 1 000 utilisateurs avec une connexion par câble. La plupart des utilisateurs obtenaient donc un rendu initial en moins d'une seconde.
La majeure partie du travail pour y parvenir était effectuée via des tâches Grunt visant à concaténer, réduire et compresser les images autant que possible. Le site diffère également les images non essentielles après le chargement de la page, afin que le contenu réel s'affiche à l'écran plus rapidement.
Pour améliorer le temps de chargement de la page, Paul a choisi d'utiliser un service worker. Avec lui, que vous soyez en ligne ou non, une visite de page peut être servie à partir du cache, ce qui vous permet d'accéder au contenu même si la connexion est instable (c'est extrêmement important lorsque vous êtes connecté au Wi-Fi de conférence). Le site de CDS est l'un des premiers sites de production à utiliser cette nouvelle fonctionnalité, ce qui a fait rencontrer Paul de nombreux "problèmes d'utilisateurs de la première heure", mais l'énorme augmentation des performances, m'a-t-il dit, compensait cela. En fait, il l'oriente désormais vers chaque site qu'il crée !
Bien entendu, les performances ne concernent pas seulement le chargement d'un site, mais aussi son exécution. Paul savait que les animations allaient représenter un défi. C'est pourquoi il a créé FLIP. En outre, il a tout mis en œuvre pour s'assurer que rien ne gêne la saisie tactile ou le défilement. Malgré le fait que le site ne soit pas extrêmement complexe, il a adopté une méthodologie RAIL modifiée pour la construction (il n'avait pas vraiment besoin de beaucoup de temps d'inactivité), ce qui s'est avéré très utile.
Design
Étant donné que le site avait été créé par une seule personne, Paul était à la fois le concepteur et le développeur du projet. Cela signifiait que le niveau de compréhension des deux "équipes" était sans précédent. Il aime concevoir un ordinateur de bureau (à l'opposé de l'amélioration progressive, qu'il a utilisée pendant le développement), car cela lui donne une idée de ce qui doit être inclus dans le projet. Ensuite, Paul passe à l'affichage sur mobile, qui lui permet d'affiner considérablement les éléments et de s'assurer que les éléments les plus importants reçoivent le plus d'attention. Cette information est ensuite utilisée pour la version Desktop, car l'architecture et la priorité des informations doivent invariablement être mises à jour.
Tout ne s’est pas bien passé. Les consignes Material Design de l'époque n'étaient pas claires sur la façon de créer un site de contenu. Il y a donc eu des difficultés. La conception ne tenait pas non plus compte du fait que les informations sur le calendrier et les sessions étaient liées. En fin de compte, l'expérience utilisateur signifiait que les personnes pouvaient suivre le calendrier et être frustrées de ne pas pouvoir accéder directement aux informations de la session.
Cela dit, je pense que Paul a fait un travail formidable pour transporter les spécifications Material Design vers un site de contenu. Je suis vraiment satisfait du graphisme et du mouvement. Son aspect Material Design est unique, et les informations et l'apparence favorisent l'interaction et la hiérarchie.
Réussite
- L'intégralité du site a été publiée sur GitHub (> 200 étoiles) en tant que code récurrent et source d'inspiration pour les développeurs Web.
- Intégration des versions les plus récentes et les plus performantes de la plate-forme Web: service worker, fichier manifeste Web et couleurs de thème dynamiques. L'effet net est quelque chose qui semble vraiment intégré à la plate-forme lorsqu'elle est exécutée sur des appareils Android. S'il était ajouté à l'écran d'accueil de l'utilisateur, cela ressemble beaucoup à une application qu'il utiliserait, ce qui est vraiment cool.
- ~73.7k pages vues et ~73.7k clics vers les sous-sections du site, l'utilisateur l'a réellement utilisée et interagi avec elle, bien plus que prévu.
C'est une excellente source d'inspiration pour les développeurs Web d'aujourd'hui et un site de conférence qui rencontre un franc succès.