926312 - The content column is too narrow

Status: RESOLVED DUPLICATE of bug 913399

(developer.mozilla.org Graveyard :: Demo Studio / Dev Derby, defect)

Description

[Jean-Yves Perrier [:teoli]]

The current theme is not working (= hiding content) on a MacBook Air 10", which is not a small screen.

This is a unanimously negative feedback we got. Dozen of people complained about it.

IMO, the problem is the almost useless third column. Tags should be moved back to the bottom (nobody ever click on them anyway), the ToC should be transformed in something else (an always-visible widget floating on the bottom right of the content column?).

The third column doesn't exists in the zone landing page, btw.

Comment 1

[Chris Mills [:cmills]]

In our redesign meeting on the 15th October, we had a detailed discussion about the state of the three column layout for the MDN redesign. We have received a large amount of feedback saying that it looks good, but doesn't work on non-large screens (really it starts to look cramped at 15" and below, and it starts to look terrible at 10-12"). So we'd like to suggest that we go for a different layout for such screen widths.

At this point we'd like a two column layout, keeping the left hand column containing the quicklinks, reviews needed checkboxes, etc. and the main content column as is, but then getting rid of the right hand TOC column and making it available in some other way. We would be happy with a top toggle menu or left hidden menu, e.g.

https://developer.mozilla.org/en-US/Apps/Design/Responsive_Navigation_Patterns#Pattern_1.3A_Top_toggle_menu
https://developer.mozilla.org/en-US/Apps/Design/Responsive_Navigation_Patterns#Pattern_3.3A_Left_hidden_menu

And these patterns would work well at narrower screen sizes too.

As for the tags, well, people rarely click on tags in our experience, so perhaps these could go somewhere else, like at the bottom of the article?

Comment 2

[Chris Mills [:cmills]]

> below, and it starts to look terrible at 10-12"). So we'd like to suggest

Well, 12" or so, basically before the first media query kicks in.

Comment 3

[David Walsh :davidwalsh]

As of this moment, at the 1024 level, the TOC goes above the article itself.  If you want that to happen sooner, let me know the screen width you desire.

Comment 4

[Eric Shepherd [:sheppy]]

On mobile, we could move all the stuff normally in sidebars into pop-out boxes accessed from some sort of a button bar or something.

Comment 5

[Chris Mills [:cmills]]

(In reply to David Walsh :davidwalsh from comment #3)
> As of this moment, at the 1024 level, the TOC goes above the article itself.
> If you want that to happen sooner, let me know the screen width you desire.

Well, this is not terrible, but not a great solution either. The content really needs to be at the top of the page, because readers want to scan the top of pages quickly, and not have to scroll down with each new page. This is especially problematic on reference pages, and when reading on mobile, where the TOC is really next to useless. People really hate long TOCs to scroll past to get to the content.

Comment 6

[David Walsh :davidwalsh]

On mobile, not only is the TOC above the content, but it has a "v" arrow to toggle it.  The left column gets pushed below the content at 1024 as well.

We are maximizing the content width at this point.

Comment 7

[Chris Mills [:cmills]]

(In reply to David Walsh :davidwalsh from comment #6)
> On mobile, not only is the TOC above the content, but it has a "v" arrow to
> toggle it.  The left column gets pushed below the content at 1024 as well.

Ah - I didn't notice the toggle arrow before, as it is so faint. Can we at least make the toggle arrow a little more visible, and minimise the TOC by default when on narrower screens?

Then on slightly wider screens (12-15"), we could have that kinda deal, plus the other two columns put side by side, for a two column layout.

At a later date, we could then perhaps style this into something a bit nicer looking, such as a top toggle menu.

Comment 8

[Jean-Yves Perrier [:teoli]]

Note that we need to move the TOC (without losing vertical space), and the tags too. Else we won't solve the problem.

Anyway we have the following points:

1. For 10" to 15" screens, the references do not lead to a good UX. We have to be able to have a 900-1100px central column.
2. Quicklinks are essential navigation tools. They must be visible by default.
3. We should not add anything making the summary of the article go more down as else it won't show without scrolling on 10" screens.

We need a layout that matches these 3 points. 

One proposal is to have a floating widget for the TOC that can be placed elsewhere, more tags to the quicklinks columns and remove the attachment link. Then to shrink or remove the right column.

Other proposals welcome.

Comment 9

[Eric Shepherd [:sheppy]]

Another thought is that we could have just one sidebar with a toggle to switch between displaying the quicklinks/zone nav and the TOC.

Comment 10

[Jean-Yves Perrier [:teoli]]

Also not that we need a coherence in where the tags appear on other page. There is an open bug to add them to zone landing pages (as this is needed for the search).

Comment 11

[Jean-Yves Perrier [:teoli]]

Attachment: Teoli's proposal

Here is a proposal. More food for thought as I know you guys are far better than I in this, but something that matches the 3 criteria.

Comment 12

[Eric Shepherd [:sheppy]]

Attachment: Mockup of desktop display

Here's a mockup of a proposal for a revised layout. This eliminates the right sidebar completely, moving all content to the left side.

The left sidebar and header are fixed on screen. (Alternately, we could have the sidebar scroll up, but only until it bumps the top edge -- that would let us have the header scroll away, which we probably need).

At the bottom of the sidebar are the attachment and tag information. The remainder of the siebar contains the zone navigation, quicklinks, or TOC. A row of buttons lets you select which of those you're currently viewing.

This should resolve our width issues and I suspect increase usability as well, by reducing clutter and ensuring that metadata remains available easily.

Comment 13

[hhabstritt]

We discussed this in the Dev Roadmap meetings yesterday. I will take the proposals suggested in this bug and take a look at a solution over the weekend. I'll propose something next week. Thanks for all the feedback!