{"id":932,"date":"2010-02-08T08:03:05","date_gmt":"2010-02-08T16:03:05","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/"},"modified":"2010-02-08T08:37:49","modified_gmt":"2010-02-08T16:37:49","slug":"getfirebug-com-redesign-launched","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/","title":{"rendered":"GetFirebug.com redesign launched!"},"content":{"rendered":"<p>If you&#8217;ve happened across the <a href=\"http:\/\/getfirebug.com\/\">GetFirebug.com<\/a> web site recently, you&#8217;ll notice everything has a rather pleasant freshly painted smell. After a much-too-long delay, we&#8217;ve finally updated the design and layout for the official Firebug web site, and introduced a lovely new icon by our resident Iconmaster General <a href=\"http:\/\/seanmartell.com\/\">Sean Martell<\/a>.<\/p>\n<p>Even with intense competition from tools integrated into other web browsers, Firebug is arguably still the leading web development tool in use, with <a href=\"https:\/\/addons.mozilla.org\/en-US\/statistics\/addon\/1843\">nearly two million active daily users<\/a>. Its web site needed to reflect Firebug&#8217;s capabilities more clearly. With that in mind, the primary goals with this redesign were to make the official Firebug web site easier to use, more pleasant to look at, and give Firebug more of a traditional software-style layout to highlight its many positive qualities.<\/p>\n<h2>GetFirebug.com: Before<\/h2>\n<div class=\"thumbimg\"><a href=\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original1.png\"><img decoding=\"async\" loading=\"lazy\" style=\"border:1px solid #aaa\" src=\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg\" alt=\"firebug-original.png\" width=\"650\" height=\"487\" \/><\/a><\/div>\n<h2>GetFirebug.com: After<\/h2>\n<div class=\"thumbimg\"><a href=\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/Firebug-new1.png\"><img decoding=\"async\" loading=\"lazy\" style=\"border:1px solid #aaa\" src=\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/Firebug-new-tm.jpg\" alt=\"Firebug-new.png\" width=\"650\" height=\"491\" \/><\/a><\/div>\n<p>It&#8217;s a fairly straightforward design, so there&#8217;s not a lot of interesting production notes to highlight, but here&#8217;s some specifics on what went into this redesign:<\/p>\n<ul>\n<li>The layout is roughly based on the <a href=\"http:\/\/960.gs\/\">960 grid system<\/a>. The original hope was to do the site in a fully fluid layout, but time constrains intervened.<\/li>\n<li>Headers and pull text are in the gorgeous (and open source!) <a href=\"http:\/\/www.campivisivi.net\/titillium\/\">Tittillium<\/a>, thanks to <a href=\"https:\/\/developer.mozilla.org\/index.php?title=En\/CSS\/%40font-face\">@font-face<\/a>. The body text was originally set in <a href=\"http:\/\/www.droidfonts.com\/\">Droid<\/a>, but due to a legibility issue on Windows machines with text-smoothing disabled, it was switched to the more common Trebuchet MS.<\/li>\n<li>The pages are build using the HTML5 doctype, with <a href=\"http:\/\/jquery.com\/\">JQuery<\/a> and the <a href=\"http:\/\/fancybox.net\/\">Fancybox<\/a> plugin powering the modal pop-ups.<\/li>\n<li>The screencast on the homepage uses the <a href=\"http:\/\/camendesign.com\/code\/video_for_everybody\">Video for Everybody<\/a> system to embed the OGG video, with MP4 and Flash fallback for other user agents.<\/li>\n<li>The homepage blog feed pulls in from the <a href=\"http:\/\/blog.getfirebug.com\/\">Firebug weblog<\/a> RSS feed using <a href=\"http:\/\/simplepie.org\/\">SimplePie<\/a>.<\/li>\n<li>For this iteration, we wanted to switch the site over to a simple content management system, and ended up settling on <a href=\"http:\/\/grabaperch.com\/\">Perch<\/a>. It has its shortcomings, but it was straightforward enough and easy enough for me (mostly a designer\/UX guy) to implement.<\/li>\n<li>Sean passed along a few images that inspired the sparkly new icon. Originally, we tossed around the idea of doing something cartoony and heroic, like <a href=\"http:\/\/mozilla.seanmartell.com\/firebug_torch.png\">this lil&#8217; dude<\/a>, but ultimately decided to go with a more, well, buggier bug.<\/li>\n<li>Photographic inspiration:  <a href=\"http:\/\/www.ent.iastate.edu\/images\/coleoptera\/dogbane\/dogbane_beetle.jpg\">Bug 1<\/a> \u2022 <a href=\"http:\/\/www.wildanimalsonline.com\/insect\/firebug-pyrrhocorisapterus.jpg\">Bug 2<\/a> \u2022 <a href=\"http:\/\/farm4.static.flickr.com\/3176\/2738273721_ec11488947.jpg\">Bug 3<\/a> \u2022 <a href=\"http:\/\/www.naturspaziergang.de\/insecta\/Wanzen\/Wanzen-Fotos\/Pyrrhocoris_apterus-03-03-09_001.jpg\">Bugs!<\/a><\/li>\n<\/ul>\n<p>It&#8217;s been a long time coming, and we hope you like GetFirebug.com&#8217;s new set of clothes. The content is currently being updated and will roll out as it is completed, but in the meantime, please <a href=\"http:\/\/getfirebug.com\/\">kick the tires<\/a> and let us know what you think.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After a much-too-long delay, the GetFirebug.com web site redesign is now live. Here&#8217;s a few production notes and other thoughts on how the revamped web site for one of the top web development tools came into being. <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/\">Continue reading<\/a><\/p>\n","protected":false},"author":1438,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[422,288],"tags":[264783,500,809],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>GetFirebug.com redesign launched! - Mozilla Web Development<\/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\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozilla\" \/>\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\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/\",\"name\":\"GetFirebug.com redesign launched! - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg\",\"datePublished\":\"2010-02-08T16:03:05+00:00\",\"dateModified\":\"2010-02-08T16:37:49+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage\",\"url\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg\",\"contentUrl\":\"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GetFirebug.com redesign launched!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9\",\"name\":\"mozilla\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g\",\"caption\":\"mozilla\"},\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GetFirebug.com redesign launched! - Mozilla Web Development","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\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/","twitter_misc":{"Written by":"mozilla","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/","url":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/","name":"GetFirebug.com redesign launched! - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage"},"thumbnailUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg","datePublished":"2010-02-08T16:03:05+00:00","dateModified":"2010-02-08T16:37:49+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#primaryimage","url":"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg","contentUrl":"http:\/\/blog.mozilla.org\/webdev\/files\/2010\/02\/firebug-original-tm.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2010\/02\/08\/getfirebug-com-redesign-launched\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"GetFirebug.com redesign launched!"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/70ae25c16f09d053c6d8b5eac29dbda9","name":"mozilla","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/e77ee64829d0c3831212656324f746d1","url":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/75d2017e019c87560fe5d148a64659dc?s=96&d=mm&r=g","caption":"mozilla"},"url":"https:\/\/blog.mozilla.org\/webdev\/author\/mozilla-2\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/932"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/1438"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/932\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=932"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}