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
2012/5/18 Jon Robson jrobson@wikimedia.org
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
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
On 18/05/12 17:54, Raylton P. Sousa wrote:
That's a different site. He's talking about the portal with links to the different editions.
(Cross posting to wikimedia-l as suggested by MZMcBride) Yup I'm actually talking about the project home page (www.wikipedia.org) which some people land on from a google search.
I've been working on some adjustments to the styling of www.wikipedia.org to make it mobile friendly for browsers that support media queries- this could then in future be applied to other wiki* projects (e.g. wiktionary).
I've had some very useful feedback from MZMcBride and I believe we have now got it to a state [1] where we should consider synced to live.
Please jump in on the discussions [2] if you have any objections or further tweaks
[1] http://bug-attachment.wikimedia.org/attachment.cgi?id=10631 [2] https://bugzilla.wikimedia.org/show_bug.cgi?id=30389
On Fri, May 18, 2012 at 4:57 PM, Platonides Platonides@gmail.com wrote:
On 18/05/12 17:54, Raylton P. Sousa wrote:
That's a different site. He's talking about the portal with links to the different editions.
Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l
wikitech-l@lists.wikimedia.org