06 Dec 2016

SES: Drupal 8, front-end teardown

We’ve just designed and built a new website for the world-leading satellite operator, SES. SES connects and enables broadcast, telecom, corporate and government customers, and enriches the lives of billions of people worldwide.

We’re really proud of how it’s turned out, and as it’s one of the first batch of high-profile large Drupal 8 websites, we’ve been asked by a wide range of people about our technical approach to building a complex site using the latest version of Drupal.

You can read our case study here on the project as a whole, but here is Stuart Wilson, Head of Frontend Development at Catch to explain a little more around our front-end approach:

“The sheer scale of the SES website demanded a scalable and comprehensive front end system. As a team we approached the transition from design to code by creating a static style guide of individual components which would then be used to power the Drupal 8 website.

Our modular CSS was written in SASS using NPM to run build scripts and wrapping it up with PostCSS’ Autoprefixer for greater resilience to browser inconsistencies. Using BEM syntax and championing an OOCSS approach allowed us to write configurable componentry which was open to extension, but closed to core modification which meant that QA testing could happen earlier on in the build.

“The sheer scale of the SES website demanded a scalable and comprehensive front end system."

STUART WILSON, HEAD OF FRONT END DEVELOPMENT AT CATCH

Thanks to Drupal 8’s use of the Twig templating engine, we could test the flexibility of our HTML templates using mock data which was then swappable for real content from the CMS. This created a unified theming workflow with clear ownership between the front and back end of the website and helped reduce code overhead whilst instilling scalability within the UI.

Thanks to our modular approach, we were able to utilise Drupal Paragraphs to promote greater flexibility across content types in the CMS, enabling SES to realise any combination of page designs they required.”

Visit www.ses.com and stay tuned for future SES developments. We’re continuing to work with the team in Luxembourg on increased website functionality and a range of other exciting digital products.

Related news and work

A global conservation platform

Zoological Society London

Leveraging digital to promote and achieve the worldwide conservation of animals and their habitats

Digital transformation for a global payment giant

Worldpay

Digital transformation for the global leader in payment processing technology

ZSL wins Group Leisure Award for Best Website

10 Nov 2015

ZSL London Zoo has been awarded the Best Travel and Leisure website 2015 in the Group Leisure Awards, designed and developed by Catch in 2014.

01 Dec 2015

Take me to Japan

Partnering with All Nippon Airways to create higher level of brand penetration in the UK, France and Germany and educate consumers on the culture and beauty of Japan, whilst strengthening its connection to ANA

Objective

All Nippon Airways required an agency to support with social media strategy for its EMEA markets. The campaign brief was to develop an activation that would create a higher level of brand penetration in the UK, France and Germany.

The core objectives were:

- Improve brand awareness in the UK, France and Germany

- Increase ANA’s email database by the organisation’s established growth target

- Grow the brand’s Facebook following in the UK, France and Germany by +10%

Approach

To meet ANA’s objectives, Catch launched #TakeMeToJapan; a campaign designed to capture the imagination of both new and existing fans.

The activation centred around a data capture Facebook app, which housed a prize draw for two flights to Japan with accommodation. To enter, users were asked to curate their dream experience through a series of image options. This was designed to educate consumers on the culture and beauty of Japan, whilst strengthening its connection to ANA.

Once the entry was completed, each user received an ANA branded mood board. The shareability of this strong, branded visual piece encouraged additional organic sharing via the entrants networks.

The prize draw mechanic was supported by a promotional strategy that aimed to increase both brand awareness and follower acquisition. This included:

- Social content calendar for UK, France and Germany

- Facebook advertising strategy

- Partnership with the Prince Park Tower Hotel, Tokyo

- Trigger email campaign