Technological sustainability

  • Marc Brühwiler

From the frontend to the backend to the headless CMS, the entirety of the platform’s technical development was based on a mass-market package solution.

Learn more about our UX Design and CMS services.

For a digital solution, mass-market suitability means that it can be implemented on any device. For example, Ecorating is fully responsive and can be used in all browsers (IE11 and above). Good availability and stability are ensured by Vue.js and GraphQL, with the API enabling flexible architecture and tailored data procurement. These foundations are key for ensuring that the website is able to withstand high traffic during elections for the Council of States and the National Council.

An innovative frontend requires a flexible back end

The highly graphics-intensive frontend required an innovative back-end solution. October CMS Headless was therefore used for the backend. This backend performs all the calculations for the charts and prepares data for the front end via the GraphQL interface.
The frontend was implemented as a single page application using Vue.js.

High-quality graphics

Ecorating visualises its data using consistently high-quality graphics that website visitors can access. Many graphics are therefore prepared using modern SVG methods.

Finding instead of searching

Modern internet users find things via search engines and share them on social media channels.
Search engine optimisation (SEO) and social media sharing – which can be used for individual pages – were therefore key requirements of the project. As a result, Nuxt.js was used for the server-side rendering, as the implementation would not have been possible with an entirely JavaScript-based website.

Clear visualisation of errors

Our users have a very low tolerance for errors. From a technical and a usability perspective, accuracy is important. Ecorating intercepts errors (such as download issues) and displays them transparently to users.

Security – the password-protected area where politicians can record and update their election promises – has high security requirements. The API is read only – operates using standard Laravel security. It was implemented via Vuetify. All politicians can now create a profile, which is then activated following a manual review by the Swiss Environmental Alliance. Rigging is avoided by only enabling people with a political profile that has been reviewed by the Environmental Alliance.

Tell us what you think