The MDN Redesign Behind the Scenes

Буенча | Октябрь 3, 2017

Kuma, the code that produces the MDN web site, is a bizarre mixture of the previous and the model new. MDN turned ten in 2015 and theres nonetheless code and content material round from these very first days. After I sat down to begin coding the present redesign, the very first thing I did was remove the earlier couple of traces of the final redesign. In distinction, we now have a cutting-edge viewers: 92% of our customers have a browser with CSS grid help! We enabled http2, һәм 98% of our customers have seen advantages from that.

One of the methods we take care of previous code in kuma is with the campsite rule: Always go away your campsite higher than you discovered it. A redesign touches quite lots of recordsdata, and this was an ideal alternative to scrub up and refactor a minimal of till the deadline began getting close.

A redesign can additionally be a good time to vary stuff youre afraid of breaking. Persons are extra understanding of you working the bugs out of one thing new than breaking one thing thats labored for years. I eliminated 640 traces of stale code throughout the redesign. (And if I broke a six-year-old XPCOM tutorial you utilize each day by eradicating the customized list-style-type, please file a bug!)

One web site with two looks

Rather than engaged on the CSS for the redesign in a separate redesign folder, we duplicated all of the recordsdata and added -old to the file title of the previous recordsdata, which implies that all of our redesign work is occurring within the official recordsdata. This preserves the git historical past and means we dont have to maneuver something round after launch. As quickly as have been pleased with the code, we will delete the -old recordsdata with confidence.

To serve the model new kinds to our beta testers and the -old ones to everybody else, we use Django Waffle. Waffle will additionally be used to serve totally different content material however as a consequence of theres a robust separation of presentation and content material on MDN, weve made only a few adjustments to the HTML.

Bugs our beta testers found

MDN is enormous, and we cant check each web page in each locale. Have been actually fortunate to have energetic beta testers. 🙂 Among the largest issues they turned up for us were:


Problems with Zilla Spotlight in Vietnamese and when there's inline code examples.

We began out by replicating Mozillas model spotlight impact by utilizing the Zilla Slab Spotlight font, however we deserted that fairly rapidly when issues turned up in lots of of our locales and when utilized in mixture with inline code.

The present strategy places a full-width black background on h3 and h4 headings by default, after which some JavaScript runs so as to add a <span> tag in order that the black background hugs the heading textual content. Progressive enhancement at work.

We went backwards and forwards about this for some time, questioning if the JavaScript and further <span> was definitely value the effort. However we caught with it as a consequence of it makes the h3 and h4 headings a lot simpler to identify when scanning the page.

Whats Taiwanese for Slab Serif?

Showing the distinction between Zilla's thick strokes and the skinny strokes of Taiwanese.

Previously we used Open Sans as our heading textual content. With the redesign, we switched to Zilla Slab. Open Sans was skinny and a mean top for a font. It didnt look misplaced subsequent to the system fallbacks for Chinese language or Japanese characters.

Zilla is massive and thick, and we began getting suggestions in regards to the distinction with these system fallbacks. Moreover, the character set for Zilla is European Latin solely in the intervening time, so Vietnamese, which makes use of Latin characters plus a pair Latin characters not utilized in Europe, displayed font fallbacks within the middles of words.

To tackle each these issues, we carried out a system that allowed us to override the positioning fonts on a per-locale basis. (Comment if youd like a separate weblog publish about this).


We acquired many complaints in regards to the previous designs low-contrast show. We went a bit too far the opposite means with this design and acquired complaints in regards to the excessive distinction. Weve toned it right down to the ever-popular #333 now.

Whats next

Were transferring on from this to make particular enhancements to the article pages:

Putting code samples excessive on the web page; our hard-working writers and volunteers are doing this, one web page at a time.A higher strategy to readable line-lengths and huge code examples, impressed by the Hacks Weblog theme.Compatibility tables that show desktop and cellular knowledge facet by side.Code samples you presumably can experiment with within the page.

See this early by signing as a lot as be a beta tester.

Enjoyed beta testing MDN? You too can beta-test Firefox by downloading Nightly.

Who is we?

The MDN dev staff is:

Stephanie Hobson, me, CSS-Pre-Pre-ProcessorSchalk Neethling, who reviewed each of my 30+ pull requests in ALL THE BROWSERS, generally a quantity of timesJohn Whitlock, who did the superior locale fallbacksRyan Johnson, who at all times asks Why not? when John and I say issues cant be done.

We weblog sporadically on the Mozilla Advertising Engineering & Operations blog.

You must also learn this weblog publish by our Product Supervisor, Kadir Topal, about The Way ahead for MDN.

Stephanie has been coding since 1998 for web sites as massive and small. HTML, CSS, and JavaScript have at all times been her ardour so her pursuits naturally lengthen to net requirements, progressive enhancement, efficiency, analytics, and accessibility. She’s at present working as front-end dev for the Mozilla Developer Network.

More articles by Stephanie Hobson

Зинһар тикшерегез бу бик яхшы сервис буенча: меню яки килергә бушлай хезмәт

[Гомуми: 0    Уртача: 0/5]

Калдырырга җавап

Электрон почта адресыгызны булмаячак басылды. Мәҗбүри кырлар помечены *