ENHANCEMENT - Tighten up vertical spacing on vf-intro

[khawkins98]

A recurring theme in feedback has been there's "too much space" under the vf-intro.

I think this goes beyond a typical fear of whitespace and reflects that many users are browsing with either lower resolution desktops, or effective lower resolutions on hidpi devices. (spacing on mobile devices being a slightly different consideration with touch scroll vs mouse scroll).

(I think this was also an issue that came up in Mark's last days but we never actioned)

So two parts:

1. Testing my theory

I had a look at the analytics:

https://docs.google.com/spreadsheets/d/1Hdsu_A5DiERwwlM2G4Mf8Kb9VeiYErPmPg461Bg6h4s/edit#gid=1909592782

That's effectively 50% of users have a browser height of less than 850px and 50% have 1368px widths of the browser window.

Which makes for a pretty reasonable test target:

2. So what do we do?

If we remove the vf-into specific margins for .vf-intro and . vf-intro__heading we still get the reasonable embl-grid defaults:

And/or we could also make this a responsive thing (smaller browsers get less spacing on vf-intro), but that might be adding unneeded complexity.

3. Bonus

We should probably add this info on browser sizes to our test notes and documentation.

[auto-comment[bot]]

Thank you for raising an issue. We will try and get back to you as soon as possible. Please make sure you have given us as much context as possible.

[sturobson]

Perhaps we need to make the logo smaller

[sturobson]

Actually. On this page the logo should be smaller.

[sturobson]

Another thing with this is the idea that the parent should be distributing the space on the component rather than the component doing it itself.

This way, in another scenario, we could have vf-intro extremely close to the next container or far apart.

[khawkins98]

This way, in another scenario, we could have vf-intro extremely close to the next container or far apart.

Yeah, I think that's it. There are some cases when the extra spacing looks really good, but in many places the extra padding on vf-intro makes the page look truncated on non-large screens.

[sturobson]

are there any live urls for this I can go through?

[khawkins98]

Here are a few where tighter spacing would be helpful, or the spacing between vf-intro__heading and vf-lede makes things look detached.

• https://www.embl.org/sites/
• https://wwwdev.embl.org/partnerships/local/molecular-medicine-partnership-unit/
• https://wwwdev.embl.org/press/ (other issues here too, but the default spacing doesn't help)
• https://www.embl.org/topics/cells/ -- the image here would ideally be closer to the intro text and not look like a "different thing"
• https://www.embl.org/research/units/cell-biology-biophysics/ -- similar as the above, the text after the vf-intro is part of the same flow and shouldn't be so far away.

Here we could use vf-intro on the articles but the spacing was "too much":

• https://wwwdev.embl.org/news/lab-matters/corona-updates/

In general, most of these would be better if vf-intro adapted to an "article" type page when there is one flow of content and not many containers about different things.

[khawkins98]

In general it also feels weird that the vf-intro__heading is closer to the breadcrumbs that vf-lede.

[khawkins98]

Link to related sketch file with the vf-intro in a content environment: https://share.goabstract.com/da57cc83-2191-4746-9099-f5eedbf1b9ea

[khawkins98]

A page Filipe is working on reminded me of this ticket:

https://wwwdev.embl.org/topics/transversal-research-themes/

There may be a relationship with the idea discussed for the vf-hero in #1133

[sturobson]

looking at the mark-up of the page - isn't it this also due to vf-intro (what I'd expect to be a brief introduction to the page) is needing to be three paragraphs long here rather than the one that vf-intro allows -- hence the spacing?

[sturobson]

Coming back to this - the example for Transversal research themes the vf-intro page does allow for multiple normal paragraphs in the .yml file.

vf_intro_text:
  - We now have the tools and technologies to explore these processes, allowing us to understand life in its natural context from the level of molecules to whole ecosystems. This new understanding will be critically important if we are to tackle societal challenges such as environmental degradation and loss of biodiversity, climate change, and threats to human health such as the emergence of new epidemics.
  - EMBL’s new transversal research themes will enable us to realise this vision of understanding life in context. The transversal research themes will be highly interdisciplinary and will encourage dynamic internal and external collaborations. These themes will enable transformative discoveries by bringing together experts in fields such as ecology, epidemiology, toxicology, zoology, population genetics, engineering, and mathematical theory. There will be strong support for building collaborations within each theme, as well as with the wider scientific community, not only to enable scientific discovery but also to build these themes across the EMBL sites.

But this does throw up the problem that the vf-intro component could effectively become 'the whole page' rather than a single container.

The vf-intro container has or allows for:

• it's own heading vf-intro__heading
• a vf-lede component
• it's own vf-intro__text component of which there can be multiples.

For something like the page example in @khawkins98's last post we can easily get to a point where the vf-intro is most of the page.

Because of that I have been looking at how we can:

• easily split out the vf-intro so it's just a heading (and a subheading as 'Understanding life in the context of it's environment' isn't really a lede paragraph.
• look at the vertical spacing of the vf-intro container
• look at the internal 'stack` spacing of components so it works for various solutions:
  • just a 'page' heading
  • a heading and subheading
  • a heading, subheading, lede intro
  • a heading and lede intro
  • all of the above with a paragraph of text.

We need to set guidelines as to how much content is or is not a vf-intro. From the example in the last comment it feels like it's more of a 'heading and subheading' intro with the text being it's own container.

[sturobson]

Here's where I'm at with including a subheading component to the container.

[sturobson]

Updates to the intro are now live - so I’m closing this.