{"id":643,"date":"2017-06-22T10:46:43","date_gmt":"2017-06-22T17:46:43","guid":{"rendered":"https:\/\/blog.mozilla.org\/opendesign\/?p=643"},"modified":"2017-06-22T12:25:41","modified_gmt":"2017-06-22T19:25:41","slug":"mdns-new-design-beta","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/","title":{"rendered":"MDN\u2019s new design is in Beta"},"content":{"rendered":"<p>Change is coming to MDN. In a recent post, we talked about <a href=\"https:\/\/blog.mozilla.org\/opendesign\/future-mdn-focus-web-docs\/\">updates to the MDN brand<\/a>, and this time we want to focus on the upcoming design changes for MDN. MDN started as a repository for all Mozilla documentation, but today MDN\u2019s mission is to provide developers with the information they need to build things on the open Web. We want to more clearly represent that mission in the naming and branding of MDN.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-644 size-medium\" src=\"http:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1-300x77.png\" alt=\"New MDN logo\" width=\"300\" height=\"77\" \/><\/p>\n<p>MDN\u2019s switch to new branding reflects an update of Mozilla\u2019s overall brand identity, and we are taking this opportunity to update MDN\u2019s visual design to match Mozilla\u2019s design language and clean new look. For MDN that means bold typography that highlights the structure of the page, more contrast, and a reduction to the essentials. Color in particular is more sparingly used, so that the code highlighting stands out.<\/p>\n<p>Here\u2019s what you can expect from the first phase:<\/p>\n<div id=\"attachment_645\" style=\"width: 610px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/slice.png\"><img aria-describedby=\"caption-attachment-645\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-645 size-large\" src=\"http:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/slice-600x360.png\" alt=\"screenshot of new MDN design\" width=\"600\" height=\"360\" srcset=\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/slice-600x360.png 600w, https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/slice-300x180.png 300w, https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/slice-1000x600.png 1000w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-645\" class=\"wp-caption-text\">New MDN design<\/p><\/div>\n<p>The core idea behind MDN\u2019s brand identity change is that MDN is a resources for web developers. We realize that MDN is a critical resource for many web developers and we want to make sure that this update is an upgrade for all users. Instead of one big update, we will make incremental changes to the design in several phases. For the initial launch, we will focus on applying the design language to the header, footer and typography. The second phase will see changes to landing pages such as the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\">web platform<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/Learn\">learning area<\/a>, and MDN <a href=\"https:\/\/developer.mozilla.org\/en-US\/\">start page<\/a>. The last part of the redesign will cover the article pages themselves, and prepare us for any functional changes we\u2019ve got coming in the future.<\/p>\n<p>Today, we are launching the first phase of the redesign to our beta users. Over the next few weeks we\u2019ll collect feedback, and fix potential issues before releasing it to all MDN users in July. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Contribute\/Howto\/Be_a_beta_tester\">Become a beta tester <\/a>on MDN and be among the first to see these updates, track the progress, and provide <a href=\"https:\/\/discourse.mozilla-community.org\/t\/beta-redesign-feedback\/16544\/6\">us with feedback<\/a> to make the whole thing even better for the official launch.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Change is coming to MDN. In a recent post, we talked about updates to the MDN brand, and this time we want to focus on the upcoming design changes for &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/\">Read more<\/a><\/p>\n","protected":false},"author":179,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>MDN\u2019s new design is in Beta - Mozilla Open Design<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadir Topal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/\",\"name\":\"MDN\u2019s new design is in Beta - Mozilla Open Design\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1-300x77.png\",\"datePublished\":\"2017-06-22T17:46:43+00:00\",\"dateModified\":\"2017-06-22T19:25:41+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/477960be85ebafbb04ed44d573db2f3a\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1.png\",\"width\":300,\"height\":77},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/opendesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MDN\u2019s new design is in Beta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/\",\"name\":\"Mozilla Open Design\",\"description\":\"branding without walls\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/opendesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/477960be85ebafbb04ed44d573db2f3a\",\"name\":\"Kadir Topal\",\"description\":\"Kadir Topal is the Product Lead for MDN Web Docs where he works with his team to provide developers with the information they need to build delightful experiences on the open web. He also works with a group of browser vendors and the W3C on the annual Web Developer Needs Assessment. He\u2019s been a long term contributor to Mozilla, having started the German Firefox community in 2002. Kadir lives in the Ruhr area in Germany.\",\"url\":\"https:\/\/blog.mozilla.org\/opendesign\/author\/atopalmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MDN\u2019s new design is in Beta - Mozilla Open Design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/","twitter_misc":{"Written by":"Kadir Topal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/","url":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/","name":"MDN\u2019s new design is in Beta - Mozilla Open Design","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1-300x77.png","datePublished":"2017-06-22T17:46:43+00:00","dateModified":"2017-06-22T19:25:41+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/477960be85ebafbb04ed44d573db2f3a"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#primaryimage","url":"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1.png","contentUrl":"https:\/\/blog.mozilla.org\/opendesign\/files\/2017\/06\/logo-300x77-1.png","width":300,"height":77},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/opendesign\/mdns-new-design-beta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/opendesign\/"},{"@type":"ListItem","position":2,"name":"MDN\u2019s new design is in Beta"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/opendesign\/#website","url":"https:\/\/blog.mozilla.org\/opendesign\/","name":"Mozilla Open Design","description":"branding without walls","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/opendesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/opendesign\/#\/schema\/person\/477960be85ebafbb04ed44d573db2f3a","name":"Kadir Topal","description":"Kadir Topal is the Product Lead for MDN Web Docs where he works with his team to provide developers with the information they need to build delightful experiences on the open web. He also works with a group of browser vendors and the W3C on the annual Web Developer Needs Assessment. He\u2019s been a long term contributor to Mozilla, having started the German Firefox community in 2002. Kadir lives in the Ruhr area in Germany.","url":"https:\/\/blog.mozilla.org\/opendesign\/author\/atopalmozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts\/643"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/users\/179"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/posts\/643\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/categories?post=643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/tags?post=643"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/opendesign\/wp-json\/wp\/v2\/coauthors?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}