Website/Mozilla.org/Archive/HomepageRedesign/Coding Notes

General

• The page requires horizontal scrolling. It should adapt to varying screen resolutions and monitor sizes.
  • David: I'm not sure what page this comment is referring to. There are pages on the site that require scrolling due to use of pre tags, for example, but the home page only brings up a scrollbar at a pretty narrow width.
  • Gordon: It may be referring to the fact that there is a lot of wasted space on the right side of the homepage on very wide screens. Or, at least, that's something that I would make a note of. The fixed width is may not be the best use of space. Perhaps make the news items in the right column flow to the right instead of just down? That would allow more to be shown above the fold while also taking advantage of all the space available.
  • David: The page isn't really fixed width but it doesn't expand all that much. I think this is something we can look at more closely when we code the sub-pages.

Header

• "mozilla" text in header seems to vary depending on browser. Firefox (looks extra bold), Chrome (looks closest to PSD) and Safari (different font?) on Mac all look different -- a WOFF issue I guess?
  • Steven: These differences all depend on how the particular browser renders the font. I've prepared a rendering comparison of IE, Chrome, Firefox, and Safari on on Win/Mac/Linux. The variations are quite small and acceptable, I think. Safari doesn't have support for WOFF or EOT fonts (yet?) and there isn't a web-friendly license available for the TrueType/OpenType version.
  • David: It's fine to have things vary slightly across browsers, but ideally the way the font looks in Firefox should match as close as possible to the design. Right now the letters look too bold (for instance, the second 'l' and the 'a' are almost touching in the coded page but not in the design).
  • Steven: David - can you post a screenshot off the issue? The only sub-optimal rendering I'm seeing is the "i" and first "l" are too far apart in Firefox 3.6 on Mac (and only on Mac). This is fixed in the 4.0 betas.

• At narrow widths the search box floats under the nav items. Ideally the two words in each nav item would stack to make more room for the search box. See example

• Note that we made some changes to the header in the sub-page design process. These can be incorporated now or we can update later when those pages are coded. Specifically, nav links capitalized and spacer graphic removed. See example

Body

• Were we going to be able to rotate the intro blurb for A/B testing? Second blurb would be: We're Building a Better Internet. If we can do this, we'll need to discuss hooking it into WebTrends the right way to track click through rates.

• "Download Firefox" and "Download Thunderbird" buttons should be hooked up to actual downloads instead of pointing to those sites

• On slow connections the 3 featured areas stack in the page -- is there a way to more gracefully handle a slow connection by hiding those extra featured items before everything fully loads?

• Is it possible to stop the rotation of the feature items when hovering? Don't want people to try to click on a moving target.
  • Gordon: Also, manually clicking on a featured item tab should reset the rotation timer. It's rather frustrating to click one tab, only to have it immediately transition to the next one.

Resolved Issues

• Open issue for reviewing In the News section that is not on staging site yet
  • StevenGarrity: Bug 605811 filed for this. (and done!)

• Add Drumbeat to featured area between Thunderbird and More. (done in r76104)

• Content should be for Firefox 3.6 instead of Firefox 4 beta (done in r76036)

• "Get In Touch" text in sidebar on Get Involved page is aligned out of the sidebar area. (fixed in r76034)

• Paint swatches missing in footer (fixed in r76033)

• In footer, let's take the patch for replacing the 'Page History' link with last modified date. Bug 521706 (Done in r76032)
  • David: There was an issue with the patch so let's leave that out of this and check it in another time.

• At narrow widths the height of the featured box changes as it scrolls through the tabs -- can we have a common height set?
  • Steven: It's tricky to set a common height, as it has to be tall enough for the text even when wrapped for narrow screens. I've made a slight adjustment in r76030 that keeps the first two pages more commonly in line. The third is harder, as it is a different layout.
  • David: Sounds good. We can revisit the design of the third one if we get a lot of bugs about the height changes.

• It looks like the Thunderbird featured item is larger than the other two, so the box height changes when it comes and goes - may be connected to the item above, but seeing that on a 1400px wide screen as well (SeaMonkey trunk / Gecko 2.0b7pre).
  • See above.

• A vertical scrollbar appears at the right edge of the featured area when clicking on Firefox, Thunderbird or More Projects tabs in Firefox 3.6 on Mac and Firefox 4 beta on Linux but not Firefox 4 beta on Mac, Safari or Chrome (didn't test IE). (fixed in r76024)

• In "More Projects" graphic we should replace the Miro icon since they seemed to have moved off of XULRunner. Can you swap with the Kompozer icon or should we ask Lee to update the psd? (done in r76023)

• Form boxes overlapping with text on Open Web Fund page. (fixed in r76019)

• Overflow problem seems to be fixed. Thank you!

• For "And we’re dedicated to keeping it free, open and accessible to all. Learn more" the link should point to mozilla.org/about/mission.html.

• "Donate now" in main promo should link to Open Web Fund page.

• Update side bar blurbs with real copy.

• Privacy Policy link in newsletter sign-up should point to Privacy Policy on mozilla.org.

• Add WebTrends tags for main promo, Firefox and Thunderbird download buttons and newsletter sign-up button.

• Change ordering of global nav items to: About Us, Community Map, Our Projects, Get Involved.

• "Learn more" link in Thunderbird featured area not styled same as "Learn more" link in Firefox area.

• There is no option to switch the display language. Preferably this would be a drop-down list on the top left or at the very bottom.
  • David: We don't have this now because there's no localized content on the site to switch to. When we do get localized content, we'll be adding a drop-down menu in the footer in the top right hand space.

• Blue text against a black background is very, very bad even if you are not color-blind. Grey text against a black background is almost as bad.
  • David: moving this out of open issues since this is not an issue for this home page coding project. The footer has been like that for over a year and the current project isn't touching it. We can look into changing this separately though if it's a concern.