Currently www.wikipedia.org is not mobile friendly - when served to a mobile device it appears the same as the desktop site meaning a user has to zoom and scroll around the page (see bug 30389 [1]). We can do better!

As a first step it made sense in my head that we should use media queries for devices which support them to adapt the desktop site so it is optimised for at least modern mobile users which would be a step in the right direction.

I made a couple of changes [2,3] on the www.wikipedia.org_template (temp version) to support this. Firstly I moved inline styles into css rules and then I added device specific css rules that use media queries. This results in a mobile optimised homepage [4] for any devices which have a max screen width of 480px (which was the width that I judged problems with the desktop layout began to occur).

I would appreciate thoughts on whether this is workable and what would need to happen to move these changes over to the homepage. The current desktop site stays exactly the same and I'm sure there are further optimisations that can be made to make this adapted version prettier (please do volunteer those if you believe you can improve it even more so!).

Going forward when device detection is built into the mediawiki core it would be great to support other mobile devices which do not have media query support by serving these additional styles without the media query wrapper.

Thank you for your interest and help in making Wikipedia more usable to our growing mobile community! Jon

[1] https://bugzilla.wikimedia.org/show_bug.cgi?id=30389 [2] https://meta.wikimedia.org/w/index.php?title=Www.wikipedia.org_template%2Fte... [3] https://meta.wikimedia.org/w/index.php?title=Www.wikipedia.org_template%2Fte... [4] http://bug-attachment.wikimedia.org/attachment.cgi?id=10619