If you are growing InfoQ on a tablet or desktop device today it looks rather different. This is the third major overhaul of our design since we got started in 2006. The launch follows a successful public beta test that we've been running for the last couple of weeks. The above video provides a quick overview of the new design and re-architected back-end features.
The new design is component-based and represents a common design language for InfoQ and QCon, so over the coming months you’ll see more convergence of the look and feel between InfoQ and the various QCon sites, as well as in areas like the newsletters we produce. The intention is that by using consistent design patterns we help build familiarity and understanding.
As part of this work we've simplified our typography, colours and iconography using Robot and Firs Sans as our two main fonts. We've worked hard to keep the new production distributable as small as possible - the common CSS is around 290KB, common JavaScript around 35KB, and the typical pages are 45-55KB each. Overall the new site is around 25% faster to load than previously.
The new design is intended to be fully inclusive and conforms to Web Content Accessibility Guidelines (WCAG). For prototyping the design team used Sketch and InVision as the main design stack. From a technology stack point of view, we’re using Vue.js with Nuxt.js and Pug.js for templating/scripting with Stylus & PostCSS for CSS processing, and Webpack for packaging. The new CSS follows SMACCS and BEM - a scalable and modular architecture for CSS with Block Element Modifiers. Behind the scenes, we are also overhauling InfoQ's back end moving from an ageing JCR-based system to a new custom-built, microservice-like content repository running on AWS.
This update is just the beginning. The new design is fully responsive, and will be coming to mobile devices soon. We will also be continuing to work on improvements to content discovery, and making significant improvements to our video player, in the coming months.