920080 - MDN redesign: looks really bad at less than 480px wide

Status: RESOLVED FIXED

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

Description

[Chris Mills [:cmills]]

I know you are probably working on this, but I thought I'd mention it anyway. The layout at 480px looks really good, so why not just give the body a min-width of 480px, and let those on small screens scroll a little bit?

Although this might look bad on Firefox OS portrait...

Comment 1

[Jean-Yves Perrier [:teoli]]

Chris: could you recheck now? Especially on Fx OS portrait? Also could you list the problems you see, it would help in seeing if these are in our the back-log or new issues we missed. Thanks!

Comment 2

[Chris Mills [:cmills]]

It looks a lot better than it did, David has done some great work.

I still see some issues on FxOS portrait. Shall I list them here and attach screenshots?

Comment 3

[Jean-Yves Perrier [:teoli]]

Chris: yes please (one screenshot and a crude list will be ok). Thank you!

Comment 4

[Chris Mills [:cmills]]

Attachment: Broken 2 column layout

Comment 5

[Chris Mills [:cmills]]

Attachment: Broken 3 column layout

Comment 6

[Chris Mills [:cmills]]

Attachment: Messy callout boxes

Comment 7

[Chris Mills [:cmills]]

Attachment: Messy topic menu

Comment 8

[Chris Mills [:cmills]]

Attachment: Tag icon overlap

Comment 9

[Chris Mills [:cmills]]

Attachment: Top login menu overlap

Comment 10

[Chris Mills [:cmills]]

Attachment: Weird BG image

Comment 11

[Chris Mills [:cmills]]

Ok, so I've attached a few images showing things that don't look great on a narrow screen (taken on a Keon). For reference, the pages are

https://developer.mozilla.org/en-US/
https://developer.mozilla.org/en-US/Apps
https://developer.mozilla.org/en-US/docs/Web/CSS

Explanations:

* "Broken 2 column layout" and "Broken 3 column layout": on the App Center homepage, these don't nicely change to a single column layout on a narrow screen. This is probably because I am using the wrong class names for them; David, can you advise what to use here?
* Messy callout boxes - the three horizontal boxes on the CSS landing page look messy and still have the bullets showing.
* Messy topic menu - the zones, web platform, etc. menu items are all messy on a narrow screen. This should probably be changed to a hidden vertical menu or something on narrow screens?
* Tag icon overlap - just a small one, but the icon to the left of the tags looks overlapping and ugly on narrow screen. Get rid of it, or reposition?
* Top log menu overlap - the sign in/sign out menu overlaps with the MDN logo
* weird BG image - the background image looks a bit odd on narrow screens. Do something else with it, or get rid of it completely?

Comment 12

[David Walsh :davidwalsh]

The issues here have been fixed and columns clear at this size now.