683200 - Mobile redesign

Status: RESOLVED DUPLICATE of bug 925460

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

Description

[Janet Swisher]

Uservoice suggestion:
http://mdn.uservoice.com/forums/51389-mdn-website-feedback-http-developer-mozilla-org/suggestions/2219746-make-the-javascript-reference-mobile-friendly

Can we use current best practices with media queries?

Comment 1

[Luke Crouch [:groovecoder]]

Suggest:

http://webaim.org/techniques/skipnav/

Comment 2

[Janet Swisher]

Attachment: MDN on Kindle 1

Comment 3

[Janet Swisher]

Attachment: MDN on Kindle Touch

Seems to have a slight CSS issue.

Comment 4

[Janet Swisher]

Attached some photos that Joe Stagner took of MDN on Kindles. Kindle 1 and DX do not seem to support CSS. Kindle Touch has a slight CSS issue. Kindle Fire looks good, and (monochrome) Kindle 2 looks OK.

Comment 5

[Connor Montgomery]

Attachment: MDN on iPhone

Comment 6

[Connor Montgomery]

I also attached what it's like on the iPhone. I guess I would need to see site stats, but I know when I go to MDN, I'm usually looking up JS documentation. what about you all?

i was thinking it would be great to have it be almost like just a list view of the docs available (i.e. HTML, HTML5, CSS, JS, DOM, Canvas, etc...) by default, then allow them to view the regular site by clicking a link at the bottom of the page. But that way, the "go to" information is there and available very quickly to look things up (accompanied with a search bar at the very top). Maybe i ought to mock something up to show what I mean. That may not be what we want, I just know personally, I've wanted that before.

If I'd like to make that happen, is this on the github repo for kuma? if not, where can I find the code for this?

Comment 7

[Craig Cook (:craigcook)]

The plan isn't to offer different content to different devices, but only to optimize the design and layout for smaller screens using CSS media queries. The exact same site delivered to everyone, just made responsive so it reads better on non-desktops. See http://www.alistapart.com/articles/responsive-web-design/.

The entire header and navigation will have to be rearranged. The wiki won't need too much work beyond that so we're definitely starting there. Other parts of the site, like the home page and landing pages, will need some more dramatic changes. The demos section (including dev derby) will have to be completely redesigned.

Comment 8

[Connor Montgomery]

awesome - that makes sense and won't be a problem. is the code for the site here (https://github.com/mozilla/kuma), or somewhere else?

Comment 9

[Luke Crouch [:groovecoder]]

Yup, that's the site code. Craig, would this code go into dekiwiki skin also/instead?

Comment 10

[Jean-Yves Perrier [:teoli]]

(In reply to Janet Swisher from comment #4)
> Kindle 1 and DX do not seem to support CSS.
Looking at the images, it looks to me that these devices are using the print.css. But I'm not 100% sure.

Comment 11

[Craig Cook (:craigcook)]

(In reply to Luke Crouch [:groovecoder] from comment #9)
> Yup, that's the site code. Craig, would this code go into dekiwiki skin
> also/instead?

The dekiwiki skin resides at http://svn.mozilla.org/projects/deki/trunk/mozilla/skins/mdn/ and specifically /Transitional/screen.css. That file somewhat mirrors https://github.com/mozilla/kuma/blob/mdn/media/css/wiki-screen.css, but there are some structural differences between Deki and kuma so the style sheets aren't perfect duplicates. 

I would recommend starting with the Deki skin and what we apply there can be pretty easily ported to kuma.

The rest of MDN (home page, landing pages, profiles, etc) is styled separately by https://github.com/mozilla/kuma/blob/mdn/media/css/mdn-screen.css