EMBL Communications

Informing, inspiring, and engaging society with EMBL’s research, services and training

Enabling a more dynamic EMBL online

The EMBL Corporate Content Platform + a Visual Framework

For websites and web services across EMBL, a set of foundational improvements is enabling more rapid, flexible and effective user journeys. For many, those changes are most evident in the new EMBL.org, but that’s only a partial showcase of what’s now possible. 

While many have seen some of these new tools, very few know about all of them, what they can facilitate or, perhaps most importantly, why we made them.

For those who don’t know me, I’m Ken Hawkins and Web Front End Lead for EMBL — which means I’ve been involved in a broad range of web activities across the organisation, from corporate content to training to internal services to collaborations.

With that background, I’d like to talk a bit about our four-year journey of why we made these new tools — and what you can now do on EMBL.org and all EMBL websites and services.

Chapter 1: Why

To make nearly any website, you need four basic types of things:

  • Content: what you want to communicate
  • Design: how it should look
  • Function: what users should be able to do 
  • Technology: how you actually get these things online

Back in 2017, a group of us from across EMBL (EMBL-EBI Web Development, EMBL-EBI External Relations, EMBL Communication and EMBL IT) knew a change in technology was coming:

  • EMBL.de used the already out-of-support Fiona CMS version 6. 
  • EBI.ac.uk’s solution of Drupal 7 would soon approach its end-of-life and was also having issues easily supporting EMBL-EBI’s broad needs.

But more importantly, we knew the technical and content tooling wasn’t up to the job of what  EMBL Communications and EMBL-EBI’s External Relations wanted — nor were they up to the job of facilitating the range of activities that EMBL does online.

Importantly, the new technical tooling would also need to allow EMBL-EBI to more closely integrate with technical tooling at EMBL Heidelberg, as well as encourage greater “One EMBL” alignment.

Between content, design and functional abilities, we would not succeed by simply updating to a new website CMS. 

The “we” involved is a broad range of technical, design, user experience and content professionals from across EMBL that had an understanding of corporate and online resource needs from across the organisation. Likewise, these groups also had the remit of ensuring the organisation’s web tooling would be able to provide the needed functionality.

We knew what EMBL was asking for, next we needed to find out to facilitate it.

Chapter 2: What

After a series of collaborations and prototypes, we settled on an answer that split responsibilities across four areas (not teams):

  1. Data: a new “Enterprise Data Resource” that was the single source of truth for all enterprise data … staff, publications, phone numbers, teams and so on.
  2. Hosting: all EMBL and EMBL-EBI “corporate” web hosting would be provided by EMBL-EBI’s specialised web hosting data centres.
  3. Content: a new “contentHub” that would distribute all reusable content (website taxonomy, news articles, publications, jobs, and so on) and would support mapping of item relationships to the Enterprise Data Resource (“This article is about this team”)
  4. Web display: the Visual Framework as client and display patterns for the EMBL look and feel, as well as integrating with contetHub APIs to display relevant content (“Show me 4 news articles about this team”)

With this approach, we are able to separate concerns and allow each part of the organisation to specialise (or override) as required — making it a solution flexible enough for EMBL.org, EBI.ac.uk and the many services and collaborations.

Chapter 3: How

In 2018, these groups started regular meetings to understand the scope of the challenge and how we could best provide a platform that would survive any singular change in technology.

12 July 2018: one of our first in-person gatherings between all teams to discuss how “all the things” would work together. Note that box labelled “truth”, such a glorious thing.

Here’s how that was done from the server up to the screen.

Organisational information

  • Organisational “truth” about staff, publications, groups, jobs and the similar to be provided by Heidelberg IT as an “Enterprise Data Resource” (EDR). This information has no formatted look to it, only structured data that could be consumed by web services.

Web hosting

  • Web hosting to be provided by EMBL-EBI who already had tooling in place to programmatically provision web servers with automatic failover support across two data centres. 
  • A microsite platform of modular and configuration-managed WordPress microsites would be maintained by EMBL-EBI Web Development, this would empower individual group and team leaders with a high amount of freedom to present the content they believe is most important. 
  • Highly flexible static HTML sites generated by Eleventy would also be created by EMBL Communication’s Digital Team and deployed by EMBL-EBI Web Development. This would ensure that any area of the website that required a high degree of flexibility could achieve it (the homepage, search, jobs, events and so on).

Web content 

  • Structured taxonomies about EMBL’s activities (where are EMBL’s sites, what are the research clusters, important themes and so on) would be curated by EMBL Communications.
  • Web tooling is provided by EMBL-EBI Web Development in a malleable content worker tool called the “contentHub” that pulls information from the Enterprise Data Resource and is able to mix it with other web content like news, notifications, team blogs and the structured taxonomies. This tool would consume, arrange and distribute content by a set of publicly available endpoints. That is: “show three research articles about COVID-19” or “show a list of all staff working on epigenetics” 

Web visuals and behaviour

  • The new look and feel would be done by the then EMBL Communications’ Digital Team lead, Mark Boulton in collaboration with EMBL Communications’ Design Team and the wider organisation. 
  • User Experience guidance would be provided by collaborating with EMBL-EBI Web Development’s group of UX professionals.
  • The Visual Framework version 2.0 would be a highly flexible technical tool to provide flexibility to provide a modular delivery of the EMBL look and feel as well as an interface to consume the contentHub, and in turn data from the Enterprise Data Resource.

Chapter 4: Now

Over the following two years, these new systems and tools were built out. A new EMBL.org launched in early 2020, and during the following 18 months, the systems continued to mature. 

While there is still a long list of features to build and bugs to solve, the new tooling provides a broad range of new features:

  • a contentHub that interfaces with the Enterprise Data Resource to provide a singular truth and dynamic content.
  • WordPress microsites that integrate with the Visual Framework and contentHub to both consume and publish content.
  • A WordPress-based “Editor Hub” to easily build rich page layouts that integrate with the Visual Framework and contentHub data.
  • The Visual Framework 2 to rapidly build websites that look like EMBL and function consistently and well for users. You might also see this series of slides and talks about the role and importance of the VF.
  • A taxonomy of the organization online that defines what activities EMBL does and at what URLs they exist, in addition to supplying related information (tip: it’s an ontology)

Here’s a little visual tour at some of what that all makes possible:

An EMBL group site powered by the microsite platform hosted at EMBL-EBI.
www.EMBL.org powered by the Visual Framework, the Eleventy static-site-generator and hosted at EMBL-EBI.
The forthcoming look of the EBI.ac.uk homepage powered by the same tooling as EMBL.org.
A preview of EMB-EBI’s new people landing page.
The COVID-19 Data Portal, using the Visual Framework for consistent behaviour, but still has complete freedom over the aesthetic look and technical tooling.
AlphaFold caries its own custom look and tooling, but integrates seamlessly with existing EBI.ac.uk components.
Science in School is a custom look but is able to leverage the WordPress microsite tooling for easy page building and integration with the Visual Framework.
An “Editor Hub” allows non-technical persons to easily build page layouts with WordPress to be used on any Visual Framework-powered site.
The Visual Framework is the most user-facing of all the tools created, empowering EMBL but also being open source to leverage our role as a global leader in the life sciences.

Chapter 5: Passing the torch

On a personal note, my EMBL contract ends this December. While I’ll no longer be part of driving these projects forward, I’ll still take pride in having been part of the process and watching it continue. 

What’s best about these solutions is what’s between them: flexibility for all EMBL sites, services and collaborations — without having to give up cohesiveness with One EMBL.