Help us test the new staging site

We are making progress with the relaunch of and we’d like to invite you to help us test things. All content has been copied over to the staging site and we can now start checking to make sure things are working correctly.


Things to check include making sure links among pages are working, verifying that all current content is there and identifying needed style tweaks. Feel free to let us know about any issues you see (by updating the tweak page or commenting on this post) to make sure we have everything covered.

Known issues include:

  • Any pages with special behaviour aren’t set up yet. This includes the feeds on the home page, news, mirrors page, etc.
  • Home page layout/styles are broken.
  • Breadcrumb navigation is not yet implemented – as a result, menus do not yet reflect the current active page.
  • There are lots of little changes that still need to be made that will improve the overall polish of many pages.

28 thoughts on “Help us test the new staging site

  1. I personally don’t like the new website. 1/4 of the page is wasted by this big menu/logo at the top, and the page is too redish IMO (reminds me USSR, go figure why).

    Also, the “Our projects” block on the home page is broken. Only the Fx and Tb logos are visible, with only a part of the SM and Bz logos. Maybe because the font looks really large by default?

    1. The size of the header will be addressed by using media queries to avoid taking up too much space when screen sizes or browser widths are below a certain threshold.

      For the Our Projects block on the home page, this is a known issue. The home page layout is broken right now.

  2. Our project page ( currently has a menu/sidebar on the left of our page with links to other pages for our project like status, feedback, etc. This menu/sidebar is similar on other project sites and is now missing for these proejcts on the staging server, too (like

    I personally also have an issue with how much real estate is being consumed with the header and footer but it isn’t going to keep me awake at night πŸ™‚

  3. I don’t know what happened with my comment I posted. Either it didn’t like the length or it’s queued. If this comment shows up, I’ll try again in smaller pieces!

  4. OK, part 1:

    Here’s some things I found. Some real bugs mixed with my opinions…

    1. The body text color is too bright. On older LCD displays with narrow viewing angles, or for people who are somewhat visually impaired, the contrast to the background is too low.

    2. The gray horizontal rule above the body text on all pages with TOC boxes doesn’t really fit in. It is too narrow or too wide, I think. Perhaps it should be removed all together.

    3. Everything seems a bit misaligned. The page header begins 126 pixels from the left page boundary, the headings around 189 pixles, the TOC boxes around 159 pixels, and the logo around 190 pixles. It results in a quite “jumpy” look. Also the heading on the front page begins 243 pixles from the left.

    4. The heading on is positioned differently than e.g. I think the FAQ placement looks the best for all pages, just remove the horizontal rule and the visual problems #2 and #3 will be solved! πŸ˜‰

    5. Also, the font size on some of the pages (e.g. FAQ) is too small. In combination with the low contrast (see #1) it gets really hard to read.

  5. 6. The definition list definitions (dd tags, e.g. on should have some bottom-margin. It’s hard to see what belongs to what. The dd tags on on the other hand have nested p tags. I don’t know if that’s according to standard, but it’s somewhat unnecessary.

    7. The Blogs and Feeds page doesn’t pass W3C’s XHTML validator. Among other things it contains an unclosed em tag.

  6. 11. The page could make use of a TOC box. I don’t think the bullets in the ul should be visible. The headings seem non standard. The images should either float left or right — it doesn’t look especially nice now. πŸ™‚

    12. I still think the page header is too big (and dark and clumsy) – on a 1280×1024 resolution it takes up almost 1/3 of the page. The layout is very top heavy, especially considering the bright body text (see #1 above).

  7. 13. The text in search field (“SEARCH”) doesn’t dissapear on focus.

    14. The TOC boxes, I think, would look better if the items didn’t have bullets.

    15. I think should have a more prominent link. Perhaps in the page footer below Our community.


    It’s just *NOT* the way a friendly community site (one that is nicely uncapitalized “”) should be. Get rid of most of the all caps!

    Having said that, I think the overall layout of the top is pretty crisp, nice palette.

    * The caps in “WE’RE A GLOBAL COMMUNITY of thousands” make them look like press releases and so actively discourage people from reading them.

    * Then you introduce a different style from “MORE”, “…READ ON” at the bottom. Pick one approach for continuation.

    * The “MORE” links overwhelm the text preceding them,

    * You have two styles for “VIEW ALL”, which is disruptive.

    * I agree with others the black header is too big. Reduce the space above and below the four links, and remove the dark dividing line under “OUR CAUSES”.

    * The way the red search box is framed doesn’t work for me and it doesn’t align horizontally with anything else. The cleanest approach would be to put it in the top LOOKING FOR line, or if you want to keep it here you could have it poke up into the black area to line up with the other items instead of dropping down off the red line.

    * When I type in the search box the text gets speckled with the gray “SEARCH” word. Search should be lowercase and should immediately vanish when you start to type in the search box.

    In my Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2a1pre) Gecko/20090730 Minefield/3.6a1pre, the “Our Products” box ends at Firefox, with part of a Thunderbird logo underneath below the gray area. In Konqueror, Thunderbird appears to the right of Firefox then part of what looks like a SeaMonkey logo appears below the gray area.

    In this Products section, having the product name aligned with the bottom of the icon and more text realigned below looks ugly and wastes space. Instead put the product name vertically aligned with the top (or maybe center) of the icon and the text below it.

    By having a gray background box for products that’s almost the same gray as the body text, you’re confusing the eye. Maybe use a lighter gray as the box for products, like the gray of the “Search” hint.

    The firefox.png icon has a distracting gray smudge at its lower right.

    The Latest news items use a different, larger font size than the “We’re a global community” items. Use the same font size for them.

    The first rule under “Latest news from Mozilla doesn’t align with the others, it aligns with the header. Eliminate it.


    Subsequent pages look pretty nice!

    Reduce or eliminate the indent of the bullet for bulleted items. The first level of UL LI bulleting looks indented as much as a third level of bulleting.


    Use a similar approach for the featured projects on the projects page to the one I’m suggesting for the Products section of the home page: no bullet, icon on the left, heading and text next to it.


  9. I agree with Nuss, lose the gray bar over some headings. That brick red h1 and TOC bar design is so strong, it doesn’t need anything competing with it.

    I think the body text gray is too light.

    Along with what Nuss says, definition list’s dt and dd should not be a smaller font.

    It’s weird that in the localnav div for the section TOC that the heading item does not look like a link until you roll over it. Let it have the hyperlink color.

    The light blue link color is identical for visited and unvisited links, which is bad for exploring the site. Jakob Nielsen agrees, #3.

    The 404 page, e.g. , needs work, directives appear.

    In Firefox 3.6a1pre and Konqueror, the horizontal scrollbar never appears even if I make the page so narrow that most content is invisible.

    In the footer:
    * There’s too much black space below “Contact us”.
    * In the first column “mozilla” is spaced too close to the lizard and/or “Portions of this content” is spaced too far away.
    * The column headings are too low, they should line up with the lizard’s eye πŸ˜‰


  10. The page contains several JavaScript links with no fallback. This breaks tabbed browsing, one of Firefox’s most lauded features, and those browsing without JavaScript enabled.

  11. On my 1024Γ—768 screen, it’s much too wide. Also, the search field label should probably disappear when typing; now my text disappears behind “search”. And wth, font-size in pixels and on li, p, code? Just go for 100% as a base size, please.

  12. Yes clearly the whole website in not aligned right. I do only see the tip of the seamonkey and bugzilla logos, and the “get involved & ticker” box are under the text, I guess they should be on the right?

    News could be a bit less prominent and the bottom bar with all the links a bit more visable (or noticable).

    I like the new style, but content driven is still important in my book…

  13. One thing I don’t think I ever realized during the design iterations and last mockup is how *long* the new homepage is; it’s 4 whole screens long. By contrast, the current page fits in 1 single screen 😦 (Ironically, the broken 404 page–see below–has more “content” above the fold.)

    Also, is it a known issue that .htaccess redirects are broken? None of the ones I’ve tested for the old Camino pages work; I get a broken!? 404 page instead.

    1. About the length of the home page, much of this is coming from the broken layout. On an earlier version that wasn’t broken, the entire home page was just two screens and most of the information was above the fold (news, half of the community ticker, the link to the store and the footer were below the fold on my screen).

      About the redirects, there are some Apache configuration tweaks that are still needed.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s