Backfill · 2022
#173 of 357Wikipedia Mobile Redesign
Screenshot: a Wikipedia article displayed on a phone screen showing the new mobile layout with a centered text column, larger sans-serif type, and a sticky table of contents sidebar.
Wikipedia's mobile interface was redesigned recently with a narrower content column, larger type. A sticky table of contents that follows you as you scroll, and the changes represent the first significant visual update to the site in over a decade. Original layout was designed for desktop monitors in the mid-2000s and the full-width text on a laptop screen was genuinely hard to read because the line length exceeded what typography research recommends for comfortable reading. The new layout constrains the text to a centered column that matches the 50 to 75 character line length that print designers have used for centuries. The improvement in readability is immediate and significant. On the left side of the page, a table of contents is persistent and collapsible. Solves the navigation problem of long articles that can run to 10,000 words or more. Typography is still the same system font stack rather than a custom typeface, which keeps page load times fast across the developing world where bandwidth is limited. The changes were controversial among long-time editors who preferred the dense, information-first layout. Data showed that mobile users, who now account for the majority of Wikipedia traffic, were bouncing at higher rates on articles with the old design. I use Wikipedia for research multiple times per week and the reading experience on my phone has improved enough that I finish articles I'd have abandoned before. Is exactly the outcome the redesign was targeting.