Mailing List Archive: Wikipedia: Wikitech

Making www.wikipedia.org mobile friendly

Index | Next | Previous | View Threaded

jrobson at wikimedia

May 18, 2012, 8:35 AM

Post #1 of 4 (220 views)
Permalink

Making www.wikipedia.org mobile friendly

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%2Ftemp&diff=3764806&oldid=3754632
[3] https://meta.wikimedia.org/w/index.php?title=Www.wikipedia.org_template%2Ftemp&diff=3764927&oldid=3764806
[4] http://bug-attachment.wikimedia.org/attachment.cgi?id=10619

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

raylton.sousa at gmail

May 18, 2012, 8:54 AM

Post #2 of 4 (220 views)
Permalink

Re: Making www.wikipedia.org mobile friendly [In reply to]

https://en.m.wikipedia.org/

2012/5/18 Jon Robson <jrobson [at] wikimedia>

> 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%2Ftemp&diff=3764806&oldid=3754632
> [3]
> https://meta.wikimedia.org/w/index.php?title=Www.wikipedia.org_template%2Ftemp&diff=3764927&oldid=3764806
> [4] http://bug-attachment.wikimedia.org/attachment.cgi?id=10619
>
> _______________________________________________
> Wikitech-l mailing list
> Wikitech-l [at] lists
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Platonides at gmail

May 18, 2012, 8:57 AM

Post #3 of 4 (203 views)
Permalink

Re: Making www.wikipedia.org mobile friendly [In reply to]

On 18/05/12 17:54, Raylton P. Sousa wrote:
> https://en.m.wikipedia.org/

That's a different site. He's talking about the portal with links to the
different editions.

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

jrobson at wikimedia

May 21, 2012, 2:20 AM

Post #4 of 4 (195 views)
Permalink

Re: Making www.wikipedia.org mobile friendly [In reply to]

(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 [at] gmail> wrote:
> On 18/05/12 17:54, Raylton P. Sousa wrote:
>> https://en.m.wikipedia.org/
>
> That's a different site. He's talking about the portal with links to the
> different editions.
>
>
> _______________________________________________
> Wikitech-l mailing list
> Wikitech-l [at] lists
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

_______________________________________________
Wikitech-l mailing list
Wikitech-l [at] lists
https://lists.wikimedia.org/mailman/listinfo/wikitech-l

Index | Next | Previous | View Threaded

Interested in having your list archived? Contact Gossamer Threads