Newshub is one of the largest news portals in New Zealand.

Newshub on an iMac

The Challenge

Newshub saw a growing trend in mobile adoption rates and needed a website that represented the mobile-first approach. The main request was to design and develop a mobile website that looked and felt like a native app — the desktop version needed to provide a rich user experience with multiple modules and components, all managed by Adobe AEM.

The design was being re-iterated through the project, and we had to adapt to it continuously. This meant that all components had to be very modular.

Newshub on an iPhone

The Team

My role in this project was to lead the user interface architecture development and work closely with a larger team of AEM developers.

Towards the end of the project, I worked from Newshub's offices. I had the chance to closely collaborate with the team of AEM developers and get to know a lot of people with different development backgrounds.

The Solution

The website was built from scratch using an internal development framework that runs Gulp task manager on top of Node.js. With Assemble, all partial modules were compiled into HTML files, producing a long list of templates from which developers could work.

All our efforts were compiled into one large CSS file that became the core of the project. CSS animation was used to get the web app to look and feel like its native counterpart.

Newshub on an iPad

Technologies

From the technological point of view, the project was built as a static and standalone HTML project on top of Node.js. Gulp modules were used to automate the development and generation of about 50 components. SASS was used to generate CSS while a few modules required JavaScript.

  • Node.js
  • Gulp
  • Assemble
  • HTML
  • SASS