1450922 - [FrontEnd] Improve homepage layout for hacks and help MDN

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Design, enhancement, P1)

Description

[Schalk Neethling [:espressive]]

Attachment: wide-viewport.png

As discussed some in my front-end plan for 2018, I would recommend that we make a small tweak to the homepage layout for MDN Web Docs. 

The current Help improve MDN component that is displayed next to the hacks feed on the homepage feels like duplicate content that is already available at the bottom of the same page. It also generally feels out of place, hanging there in seemingly the middle of nowhere ;) 

The image used, also adds 13.7kb and 223ms in image load time to the overall load time of the homepage. I would vote to remove this component if the interaction is low, and cleanup the content at the bottom of the page.

For wide viewports, we should also move it up, so it is side by side with the Hacks blog feed, dropping to below the feed on tablet and lower.

See attached screen shots.

Comment 1

[Schalk Neethling [:espressive]]

Attachment: tablet-and-lower.png

Comment 2

[Florian Scholz (Open Web Docs)]

Kadir, please provide feedback on these proposals.

Comment 3

[Schalk Neethling [:espressive]]

Attachment: Screen Shot 2018-04-22 at 17.38.26.png

Another reason to make this change. This from a Lighthouse performance audit. We do not even have to be concerned about lazy-loading as we will not load the image at all.

Comment 4

[John Whitlock [:jwhitlock]]

Schalk, I think Kadir has no preference on this change.

The desktop layout looks good to me. On the tablet size, I prefer the current layout of the survey callout taking the full width

Would you like to open a pull request with the suggested changes?

Comment 5

[Schalk Neethling [:espressive]]

(In reply to John Whitlock [:jwhitlock] from comment #4)
> Schalk, I think Kadir has no preference on this change.
> 
> The desktop layout looks good to me. On the tablet size, I prefer the
> current layout of the survey callout taking the full width
> 
> Would you like to open a pull request with the suggested changes?

Sure thing. Will work on that tomorrow.

Comment 6

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/74751c12aa2c4aac91f93a01a24920e29e10a260
bug 1450922: Replace Get Involved MDN banner

Replace the Get Involved MDN banner with the Help improve MDN section.
This removes a large image from the homepage, promotes the "Help improve
MDN" links, and de-emphasizes the locale count, which will go down soon.

https://github.com/mozilla/kuma/commit/97b9183c81ee4244daf7c9108be3a7b5ca32a1cb
bug 1450922: Remove remaining community stats code

This code populated the contributor and locale count, which was removed
from the home page.

https://github.com/mozilla/kuma/commit/1051e28f6c1628218c9559ae086e4552dc533c91
Merge pull request #4912 from schalkneethling/bug1450922-improve-homepage-layout-hacks-help-mdn

bug 1450922: improve homepage layout for hacks and contribute sections

Comment 7

[John Whitlock [:jwhitlock]]

New layout deployed to production

Comment 8

[Schalk Neethling [:espressive]]

(In reply to John Whitlock [:jwhitlock] from comment #7)
> New layout deployed to production

Confirmed, and works as expected.