Behind The Curtains Of Wikipedia Redesign — Smashing Magazine

A Rare Refresh for the Web’s Most-Read Reference

Few sites carry as much weight as Wikipedia, both in traffic and in the example it sets for long-form reading, collaboration, and multilingual support. Its famously utilitarian look remained largely untouched for years, with redesigns arriving only occasionally and far between. Only after nearly a decade did the Wikimedia Foundation decide it was time for another update.

The redesign effort was led by Alex Hollender and Jon Robson, who recently sat down for a detailed interview about the project. Their conversation covers the design decisions, development hurdles, and team processes involved in updating one of the most visited websites on the internet.

What Changed in the 2023 Update

Since the previous major redesign in 2014, Wikipedia had carried over its classic layout: a left-hand sidebar, a reading-width column for content, and a fixed header that was mainly used for navigation links. The new design targets some of the most frequent pain points reported by readers and editors alike.

One of the most noticeable shifts is the introduction of a collapsible sidebar. The team acknowledged that the old sidebar took up precious space on smaller screens and was often just ignored on larger monitors because users had become conditioned to scroll past it.

The sticky header is another change, designed to always be within reach. It keeps the Wikipedia logo, a search field, and key navigation permanently accessible as you read. This also addresses the problem of losing your place in an article when you need to jump to another section or search for a related topic.

The table of contents received attention too. In the previous design, it was a long, structured list that pushed readers far down the page before reaching the article body. The new version is a more compact element that tucks away neatly for readers without needing, while showing the context of where you are in a longer article.

Another update addresses language switching, a feature critical for Wikipedia's global audience. A new language button in the header reduces the clicks it takes to jump between versions of an article and makes the presence of other languages more obvious to users who might not discover that option otherwise.

Developing the Community-First Approach

Redesigning any website at Wikipedia's scale involves more than a few design mockups. The team spent significant time understanding who they were designing for and how a redesign might affect resource-strapped communities such as editors, who rely on certain tools and markup to work within articles.

Rather than trying to control the user experience at the pixel level, the team set up the front end so that localization can be done later. They opted to lean on the wider community of volunteers, who maintain the site's templates and gadgets, to separately resolve remaining contrast or spacing issues as they arise, instead of trying to align every detail before the initial release.

The initial release was also an opportunity to run tests in a targeted set of wikis, watching how edits and performance metrics were affected over time. Those checks measured how requests moved through the system and, critically, whether any automated processes or bots used for editorial work were inadvertently disturbed by the change in markup and layout.

Notably, the team decided against a dark mode as part of the core redesign, choosing to focus on the structural shifts first. They noted the differences between a global skin and the potential for a user to install a gadget that satisfies the same preference.

Small Team, Wide Scale

Hollender and Robson were leading the effort with a core team of fewer than a dozen people. That team was responsible for everything from the overarching layout to typography specifications and interaction states for all supporting pieces, while navigating compatibility across browsers used by the site’s years-long installed base.

The approach prioritized maintaining existing editor workflow patterns where possible, avoiding changes that would break institutional memory—such as the position of core links—while still modernizing the surrounding design. This helped transition habits gradually instead of forcing users to unlearn decades of muscle memory just as the site aims to encourage newer editors into its communities.

At a scale where millions of sessions are monitored even for a patch release, the team measured performance impacts early on. The changes were progressively enhanced, with fallbacks for non-supporting browsers, so that slow connections and older environments did not collapse under the weight of unnecessary scripts. Performance was less an item on a list and more a constraint within the design system itself.

What Designers Can Learn

A redesign of this magnitude yields lessons beyond Wikipedia's own pages. The iterative rollout they used is perhaps the most important one—delivering in manageable phases instead of an all-or-nothing cutover allows larger communities to adapt while remaining active. The team also highlighted working clearly with open-source partners and volunteer developers, sharing patterns and code upstream before they were implemented on the main site.

Testing on a few communities before the broad switch also proved useful in spotting not just visual or performance hiccups, but engagement drops among editors and readers that were quickly addressed through patches rather than full rollbacks.

By keeping the core architecture known, publishing their research and code publicly, and applying small, testable iterations before a global shift, the team behind the 2023 redesign treated their own process as a transparent, community-driven project that matches the ethos of the platform they serve.

Typographic Decisions and Content Ownership

Wikipedia’s interface sits on a particular fault line: volunteers own the content, while the Wikimedia Foundation owns the interface. Typography, Alex Hollender explains, lives squarely on the content side of that divide, which makes it a delicate area to touch. A prior typography refresh in 2014 had already proven contentious, and the team approached this redesign’s text changes with that history in mind.

Jon Robson, who worked on that earlier refresh, recalls its two main controversies: introducing a limited container width and choosing Helvetica Neue as the font. The latter clashed with the project’s open-source ethos, prompting a compromise that preferred open fonts when available — Linux Libertine at the time. The container-width question, however, went unresolved until this redesign, roughly eight years later.

For the current project, Hollender estimates that most of the typographic gain came from two adjustments: managing line length via a max-width constraint and increasing the base font-size value — the latter of which was deliberately held back from the first release out of fear that it would provoke a backlash from a vocal minority. “We know from past projects that typography is a particularly hot-button topic,” he notes.

The team also wrestled with the sheer diversity of Wikipedia’s content. A strong typography practice is complicated by thousands of templates, hundreds of language editions, and varying scripts. Hollender suspects that meaningful typographic polish might require a language-by-language approach, but concedes that such an endeavor remains speculative.

Editor’s note: The project’s main typography discussion and its prototype are available to review.

Responsive Constraints and a Fixed Viewport

The redesign adopted a soft goal of delivering a quality experience at browser widths down to 500px. Hollender notes that few desktop users actually run windows that narrow, but editors often tile two or three browser windows side-by-side, making the target worthwhile. Pure CSS gets most of the way there, though the interface’s three menus — which can be pinned open as sidebars or collapsed into dropdowns for logged-in users — required JavaScript to manage their state.

Robson recalls negotiating that 500px threshold. Alex had mockups ready for a lower breakpoint, but Robson worried that the added development time was not justified when data showed most usage involved resized desktop windows, not genuinely small screens.

One quirky outcome of the redesign: community members insisted on an explicit viewport meta tag because the table of contents collapsed inconsistently across browsers. If you inspect Wikipedia’s markup today, you will find <meta name="viewport" content="width=1000">. The full discussion behind that change is public.

Front-End Foundations

MediaWiki, the software driving Wikipedia, retains a deliberately conservative technology stack. Pages are progressively enhanced HTML served from PHP, with vanilla JavaScript and CSS layered on top. There are no build scripts: the team writes ES6 without transpiling, and LESS is compiled at runtime in PHP with aggressive caching. Mustache templates supply the HTML.

Library choices are made cautiously, since changes can ripple across a codebase maintained by hundreds of volunteers and staff. TypeScript is used for validation via JSDoc blocks, but not as a written language, to avoid alienating volunteer contributors who may not know it. The team considered replacing LESS after its decade of use, but decided against fragmenting the ecosystem. Mustache templates are expected to eventually give way to Vue.js.

Because all code is open-sourced, front-end developers who spot a styling problem can submit a pull request directly.

Measuring and Enforcing Performance

Performance carries unusual weight for Wikipedia given its global audience, including readers on slow connections. The team monitors a public dashboard built on NavigationTiming data collected from real users, and runs automated synthetic tests with Sitespeed.io. The instrumentation proved especially important for the redesigned search feature, which risked losing users if it felt slow; a detailed analysis of those measurements is available.

Bundle sizes for render-blocking CSS are tracked, and the CI pipeline rejects anything exceeding the performance budget. The team also runs focused spikes during quiet periods — one such exercise shaved 300 milliseconds off the mobile site’s total blocking time.

It’s a challenge to uphold our own high-performance standards. We’re currently working on implementing a performance budget across all our projects to formally enforce this and share the knowledge more widely for everyone to reference.

Information Architecture and Future Flexibility

The new interface’s flexibility is partly structural. The previous design scattered page tools between the left sidebar and the space above the article title, forcing developers to choose a location for each new feature. The revised architecture consolidates page tools in one place and global navigation in another, making future additions simpler to slot in.

The sticky header, currently available only to logged-in users, was built with that same foresight. The team anticipates needing different tools for article pages, discussion pages, and help pages, so the header was designed to accommodate those variations without expensive rework.

Looking ahead, the team is exploring reading settings such as dark mode, adjustable font size and line height, and themes similar to those in Wikipedia’s mobile apps. Other possibilities include knowledge discovery tools and reading features like note-taking and article collections.

Small Changes, Big Impact

Hollender highlights one deceptively simple win: visited link colors. Previously, the contrast between visited links and plain black text was so low that the navigational cue was effectively lost. Raising that contrast was a minor technical change with an outsized effect on the reading experience.

He also reflects on his shift toward high-fidelity HTML, CSS, and JavaScript prototypes instead of static mockups, which he credits with enabling richer discussions and easier collaboration with community members across many languages. The precise impact is unmeasurable, but he suspects the approach accelerated decision-making.

For Robson, the project’s lasting value is in dismantling a 21-year-old system and rebuilding its foundation. Introducing design tokens across the software stack paves the way for the user customizations that readers frequently request — including dark mode. “So hopefully, we can finally deliver that,” he says.