ResourceLoader/Writing a MobileFrontend friendly ResourceLoader module

This document provides guidance on developing ResourceLoader modules to run in mobile site as provided by the MobileFrontend extension.

About MobileFrontend Extension
The MobileFrontend extension by default specifically disables all ResourceLoader modules. This is for good many reasons:


 * 1) Many modules were not designed nor tested to run on mobile
 * 2) On mobile the screen resolution can vary greatly - many beautifully designed modules will not function on mobile
 * 3) Many features available on desktop are not available on mobile
 * 4) Reducing payload - many mobile users are on slow internet connections - adding modules to the mobile experience can reduce this drastically.
 * 5) The mobile CSS/JavaScript landscape is very different from desktop. e.g. support

Styling for mobile
By default you should style for mobile and use the following rules:
 * Restrict your design to a 320px screen, maybe simplifying the user interface where needed.
 * Use % widths and em's - avoid using pixels as much as possible!
 * If you need to use px's make sure they are no bigger than 50px.
 * Use media queries to style for desktop. Adapt your design when the minimum width of the screen is 768px. This will make your design look good on mobile, tablet and desktop screens.
 * Note that media queries are not supported in IE6,7,8. Either don't worry about this or use a JavaScript shim to pull in those styles for those browsers.

Decide if you should
Just because you can you must decide whether this is worthwhile. Will people on mobile really use your module? It is useful to slow down the mobile experience by providing this module? If you are not sure it is suggested that you start a conversation on the mobile-l mailing list and also gather feedback from the communities that will use your module.

If your module comes with a large amount of client side code it is a good indication that your module probably needs rethinking or not applying to mobile. Compare your module to the jQuery library - if it is bigger than that or even near to its size you are probably doing the wrong thing.

Decide when to add the module
Are you adding the module under the right circumstances? For instance if your module enhances the editing experience - make sure you only add that module when the user is on an edit page. You should be extremely careful about adding modules to pages as each module comes with a download penalty.

Enabling your existing modules
First things first make a clone of the module you want to enable on mobile. In the cloned module define the targets property. Set it to 'mobile'. This ensures your module can run in mobile.

Here is an example used to enable CentralNotice for mobile.

You now need to add this new module to the mobile output page. To do this make use of the hook EnableMobileModules. Note the $mode parameter allows you to target your modules at the 'beta' or 'alpha' versions of the site. This is a great way to test your module out in the wild to a smaller audience. The 'alpha' version is a great way to test a module that you are not sure you have got right and get feedback from various users.

Moving your module to stable
To do this simply add the module unconditionally.

Testing your modules

 * At minimum you should test on the following browsers:
 * iPhone
 * Android 2.x
 * Android 4.x
 * Opera Mini v7+
 * Blackberry v6+
 * The MediaWiki JavaScript API is currently much smaller than the desktop API. Ensure that your modules do not use anything that is not available.
 * Many MediaWiki-based projects should work on as many devices as possible.