I think https://lists.wikimedia.org/pipermail/wikitech-l/2014-October/078995.html is related.

I gave this some thought in October and I came to the conclusion that we might be best off educating users about in-browser development tools (Chrome, Safari, Internet Explorer, Firefox, etc.), which are likely already a lot better than anything we could build.

I agree that ensuring that our content is easily accessible from as many devices as possible is important, but I think the wisest investment of resources would probably go toward leveraging tools others have created rather than trying to roll our own. Any decent modern browser should have a mobile emulator built in already. Users who are capable of helping make the site more device agnostic are probably capable of learning the built-in tool suite.

Educating people about Web development tools fits in well with Wikimedia's mission and it helps strengthen the Web as the same skills can trivially be applied to other sites. If we build a custom emulator in MobileFrontend and try to get people to use that, we'll be doing extra work and we'll be tying users to tools that are specific to MediaWiki wikis.

There are also broader architectural questions about whether MobileFrontend still makes sense and about whether having separate m. domains makes sense. Both feel a bit outdated to me... I'd personally prefer a better unified skin and a reunified platform. (And the reality is that MobileFrontend has morphed into much more than just acting as a mobile skin... and that's problematic.)

Regarding page previews specifically, it's historically been pretty slow to preview large pages (or even render them in a browser tab), so I'm wary of doing so twice in the same request.

I'm not convinced. An editor should simply think about content.

MobileFrontend is just a skin you can test it using ?useskin=minerva and making the width 320px. Any editor with this would be able to identify any issues (the only thing the desktop skin doesn't do that mobile does is support section collapsing but if anything this should make things easier for anyone who wants to test the skin).

On the same basis we should provide emulation for Monobook and Modern skin. If people are not using that what makes you think a preview tool will fix that? My belief is people just don't care or lack the knowledge/tools to fix it (for instance if you have a design built with inline styles you cannot use media queries to format it nicely for mobile).

A simple gadget creating a button than when clicked did this:

window.open( mw.config.get( 'wgServer' ) + '/wiki/' + mw.config.get( 'wgTitle' ) + '?useskin=minerva', "Wikipedia_MobileView", "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes" )

would suffice no? Especially if we could trick it into loading at an appropriate screen resolution.

I've said this numerous times, to anyone that will listen, for the past 2 years but the only way that in my opinion will we have pages that look good on editing is if we radically move away from inline styles/HTML markup in article content itself and improve the tools around templating.

https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates would be a great start (sadly every time I talk to someone about this the usual answer is erggg the parser). We're wasting our time with anything else.

Templating with a mobile preview mode would make total sense. This is where we hit continuous problems in the mobile world. We have various hacks trying to present templates better because templates are not built with mobile in mind. Template creators should be thinking about all the skins and all the possible screen resolutions and should have the tools to correct ones that are broken.

In T85587#951553, @Jdlrobson wrote:

MobileFrontend is just a skin you can test it using ?useskin=minerva and making the width 320px. Any editor with this would be able to identify any issues (the only thing the desktop skin doesn't do that mobile does is support section collapsing but if anything this should make things easier for anyone who wants to test the skin).

I think section collapsing should be testable. Also there is @media handheld etc., which is not currently used in MF but is used in https://en.wikipedia.org/wiki/MediaWiki:Common.css

On the same basis we should provide emulation for Monobook and Modern skin.

That's not quite the same basis. MF is 25,000 lines of code and will soon be used by half our readers. Just because it's tightly integrated with a skin doesn't make it comparable with Monobook or Modern. And like I said, MF is just part of what I'm proposing.

If people are not using that what makes you think a preview tool will fix that? My belief is people just don't care or lack the knowledge/tools to fix it (for instance if you have a design built with inline styles you cannot use media queries to format it nicely for mobile).

That seems defeatist.

A simple gadget creating a button than when clicked did this:

window.open( mw.config.get( 'wgServer' ) + '/wiki/' + mw.config.get( 'wgTitle' ) + '?useskin=minerva', "Wikipedia_MobileView", "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes" )

would suffice no? Especially if we could trick it into loading at an appropriate screen resolution.

It would be a good start. Actually, we already have something similar, in the form of Brion Vibber's mobile sidebar gadget: https://meta.wikimedia.org/w/index.php?title=User:Brion_VIBBER/mobile-sidebar.js

I guess iframe width counts as viewport width? It uses useformat=mobile instead of useskin=minerva. This is basically what I am imagining, except optionally on the preview page instead of unconditionally on page views.

I've said this numerous times, to anyone that will listen, for the past 2 years but the only way that in my opinion will we have pages that look good on editing is if we radically move away from inline styles/HTML markup in article content itself and improve the tools around templating.

https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates would be a great start (sadly every time I talk to someone about this the usual answer is erggg the parser). We're wasting our time with anything else.

I don't understand that, that project hardly even touches the parser. You can see my progress so far on that project at T989.

Templating with a mobile preview mode would make total sense. This is where we hit continuous problems in the mobile world. We have various hacks trying to present templates better because templates are not built with mobile in mind. Template creators should be thinking about all the skins and all the possible screen resolutions and should have the tools to correct ones that are broken.

You mean basically what I'm proposing, but in conjunction with TemplateSandbox and with that RFC implemented? Sounds fine to me. It should be trivial to make it work with TemplateSandbox, it might not even require any extra code.

Change 166089 had a related patch set uploaded (by Florianschmidtwelzow):
POC: Add mobile preview button to EditPage

https://gerrit.wikimedia.org/r/166089

Patch-For-Review

Thanks for the clarifications. I imagine in the editor preview it would be useful to be able to toggle skin/screen resolutions easily. My main concern in a nutshell is about making this mobile specific and applying useformat=mobile instead of useskin=minerva. I am arguing useskin=minerva does pretty much the same as useformat=mobile from an editors point of view and if it's deemed not good enough we should fix that. Doing it this way will give us a more future proof/generic method of previewing edits).

I'm still scepticle it will make a difference (I think a lot of editors just lack the knowledge of responsive design) but I am open to the idea.

A few notes to your specific points can be found below.

In T85587#954166, @tstarling wrote:

In T85587#951553, @Jdlrobson wrote:

MobileFrontend is just a skin you can test it using ?useskin=minerva and making the width 320px. Any editor with this would be able to identify any issues (the only thing the desktop skin doesn't do that mobile does is support section collapsing but if anything this should make things easier for anyone who wants to test the skin).

I think section collapsing should be testable.

I'm not sure why editors need to know about this. We just wrap content and you can toggle it so it shows or is hidden. Ideally applying useskin=minerva would also apply section collapsing and that can trivially be enabled.

Also there is @media handheld etc., which is not currently used in MF but is used in https://en.wikipedia.org/wiki/MediaWiki:Common.css

On the same basis we should provide emulation for Monobook and Modern skin.

That's not quite the same basis. MF is 25,000 lines of code

This is a big misunderstanding. MobileFrontend is essentially a skin, some special pages and JavaScript for mobile workflows. If you inspect it closely you'll notice the css and skin php is no different in size from any other skin and this is all the editor should care about.

I guess iframe width counts as viewport width? It uses useformat=mobile instead of useskin=minerva. This is basically what I am imagining, except optionally on the preview page instead of unconditionally on page views.

The differences between useformat=mobile and useskin=minerva are pretty minimal these days.

• special cases the main page
• applies a different footer.
• switches MediaWiki:Common.css for MediaWiki:Mobile.css and turns off most gadgets which may be incompatible with mobile
• Wraps top level sections e.g. = or == or === depending on which is used first in a DIV element (which then makes section collapsing work)

Only the latter two in my opinion are problematic and I think should be fixed in core (for Common.css this might mean sitting down with a site admin and reviewing the styles together (might be a good activity to do at a hackathon) and the latter as I've stated before can easily be done with a bit of tinkering on our side.

I don't understand that, that project hardly even touches the parser. You can see my progress so far on that project at T989.

[offtopic] but I didn't know this bug existed so thanks for pointing it out. I was under the understanding from the last architecture summit that it was agreed that people wanted <style> tags in wikitext.

Change 166089 abandoned by Florianschmidtwelzow:
POC: Add mobile preview button to EditPage

Reason:
Like discussed :)

https://gerrit.wikimedia.org/r/166089