MDN/Development/Redesign/Whitespace

Reducing White Space in the MDN Design

Add screenshots with notes here

These are samples of annotated screenshots. More detail would be welcome (feel free to replace these with better examples)

Homepage

Landing Page

Also, reduce whitespace between definition list items (e.g., under References).

Zone Article

Article

Add notes about where we can remove white space here

Comments from Jean-Yves

There are a few people telling us that there are too much "white space". My interpretation of this is not that "there are too much white space everywhere", though there are some valuable real-estate unused, but also that it is difficult to see easily the boundaries of the article.

Re: white space, there are plenty of places where it is redundant with other means to distinguish different sections of the page; I tried to remove it from there, but keep it in place where it is used to stress the distinction. Also at some places, I change the background color, without removing whitespace, as removing them didn't bring anything to the real problem there, stressing different sections of the page.

Here is an attempt to solve this. I have labeled the different changes so that we can easily refer to them individually.

A.

B.

C.

D.

E.

F.

G.

Comment from Jeremie

Here is a before/after example for articles:

In the second image check the line spacing at the top (seriously shrink) and the position of the TOC.