{"id":3808,"date":"2021-01-20T17:47:21","date_gmt":"2021-01-20T17:47:21","guid":{"rendered":"https:\/\/www.embl.org\/about\/info\/communications\/?p=3808"},"modified":"2021-01-20T17:47:22","modified_gmt":"2021-01-20T17:47:22","slug":"accelerating-one-embl-org","status":"publish","type":"post","link":"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2021\/01\/accelerating-one-embl-org\/","title":{"rendered":"Accelerating one EMBL.org"},"content":{"rendered":"\n

On 4 December 2020 the new EMBL.org received a package of major refinement. Driven by stakeholder desire for a shorter version of the page, the outcome is greater focus on EMBL\u2019s mission areas.<\/p>\n\n\n\n\n\n

But this is more than a cosmetic overhaul, it has further ramification \u2014 and the new EMBL.org architecture has much potential for One EMBL.<\/p>\n\n\n\n

First: Here\u2019s how we got there<\/strong><\/h2>\n\n\n\n

A major focus was content, to shorten the length of the page and remove general-purpose content to focus on EMBL\u2019s mission areas and major offerings. <\/p>\n\n\n\n

A look at some changes:<\/p>\n\n\n\n

Tightened text<\/h3>\n\n\n\n
\n
\n\n

<\/p>\n\n\n\n

\n\n\"\"
Descriptive text was reduced, for example on these mission areas.<\/figcaption>\n\n<\/figure>\n<\/div>\n<\/div>\n\n\n
\n
\n\n

<\/p>\n\n\n\n

\n\n\"\"\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n


More focused links<\/h3>\n\n\n\n
\n
\n\n
\"\"\/
We reduced the number of \u201cdeep links\u201d, for example on the Jobs container.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n\n\n
\n
\n\n
\"\"

After.

<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

A more compact layout<\/h3>\n\n\n\n
\n
\n\n
\"\"
We removed the use of \u201clayout tabs\u201d on the left to create a tighter layout. These tabs are useful when navigating long content as they act as file folio tabs, but for a major landing page like EMBL.org a more impactful presence was desired.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n\n\n
\n
\n\n
\"\"
After.<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Some content was removed<\/h3>\n\n\n\n
\n
\n\n
\"\"
The number of content containers on the homepage is reduced, for example the use of a search and explore box on the homepage was removed in favour of navigating through the major content sections. Some \u201cgeneral audience\u201d content like the topics container is also removed:<\/em><\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n<\/div>\n<\/div>\n\n\n

\n
\n\n
\"\"
Search was also removed from the homepage.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

New top-level navigation<\/h3>\n\n\n\n
\n
\n\n
\"\"
In addition, a horizontal navigation strip is now beneath the EMBL logo to provide quicker access to top destinations.<\/em><\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n<\/div>\n<\/div>\n\n\n

\n
\n\n
\"\"
After.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

But these edits were more than just text.<\/p>\n\n\n\n

Crossing the white space wall<\/strong><\/h2>\n\n\n\n

These changes were not done in isolation. Content changes were paired with visual modifications to reduce the amount of white space, refine typography and improve functional elements like buttons, navigation and search.<\/p>\n\n\n\n

Less padding inside elements<\/h3>\n\n\n\n
\n
\n\n
\"\"
What is called the \u201chero\u201d container sits atop many pages. The vertical padding is reduced and the component modified to accommodate more meaningful content.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n\n\n
\n
\n\n
\"\"
After. It both accommodates more content and requires less space.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Cleaner presentation<\/h3>\n\n\n\n
\n
\n\n
\"\"
Other elements have reduced padding and a matured visual look, like these \u201ccards\u201d.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n\n\n
\n
\n\n
\"\"
After.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Less spacing between elements<\/h3>\n\n\n\n
\n
\n\n
\"\"
White space is reduced between and around elements in general; note the gap between these containers.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n\n\n
\n
\n\n
\"\"
After.<\/figcaption><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

These visual changes were made in consultation with EMBL’s design teams and stakeholders and impact beyond the EMBL.org \u201ccorporate\u201d pages.<\/p>\n\n\n\n

\n
\n\n

The changes integrate into a shared design system tool that we call the Visual Framework 2.0<\/a>. The tooling is used across EMBL.org for its jobs, news, microsites, as well as with non-EMBL.org projects that might share only portions of the EMBL.org brand, such as the EMBL-EBI Training prototype and COVID19DataPortal.org<\/a>. <\/p>\n\n<\/div>\n<\/div>\n\n\n

\n
\n\n
\n

\n Did you know? <\/h3> \n

Today\u2019s Visual Framework 2.0 began its 1.x life at EMBL-EBI<\/a> where we learned many lessons about the needs of our community.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Not just An EMBL.org, but One EMBL<\/strong><\/h2>\n\n\n\n

The Visual Framework means all sites benefit from the work to improve visuals, functionality and tighten white space \u2014 but it also means that we remain cohesive as One EMBL<\/em>.<\/p>\n\n\n\n

\"\"\/
A slide from the December 2020 Visual Framework consultation showing the Visual Framework across a range of sites with distinct branding, technology and goals \u2014 but still cohesive and benefiting together.<\/em><\/figcaption><\/figure>\n\n\n\n

The Visual Framework is a service that is no small undertaking, but it is one that will allow us to make a better EMBL.org and forge a more unified EMBL across its collaborations \u2014 and allow us to show how EMBL leads in the life sciences in online functionality.<\/p>\n\n\n\n

\n

\n Why a Visual Framework? <\/h3> \n

<\/p>\n

The Visual Framework is a front-end toolkit allows us to quickly and collaboratively build performant and consistent life science websites regardless of branding or technical solution.<\/p>\n

<\/p>\n

In short, it allows us to build better websites faster.<\/p>\n

<\/p>\n

It does so by reusable web styling (CSS<\/a>), some interactivity (JavaScript<\/a>) and templates (both technical and guidance).<\/p>\n

<\/p>\n

A key unique feature is flexibility regardless if a site need use the EMBL logo, different colours or different technical solutions. It has been conceptualized with considerations around challenges when cheating life science websites.<\/p>\n

<\/p>\n

Compared with common web tools like Twitter\u2019s Bootstrap, is the Visual Framework won\u2019t break your existing functionality. That means we can build a highly focused EMBL.org and that we won\u2019t break the technical functionality of an existing service that might be using Google\u2019s Angular and Bootstrap.<\/p>\n

<\/p>\n<\/div>\n\n\n

Reuse of our common Visual Framework tooling means we\u2019re able to accelerate the development of other projects and get a greater return on the investment made. It also allows our collaborations to share their lessons learned to improve the technical and user experience functionality of forms, buttons, tabs and navigation.<\/p>\n\n\n\n

In an open-source and open science fashion, what we do and learn creates a holistic circle to allow our peers to help us.<\/p>\n\n\n\n

The Visual Framework is another way for EMBL to leverage its role as Europe\u2019s leading life sciences laboratory by helping the community collaboratively develop better services more efficiently. <\/p>\n\n\n\n

This is good, but we\u2019re not done yet<\/h2>\n\n\n\n

Content changes will evolve as EMBL\u2019s needs change and we can better measure our effectiveness \u2014 and the Communications Digital Team is still very busy migrating content and functionality from the existing EMBL corporate websites.<\/p>\n\n\n\n

The Visual Framework will also continue to grow as our needs evolve and web technology matures.<\/p>\n\n\n\n

Both the EMBL.org platform and the Visual Framework technology provide us with the opportunity and technical means to communicate and present EMBL as a cohesive single global leader. <\/p>\n\n\n\n

Keep an eye on EMBL.org<\/a>, this blog<\/a> and the Visual Framework<\/a> as we continue on this journey.<\/p>\n","protected":false},"excerpt":{"rendered":"

On 4 December 2020 the new EMBL.org received a package of major refinement. Driven by stakeholder desire for a shorter version of the page, the outcome is greater focus on EMBL\u2019s mission areas.<\/p>\n","protected":false},"author":5,"featured_media":3809,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1832],"tags":[457,462],"embl_taxonomy":[],"class_list":["post-3808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital","tag-embl-org","tag-visual-framework"],"acf":[],"embl_taxonomy_terms":[],"featured_image_src":"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2021\/01\/emblorg-revision.gif","_links":{"self":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/3808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/comments?post=3808"}],"version-history":[{"count":57,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/3808\/revisions"}],"predecessor-version":[{"id":7784,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/3808\/revisions\/7784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media\/3809"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media?parent=3808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/categories?post=3808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/tags?post=3808"},{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/embl_taxonomy?post=3808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}