It’s now easier to craft content for mobile devices: Responsive web design at the Wikipedia scale

Photo by Alexandre Buisse (Nattfodd), CC BY-SA 4.0.

Wikipedia has lots of content, but some of it is unreadable on smartphones because of their small screens. For years our software has had hidden content incompatible with mobile displays. This approach always bugged us because we want user-generated content to be visible. At last, we found a way to address the issue: TemplateStyles, a technology for editors to format content for mobile presentation.

What was out there before TemplateStyles?

Brad Jorsch: Historically, there have been two ways to style content on a MediaWiki site such as Wikipedia: use inline CSS everywhere, or add it to site-global files like MediaWiki:Common.css. The first is problematic because it means you have to repeat those styles every time you want to use them on different pages or even within the same page. The first is also an issue because some features, like the ability to specify styles for different screen sizes, aren’t available to inline styles. The second is problematic because only wiki administrators can edit these site-global files, and the CSS could quickly grow to huge sizes if every special case were added there.

What problem does TemplateStyles solve?

Brad: What we wanted is a way for non-administrator contributors to be able to create reusable stylesheets that can be included in articles only as needed, with the ability to specify styles for different-sized devices. Since it makes most sense to use this in conjunction with MediaWiki’s existing wikitext templating, we called it TemplateStyles. It was one of those ideas that was hanging around for a while, waiting for someone to have the time to pick it up.

In early 2016, User:Coren picked up the idea as a volunteer project. Coren created an initial prototype of the software, but several security issues were identified that future development would need to resolve. Coren, unfortunately, didn’t have the time to take it further. The Wikimedia Foundation’s Reading Infrastructure team later picked it up to finish the project. During the first half of 2017 Brad Jorsch wrote a standards-based CSS parser and sanitizer library for PHP to resolve the security issues, and wrote a new version of the TemplateStyles extension with the cooperation of Gergő Tisza to use it.

Gergő Tisza: This was the biggest part of the work. Not only did it solve the problem of safe user-generated CSS for Wikimedia, it also solved it for everyone running a PHP website of any kind. I think it’s one-of-its-kind—there are some other CSS parsers written in PHP, but none meant to deal with untrusted input.

Who will use TemplateStyles?

Brad: The main audience is the editors of MediaWiki sites, more specifically those who create templates that need styling. It could also find good use for wikis’ main pages and portals.

Chris Koerner: As Brad mentioned folks who maintain meta templates—like those regarding page issues ({{Article for deletion}}, {{Hoax}}, etc.), navigation aids, and in-article data displays like climate data or ratings—could benefit from using TemplateStyles to improve the accessibility of their work on multiple devices. There’s a lot of possibility across wikis where templates are used.

What has been the response so far? 

Chris: User:Nirmos, the Swedish Wikipedian who we’ve worked with, was impressed with the Performance team’s willingness to monitor performance as they worked. They have also filed tasks and been happy with the team (Brad and Gergő in particular) and their responsiveness. Nirmos has been implementing TemplateStyles on the Swedish Wikipedia, which from an adoption perspective is great!

How does TemplateStyles help readers and template writers?

Brad: Template writers and design-inclined individuals will be able to style templates more easily, and will be able to design templates that look good on both desktop and mobile devices. Additionally, copying some templates (like the English Wikipedia’s message box templates) to other wikis can become easier, since those doing the import won’t have to find the right pieces of MediaWiki:Common.css to manually copy.

Readers should benefit as template writers take advantage of the ability to make styles better adapt to different devices.

Gergő: I also want to point out that this will improve template maintainability. MediaWiki:*.css changes are hard to test because they are loaded as external stylesheets, are cached, and are not integrated with the normal page rendering process. TemplateStyle styles are included in the page, and rendered via the normal mechanism, making the standard editing toolchain (such as TemplateSandbox) work. Also, there is no easy way for the wikitext editor to support inline styles. CSS pages can have a dedicated editor which helps editors with syntax highlight, validation, typeahead etc.

  1. What’s next?

Brad: Right now it’s deployed to,, and the Swedish Wikipedia. Next is to get it deployed to more wikis.

Chris/Adam: Are you good at writing CSS that works on both laptops and smartphones? Would you like to help make Wikipedia articles easier to read on smartphones with TemplateStyles? Submit a task in Phabricator, the Wikimedia task tracking software, with a request to have TemplateStyles enabled.

  1. Anything else you’d like to add?

Adam Baso: TemplateStyles helps to fix the layout problem of complex information on smartphones. But we still have a challenge with heavyweight HTML, which is taxing on mobile device hardware (processor, RAM, etc.). Even if the layout looks good, the HTML may be overkill. In the future we’d like to figure out how to use TemplateStyles to reduce the HTML markup actually sent to mobile devices or at least minimize the hardware impact on mobile devices. For devices with an even smaller footprint, like smart watches and embedded devices, technology that can automatically change the HTML to accommodate the constrained hardware and expected format will be essential.


Brad Jorsch, Senior Software Engineer, MediaWiki Platform
Adam Baso, Director, Reading Engineering
Chris Koerner, Community Liaison
Gergő Tisza, Senior Software Engineer, Reading Infrastructure
Wikimedia Foundation


Read further in the pursuit of knowledge

New Wikipedia editor features make it easy for everyone to contribute

New features on Wikipedia are making it easy for everyone to edit Wikipedia, especially those contributing to the site for the first time. Every time you read a Wikipedia article, you are reading the work of a volunteer contributor.  Nearly 300,000 people from around the world edit Wikipedia articles each month — they start new….

Read more

Wikimedia Foundation Appeals Russian Court Decision on Removal of Wikipedia Information Related to the Russian Invasion of Ukraine

On 6 June 2022, the Wikimedia Foundation filed an appeal to challenge a Moscow Court’s decision that the Foundation committed an administrative offense by failing to remove “prohibited” information on Wikipedia, largely related to the Russian invasion of Ukraine. In its appeal, the Wikimedia Foundation argues that information on Wikipedia should be protected by freedom….

Read more
A group of men celebrate with the World Cup trophy amidst a shower of confetti

Wikipedia’s most-popular articles of 2018 show that pop culture rules over us all

People visited Wikipedia over 190 billion times in 2018 alone, many motivated by the encyclopedia’s wealth of in-depth articles about topics you didn’t know enough about. But in looking at the English Wikipedia’s most-popular articles of 2018, it’s clear that one motivation reigned supreme. People wanted to keep up with the popular culture moments happening….

Read more

Help us unlock the world’s knowledge.

As a nonprofit, Wikipedia and our related free knowledge projects are powered primarily through donations.

Donate now

Contact us

Questions about the Wikimedia Foundation or our projects? Get in touch with our team.

Photo credits