Bibliothèque Hummingbird

Capture d'écran de la mise en page

Résumé

Bibliothèque Hummingbird: une nouvelle interface rafraîchissante pour Hummingbird, un site de découverte et de suivi des vidéos d'animation populaire.

Ce que nous aimons ?

Les fans d'anime (comme moi, le nombre de vues indiqué sur la capture d'écran est bien réel !) sont depuis longtemps obsédés par le suivi de ce qu'ils ont regardé. Les sites populaires dans cet espace incluent AniDB et MyAnimeList, mais Hummingbird est le plus beau d'entre eux.

Cependant, la bibliothèque Hummingbird, qui repose sur l'API Hummingbird existante, va encore plus loin, car elle a été entièrement conçue avec Angular et Material Design. La couleur du thème et le fichier manifeste lui donnent un aspect super intégré et installable sur l'écran d'accueil, et l'expérience globale est très rapide, en se concentrant sur la fonctionnalité de base du site principal.

Améliorations possibles

Performances: l'utilisation d'un service worker pour afficher les résultats du cache et l'interface utilisateur hors connexion après le chargement initial de la page serait un atout majeur pour l'application. L'activation de la compression gzip pourrait considérablement améliorer le temps de chargement, et une mise en page standard statique initiale dans le code HTML améliorerait les performances perçues.

Expérience utilisateur: le modèle de zone flexible utilisé pour afficher la liste des émissions fonctionne bien sur les grands écrans, mais perd son attrait sur les écrans plus petits. Une version plus serrée et non centrée des tuiles fonctionnerait beaucoup mieux sur les appareils mobiles.

Questions-réponses avec Leif Thomas

Pourquoi le Web ?

Le développement pour le Web vous permet d'atteindre presque toutes les plates-formes avec un seul codebase, ce qui représente un avantage considérable si vous êtes le seul développeur. Grâce à d'excellentes fonctionnalités telles que l'ajout à l'écran d'accueil, il est facile d'offrir aux utilisateurs une expérience presque identique à ce qu'ils obtiendraient dans une application native.

Qu'est-ce qui a vraiment bien fonctionné lors du développement ?

Le projet angular/material sur GitHub a parfaitement fonctionné. Il m'a fourni tout ce dont j'avais besoin pour démarrer un projet avec AngularJS et Material Design.

Si vous pouviez avoir une API pour améliorer votre application, quelle serait-elle ?

Au niveau du navigateur, je pense qu'une API permettant d'effectuer des recherches vocales dans mon application Web pourrait vraiment être utile. Android a récemment ajouté de nombreuses commandes vocales et la possibilité d'utiliser ce type de saisie sur le Web mobile serait une excellente expérience.

Bonne nouvelle ! Nous avons déjà ça :) découvrez l'API Web Speech.

Pour finir, comment avez-vous commercialisé votre application ?

J'ai utilisé Facebook, Google+ et Twitter pour générer du trafic vers www.hummingbirdlibrary.com, mais mon plus grand pic de trafic s'est produit après avoir publié un lien vers celui-ci sur Reddit. C'est un excellent moyen de cibler un public qui peut avoir un réel intérêt pour ce que vous développez.