Si vous agrandissez InfoQ sur une tablette ou un ordinateur de bureau aujourd'hui, le résultat est plutôt différent. Il s’agit de la troisième refonte majeure de notre design depuis notre lancement en 2006. Ce lancement fait suite à un bêta test public réussi que nous menons depuis deux semaines. La vidéo ci-dessus fournit un aperçu rapide du nouveau design et des fonctionnalités repensées de notre back-end.
Le nouveau design est basé sur des composants qui apportent un langage graphique commun pour InfoQ et QCon. Ainsi, au cours des prochains mois, vous constaterez une convergence accrue de l'apparence et de la convivialité entre InfoQ et les différents sites des QCon, ainsi que dans des domaines tels que les bulletins d'information que nous produisons. L'intention est qu'en utilisant des modèles de design cohérents, nous améliorons la familiarité et la compréhension.
Dans le cadre de ce travail, nous avons simplifié notre typographie, nos couleurs et notre iconographie en utilisant Robot et Firs Sans pour nos polices principales. Nous avons travaillé d'arrache-pied pour que la nouvelle production soit aussi petite que possible: le CSS commun avoisine les 290 Ko, le JavaScript commun environ 35 Ko et les pages typiques de 45 à 55 Ko chacune. Globalement, le nouveau site est environ 25% plus rapide à charger qu'auparavant.
Le nouveau design se veut totalement inclusif et conforme aux directives pour l'accessibilité des contenus web (WCAG). Pour le prototypage, l’équipe de design a utilisé Sketch et InVision en tant que stack technique principale. Du point de vue des technologies, nous utilisons Vue.js avec Nuxt.js et Pug.js pour utiliser des modèles ce conception Stylus & PostCSS pour le traitement CSS et enfin Webpack pour le packaging. La nouvelle CSS suit SMACCS et BEM - une architecture évolutive et modulaire pour CSS avec BEM (Block Element Modifiers). En coulisse, nous réaménageons également le back-end d’InfoQ, qui passe d’un système vieillissant basé sur JCR à un nouveau référentiel de contenu construit sur mesure, semblable à un microservice, fonctionnant sur AWS.
Cette mise à jour n'est qu'un début. Le nouveau design est entièrement "responsive" et sera bientôt disponible sur les appareils mobiles. Nous allons également continuer à améliorer la façon de découvrir le contenu et apporter des améliorations significatives à notre lecteur vidéo au cours des prochains mois.