Immersive Design Review

[JamieB-gu]

The new immersive layout comes with a number of new design features:

1. It derives a lot from the dotcom designs, and so may look different from the previous old template designs.
2. It uses the Guardian Grid rules laid out in Source (via the new grid module), and updates any elements taken from the existing dotcom designs to align to this grid when they diverge.
3. It introduces an updated layout for the related content and footer at the bottom of the article, which differs from the way these sections look on other AR articles.

Before we release immersive articles to (Beta) users it would be a good idea for Design to review them to make sure they're acceptable, and suggest any necessary changes.

[JamieB-gu]

List of things to tweak:

1. On the headline, make sure that the top padding matches the left padding (look at the current app designs for an example).
2. On the standfirst, make sure that the top padding matches the left padding.
3. Make sure that the standfirst text matches the width of the headline text.
4. Drop the related content heading into the left column on wider breakdpoints.
5. Check that the headline doesn't get pushed too far below the fold by the app chrome.

[JamieB-gu]

@ajbreuer you were right about the headline being cropped! With the app chrome included the new immersives looked like the screenshot on the left below. I've reduced the main media height and now we get much more of the headline text, as seen on the right. I can reduce it further if needed?

These were taken on an iPhone 13 Pro (same dimensions as a 12, 12 Pro and 13).

Before	After

[ajbreuer]

@ajbreuer you were right about the headline being cropped! With the app chrome included the new immersives looked like the screenshot on the left below. I've reduced the main media height and now we get much more of the headline text, as seen on the right. I can reduce it further if needed?

These were taken on an iPhone 13 Pro (same dimensions as a 12, 12 Pro and 13).

Before After

Thanks @JamieB-gu I think we could reduce it a bit more, maybe one more line of headline

[JamieB-gu]

@ajbreuer I've dropped it down a bit further. Here are some examples with different length headlines.

Four Lines	Five Lines	Six Lines

[ajbreuer]

@ajbreuer I've dropped it down a bit further. Here are some examples with different length headlines.

Four Lines Five Lines Six Lines

Thats great! thanks @JamieB-gu

[JamieB-gu]

All but one of the above points have been addressed in #5690. The remaining point, (4), will be addressed as part of this milestone: https://github.com/guardian/dotcom-rendering/milestone/58