945731 - Update responsive layout for MDN homepage

Status: RESOLVED FIXED

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

Description

[Holly Habstritt Gaal [:Habber]]

What did you do?
================
1. 
2. 
3. 

What happened?
==============
Responsive layout is working, but content below search field requires users to scroll excessively in order to reach valuable content. 

What should have happened?
==========================
Responsive layout should be designed so that we can get valuable content higher on the page and more accessible for mobile users (I'm focusing on handset, not tablet), reduce scrolling in order to view all content, and generally make the page it more usable.

Is there anything else we should know?
======================================
For instance, Hack blogs, demos, and these 3 blocks (http://cl.ly/image/380r2l2P460I) take up a lot of space.

Solutions (I can sketch out a wireframe if necessary when I have more time)
- reduce font size or omit headline altogether for small viewport size. 
- only show latest hacks post + link to hacks. (or multiple and swipe left to right to see more)
- only show one demo at a time and swipe left to right to see more
- reduce size of these 3 blocks and/or have a slimmer height to them (http://cl.ly/image/1W1A0m0U2913)

Comment 1

[Jean-Yves Perrier [:teoli]]

I like very much the linearization that David did on the handset version: it solved all overlapping of widgets and for the first time, the MDN is usable on handset.

For a MVP, it is an awesome achievement.

I do agree with Holly that we can move now to a second phase where we should optimize the result for the user (Content first, or more precisely, Useful content first).

I will make a few proposals in the next few comments. But first my comments about Holly's proposal:
"- only show one demo at a time and swipe left to right to see more
 - reduce size of these 3 blocks and/or have a slimmer height to them"
I'm 100% for these; the demo image, with the correct ratio should be full-width (and responsive). I'm also fine with back/forward buttons rather than swipe left/right if technically too complex.

"- reduce font size or omit headline altogether for small viewport size."
I'm all for omitting the slogan, it is useless for returning users, and of very little use for newcomer anyway. On handset, we are targeting returning users anyway.

Comment 2

[Jean-Yves Perrier [:teoli]]

Attachment: Current status (top) with proposed modifications

For the top of the page, I propose the following changes:
A. The MDN logo should have only the logo or logo+MDN if enough place so that the login information can be put on the same line. In case of (very) long username, we shouldn't have overlapping and we should fall back to linearization (like now).
B. The menu should be closed by default. It is common practice on handset optimized layouts, and therefore not a surprise for the user.
C. As proposed by Holly too, the slogan should just be removed.
D. The second full-width search widgets (yes we have two now at this resolution!) should be removed.

Comment 3

[Jean-Yves Perrier [:teoli]]

Attachment: Current problem with pop-up menus

Note that the Menu must be refactored anyway as the pop-up is barely usable right now at these sizes (see attachment). So doing B. at the same time is likely a good idea.

Comment 4

[Jean-Yves Perrier [:teoli]]

Attachment: Alternative proposal for HMO snippets

Although I'm perfectly fine with Holly's proposal about the Hacks links, here is another proposal (see attachment).

E. Limit text extract to three lines with an ellipsis at the end.
F. As the signature is smaller and italics, we can get rid of the space before it without impairing readability.
G. The separation line is useless, the signature, smaller font and italics, is enough to mark the separation to the next article (which begins with a link). Of course enough space (24px?) must be kept between the article.
H. (not drawn) reduce the amount of articles snippets from 5 to 3.

Note that with these, we can more or less have two articles in the current space of one.

Comment 5

[Jean-Yves Perrier [:teoli]]

Attachment: Misc changes (part 1)

I. "Demos" should be aligned (left) with "See". The two-line text should be centered with the icon. This may happen on other titles in the page too.
J. MDN Demo Studio and other similar links are not aligned, their right position depends of the title length. It shouldn't.
K. By making the Get Involved box full-width, we can remove the bottom whitespace which is useless then.

Comment 6

[Jean-Yves Perrier [:teoli]]

Attachment: Misc changes (part 2)

I. See comment 5.
L. The list items are sometimes separated by a line, sometimes not. It is a bit odd. I think a plain bullet list here should be ok.
M. I find that the footer doesn't stand out enough. Maybe making it transparent (and making the squared blue box appear as background) would help here. It will recall the header too.

(That's all folks :-))

Comment 8

[[github robot]]

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

https://github.com/mozilla/kuma/commit/495492915746d98641bc3ed7419f851421be0c87
fix bug 945731 - Last homepage responsive updates

https://github.com/mozilla/kuma/commit/5e8ca83e6dd116970be628f71e2c08573fd15387
Merge pull request #2249 from darkwing/home-responsive-945731

fix bug 945731 - Last homepage responsive updates