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

19 Oct 2016

DADIs - Best Use of VR nomination

We're thrilled to announce that our Fantasy Flight VR experience for Thomas Cook Airlines has been nominated for Best Use of VR in the 2016 DADI awards. We are up against some stiff competition with campaigns for Google, Virgin and Reebok, so let's get our game faces on and see what happens on awards night, Oct 19th!

Thomas Cook Airlines' engaged Catch as their social agency of record, and in March 2016 we launched a new activation for them, "Fantasy Flight". It brings to life 360-degree exploration that lets you try before you fly.

www.thomascookairlines.com/fantasyflight

Best experienced on mobile devices via the YouTube app, viewers change their perspective of Thomas Cook Airlines’ refurbished premium and economy class cabins in real-time by moving their device around. The video features real pilots and cabin crew going about their normal duties while the cabin comes to life with characters connected to three new routes launching 2016.

If the user explores thoroughly they can find clues to three of the airline’s newest destinations which could win them a £3,000 Los Angeles holiday.

“We’ve used recently-developed 360-degree video technology to open the doors of our great new cabins on our Airbus A330 fleet.”

Tom Morely, Senior Marketing Manager Thomas Cook Airlines

Founding Partner of Catch, Jonathan Smith, said: “2016 is set to be Virtual Reality’s breakout year. This new technology is perfectly placed to highlight Thomas Cook Airlines’ new routes and high-end A330 aircraft. We used three GoPro cameras assembled to capture an entire spherical perspective of the cabin scene, creating an innovative experience. We had a lot of fun with a 50+ strong crew of actors, airline staff and impersonators to bring the new destinations into the cabin, as well as providing clues which viewers can find to enter a competition to win a holiday to LA.”

Senior Marketing Manager for Thomas Cook Airlines, Tom Morey, said: “We’ve used recently-developed 360-degree video technology to open the doors of our great new cabins on our Airbus A330 fleet."

“By summer this year, we’ll be operating seven of these long haul aircraft on direct flights from Manchester to Miami, New York, Boston, Los Angeles, Orlando and Las Vegas. Customers don’t have to wait and see how it looks, they can find out right now by interacting with these amazing videos.”

Join the fun on social at #TCAFantasyFlight www.facebook.com/ThomascookairlinesUK or dive straight into the 360-degree experience at www.thomascookairlines.com/fantasyflight

Related news and work

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com