Centurion-magazine.com — Front to Back

A quick run-through of the different technologies and development features we used to create the new Centurion-magazine.com.

First and foremost we wanted to make a web-app that was as fast and user-responsive as possible with the clients’s heavy imagery, dynamic content and advertising (Banners…) needs in mind, utilising features that are progressively enhancing the experience.

For cardmembers, the web-app offers special sections and features Such as: Content tailored to the users’ personal interests, luxury limited edition items created exclusively for Centurion Magazine readers by leading luxury brands, an archive of past magazines, a comprehensive travel planner — and the definitive forecasting tool for 2016, The Compendium by Centurion.

Umbraco is our go to system for anything that needs a CMS. At the moment centurion-magazine.com is serving 3000+ articles and 10.000+ media without Umbraco breaking a sweat. Umbraco uses the Razor syntax to handle templating, offering us great flexibility and functionality in the template layer. We host the solution as a Web-App on Microsofts Azure platform where you get easy deployment flows and scaleability more or less out of the box.

Responsive & Single Page Application

We decided to build the web-app with a Single Page Application (SPA) approach for maximum speed, performance and feature flexibility. Once the user has loaded the initial app, each page is then fetched via the Ajax API, that simply returns a JSON object containing a pre-rendered, server-cached template and useful page data, as we are only updating the parts that needs to be changed upon page change we are saving plenty of performance and valuable rendering seconds, making the web-app feel very responsive and light on mobile.

Through Google Analytics we know what pages users interacts with the most (Doh..) and we use link pre-fetching to tell the browser to pre-fetch these pages in the background. We also use intent logic to fetch pages in the background saving the data in sessionStorage as well as saving previous visited pages to sessionStorage thereby preventing unnecessary calls to the server.

Offline & Push Notifications via Service Workers

Another Service Worker is using Google’s sw-toolbox to handle offline scenarios across the web-app, using a combination between strategies “Network First” and “Cache First”, this allows us to serve all none-critical and previously visited pages in offline-mode. For critical pages (login, signup etc.) or none-visited pages we show the user a general offline page that allows him to navigate back to already visited pages. This way we give the user a close to native-feeling web-app that never breaks hens experience.

Front-end misc

A few features and tricks:

  • Inline-styling, to show an initial “load” screen to the user. Especially mobile-users benefits from this.
  • Google DFP integration via the DFP Javascript API, to give us control over when to show banners and update UI — giving more space to content (also if user has ad-blocker) if a banner is not available. This way we handle banners asynchronously, preventing banners/3rd party from blocking the web-app, which is a huge problem across the current mobile-web. Reference: http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html?_r=0
  • HTML5 <picture> element to serve an array of screen optimised images, we used this polyfill https://github.com/scottjehl/picturefill as the picture element is not fully supported.
  • Backbone, keeping the logic of the app light and tight. No need to get all fancy and bloated with the hype-trains.
  • <template> trick to wrap <img> tags, preventing images from blocking initial load. Trick from: https://www.christianheilmann.com/2015/09/08/quick-trick-using-template-to-delay-loading-of-images/
  • The 5 custom fonts we load asynchronously to prevent initial load-block. As it is a SPA the fonts persist when changing pages (no font blinking..). webfontload library from Google/Typekit is used.
  • Whole site is responsive with a few adaptive features.
  • Clean none-disturbing brand-enhancing animations.
  • Catch front-end (they happen!) Errors and report them to a Slack channel through our in-house developed “Error Bot”, soon to be released via RELAX Tools. The site also uses RELAX Tools “Uptime Bot” alerting us if the website goes down. More info on RELAX Tools here: http://relax.tools
  • All articles are indexed in Lucene for fast search and filtering
  • SPA web-app is fully SEO optimised, out of the box from Single and Umbraco.
  • Gulp tasks (via the Single framework) to handle everything from compiling, code validation and deployments.
  • TypeScript, typed superset of JavaScript which makes it possible for us to build a strong, easy-readable code foundation that follows strict OOP principles.
  • + many other small tricks to make the site snappy and happy.

A couple of future improvements and explorations will be to update the servers to handle the HTTP/2 protocol. Switch our deployment flow and hosting onto the Umbraco cloud. We also plan to explore the possibilities of exploring using a streaming model rather than the asynchronous Ajax model.

Swing by Centurion Magazine.com

Follow us RWATGG.com, Facebook, Twitter

Relax, we are the good guys is a Digital Agency founded in Buenos Aires in 2009 by Stine Hein and Felix Nielsen.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store