Recommendations for mobile friendly articles on Wikimedia wikis

This document provides guidance, from experience, on how best to serve mobile users as an editor of a MediaWiki wiki.

Don't put infoboxes or images at the top of the wikitext
Putting an infobox first in an article, will impact the performance and readability of the article on mobile.

In terms of readability, the placement of an infobox first, exposes readers to details on a subject prior to gathering context or and introduction to the subject, which can often be confusing. This issue was particularly heightened for topics unfamiliar to users, where they would be required to scroll through the content of the infobox to confirm whether they are reading the correct article. We implemented the change to create consistency between the mobile and desktop websites (on desktop, the first paragraph also has primary placement), as well as to expose users to the subject of the article prior to requiring them to scroll through the infobox.

From a performance perspective, shifting infoboxes to a secondary position, improves the performance of the site by significantly decreasing the average page load time, allowing users to see the content on the page faster than before.

More information: Reading/Web/Projects/Lead_Paragraph_Move

Non-mobile friendly example
My article's first paragraph

Mobile friendly example
My article's first paragraph

Meta data (including coordinates) should be positioned at the bottom of the article
On desktop, coordinate templates (Coord template) tend to appear in the top right corner of the article, on mobile where space is not available and the top of the article is limited, this is not practical. Positioning them elsewhere in the article body e.g. bottom would allow more options for mobile while still allowing the position on mobile.

There are other benefits for positioning meta data at the bottom - it helps algorithms that power Page previews and the mobile web site to identify the first paragraph which is important for summarizing articles.

Non-mobile friendly example
My article's first paragraph

Mobile friendly example
My article's first paragraph

.... .... ....

Inline styles should not use properties that impact sizing and positioning
CSS properties including width, float, height are problematic on mobile.

Padding, border and margin can also be problematic if larger values are used.

As a general rule, if your CSS uses a property with a value in pixels that is 100px or above, you should be testing your design on mobile.

Ideally anything that touches these properties should be using classes and Extension:TemplateStyles and media queries to provide 2 different treatments for mobile and desktop.

Non-mobile friendly example
Some text

Mobile friendly example
.mybox { width: 100%; padding: 5px; border: solid 1px black; }

@media all and ( min-width: 720px ) { .mybox { width: 700px; float: left; } }

Some text

Avoid tables for anything except data
If you are using tables to create a presentational element, please don't. Optimising tables for mobile is extremely challenging and these presentational elements are usually broken by the optimisations we make for mobile. Instead, you should look to convert your table based layouts to div based layouts.

Usually, in lieu of a better solution, we have to regretfully hide these elements on mobile. Navboxes being the most notable example.

Make sure your main page is mobile friendly
There's so much to talk about here, this gets its own article.

Templates should use a single root element with a sensible CSS class
Wikipedia content is largely unstructured. One means of providing presentation hints for optimal parsing and display is to ensure that templates have only one outermost HTML element and that that element has a unique CSS class name shared across wiki languages. This can dramatically help software such as the mobile website, the Content Service, and the native Android and iOS apps to identify content properly.

Non-mobile friendly example
foo bar

Mobile friendly example
foo bar

Collapse issues with a multiple issues template
When an article has more than one issue use a single issues template to collapse them. Issues can take up value space on mobile and when collapsed more options to mobile friendly skins can take place.