Closed Bug 598431 Opened 14 years ago Closed 14 years ago

Build new Firefox Homepage (non-Fx version)

Categories

(www.mozilla.org :: General, defect)

Product:
www.mozilla.org
Component:
General
Type:
defect
Priority:
Not set
Severity:
blocker

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: tshahian, Assigned: rik)

References

(
URL
)

Details

(Whiteboard: [redesign])

Attachments

(3 files)

homepage copy doc
62.61 KB, application/vnd.openxmlformats-officedocument.wordprocessingml.document
Details
Screenshot of z-index issue in IE
277.59 KB, image/jpeg
Details
PNG problem on IE6
324.59 KB, image/png
Details 
Hi Steven, we're ready to start coding!

Please follow the link below to download the PSD files for the new Firefox Homepage.  


* Please note that the copy, illustrations and screenshot are still FPO, but the overall style and layout is firm. 
 
* We're also working with TRO to create new custom illustrations for the hero space.  The idea there is to have about 3 different characters, each interacting with/holding their own Firefox browser - which will have a screenshot of a relevant page reflecting something about that character.  For example, we like the idea of the creature holding his facebook profile.  We'd transition through these on refresh, or kick in the transitions automatically.

* The "Add-ons" sticker is an area that we're still working on in terms of interaction and figuring out how that space is going to behave upon hover or click.

* The goal is to make this page as lightweight as possible, and compress the file types and tap any other webdev magic to render this page quickly.  Page load-time is critical.  Alex, Steven, and Sean did some basic tests around this a while back.  So, hopefully we're not starting from scratch and we can use some of our learnings from that.

* We're also still brainstorming ways of HTML5-izing the page (and the entire site) in compelling ways.  For example, you might imagine the Add-ons Sticker having some interesting elements come out from behind it when we click.  Or perhaps some of the page elements are presented onto the screen in more interesting/unconventional ways.. similar to what has been done on the ie9 page. http://www.beautyoftheweb.com/.  We're still figuring out these details, but it's something important to keep in mind.  

Please let me know if there's anything else I can help provide.  Or if you have any questions.  We're looking to get this site built asap and start some initial testing that Laura Forrest is leading.  Meanwhile, we'll update this bug as we have the FPO content more baked out.

Thanks!

mozilla.seanmartell.com/engagement/mocodotcom/mocodotcom-PSDs.zip
woot!
Love the enthusiasm! :)
Whiteboard: [redesign]
Attached file homepage copy doc — 
Final copy is now ready for this page - see attached (the doc includes the links, too). It's a little different from what's shown in the mockups, but I wrote it to keep the lengths as consistent as possible, so I'm not anticipating any major changes. Please let me know if you have questions or concerns, though.

Two other items of note:
- I updated the title of this bug to reflect the fact that this is the version of the homepage for people who aren't on the latest version of Firefox. Anyone running the latest 3.6 and above should see another page (that I'll be creating a bug for soon). 

- the final illustrations are in progress and should be ready next week at the latest. There will be three of them.
Updated the title of the bug per comment #3. 

Also, I'd like to discuss the URL for this page, as our segmentation has changed a bit (Alex, Steven...I emailed about this yesterday).
Summary: Build new Firefox Homepage → Build new Firefox Homepage (non-Fx version)
Final illustrations are now available at:
http://deliciousdesignleague.com/ClientDL/FFHomepage_Final Illustrations.zip

Let me know if you have any issues as you build them into the page. Note that there are three of them that should rotate equally (like we do now).
Steven - 

From a page load perspective Blake and I have established some acceptance criteria around the homepage. (Other main pages to come). The idea is to hit or exceed the following benchmarks before launching to 100% of visitors and to build, design, and measure with these numbers in mind:

    * 2.5 second page load time. Our current is 2.44 on the optimized version of the download page (this was taken from Blake's machine on a office connection)
    * Download button loaded and clearly noticeable before other main graphics

Keep file size of final pages within a reasonable range of the current site. Note that while these are helpful benchmarks if we can get a larger file size to load quickly that's great:

    * Homepage   Total: 250Kb 
    * /firefox/firefox.html   Total: 334Kb
    * /firefox/ie.html        Total: 220Kb 

Download button clickthrough rates within the following ranges

    * Mozilla.com 38% - 44%
    * firefox/ie 67% -73%
    * firefox/firefox 53% - 58%

Not all of these requirements are dependent on page code alone, of course, but I wanted to get these targets on the record so we know what to shoot for! We also should have ample time to optimize before pushing this out to the majority of visitors.
Awesome stuff in comment #6 - thanks Laura.
Thanks Laura!  Quick correction, the 2.44 second page load time comes from real world performance on the en-US page (not my local machine).
The preview JPGs of the final illustrations found in comment #5 seem to include some updates (color of add-ons button, at least) vs. the PSDs provided in comment #0.

Could we get an updated PSD?
(In reply to comment #9)
> Could we get an updated PSD?
Yep, we're on it.
Looking good, thanks Lee! Steven, the file in comment #11 is basically the final version of this page with the exception of the screenshots shown in the browser window (and the browser window itself, given that this is now a 3.6 page).

We'll have those for you early next week...sound good? And are we still on track for having this page ready for testing & QA next week?

Thanks!
Just want to mention again that having illustration elements overlay the top menu might not be doable.

The illustrations are contained in basically a square and that PNG to its outer limits in each direction will mask over any underlying UI if it is overlapped. Same goes for the circle CTA - that needs to be on top as well.

Unless Steven has some thoughts on how we can do that with z-index and masking, we may have to edit those.
(In reply to comment #13)
> Just want to mention again that having illustration elements overlay the top
> menu might not be doable.

Sean, since it's only Mr. Bunny Ear that overlays the header menu, I was thinking of either having the ear drop behind the menu (looks fine) or cheating and absolutely positioning an additional image with just the tip of the ear over the menu.
Oh, also, I noticed in the previews that Foodie has a short blue gradient capping off the bottom of the screenshot, while Bunny and Curly don't. I'm assuming they all should have this element?
ok, great! What about the CTA circle layered beneath? will that be clickable with a PNG over it?

As for the gradient, I think that was originally a multiplied layer to look like a wee dropshadow.  doesn't look multiplied there, but if it could be added in, that'd be great - unless there was other feedback I missed along the way.  John? Lee?
Thanks guys. If we can keep the bunny ear going over the header in some way, that would be cool, but if having the extra image causes any page load slowness or other complications I'm fine having it tuck under.

Yes, please do add the gradient beneath all the screenshots. Thanks!

Lastly, I kind of mentioned this in comment #12, but I want to make sure that it's super easy to swap new screenshots (and new browser chrome) in and out of the main window. This is something we'll want to do from time to time, and localizers will be doing it as well, so it needs to be pretty simple. Let me know if there are any complications there.
sorry all, yeah that slight drop shadow was misplaced by me on accident. good catch!
Depends on: 605263
Depends on: 605892
OS: Mac OS X → All
Hardware: x86 → All
Keywords: qawanted
Hey John,
per yer comments, here are some new mockups/screenshots for you:

Curly - new FB screenshot
http://intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_03_curly.jpg

Bunny - 2 different Personas here:
http://intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_03_jolly.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_03_sparrow.jpg

Foodie - good to go
Steven, please update when you can. Thanks!
Depends on: 611692
After our last round of testing we've decided to launch with this new and improved version of the homepage for the non-Fx version of the homepage:

http://www.mozilla.com/en-US/nova-test-596010/upgrade.html

From this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=612741

Steven, this is the version that should go live on launch day. There are some other tweaks needed before then to make it perfect: 

1. Make sure the image does not render jagged
2. That the type styling in the 4 pods below the hero match the non-capped Georgia font of this mockup:
http://intothefuzz.com/leetom/Mozilla.com/JPG/home_newusers_test_02f.jpg
3. That the new header is used, and includes drop-down items (https://bugzilla.mozilla.org/show_bug.cgi?id=615309)
Depends on: 615309
No longer depends on: 615309
+1 for everything in comment #24. Thanks Laura.
Just want to make sure I'm clear on a few things before implementing: 

 - There will be no MetaBlack (woff/eot) font on the home page at all.
 - The home page (and only the home page) will have a minimal footer without images or navigation (this means no newsletter sign-up).

Will any of these design changes spill over into other pages on the site? If it performs better, perhaps we should be looking at a minimal footer on all pages?
Those assumptions are correct, yes. I know Anthony did a bunch of additional code cleanup on that page, so whatever else is happening on the back-end should be preserved as well.

> Will any of these design changes spill over into other pages on the site? If it
> performs better, perhaps we should be looking at a minimal footer on all pages?
As of now, we're not planning on having these changes affect other pages on the site. It's always possible, but generally speaking, the other pages have different goals than the download page.
How about the screenshot platform. The tested version was Windows XP.

We can do some platform detection JS for mac/linux, though we are trying to limit javascript on the home page.

Should we do platform detection? If not, what should the default be? XP? Windows 7?

I'll be making a new screenshot(s) regardless.
It would be nice to have platform detection in place for the screenshot - what kind of impact would that bit of js have on page performance, do you think?

If we don't do it, let's use Windows 7 for the screenshot.

Also, before you take any new screenshots, please note that I'm about to update bug 606623 with a copy change request (that would then show up in the screenshot).
This new simpler design is implemented in r78641. Only Windows 7 screenshot so far. We'll have to experiment with switching in mac/linux screenshots and see if/how it affects performance. If it turns out that the platform detection doesn't hurt performance, should do do an XP screenshot too, or Windows 7 good enough for all Windows users?

By the way, this change dropped 4 HTTP requests and about 95Kb from the home page load (a lot, but less than I expected given that we dropped the giant creature and the WOFF font).

Before: 17 requests, ~212Kb
After:  13 requests, ~115Kb

We may be able to eliminate a few more requests by further amalgamating CSS/JS files.
Thanks Steven. To keep things simple, I'm fine with just using Win7 for all Windows users.

Anthony, it'd be great if you could double-check this page since you worked on the test version.
Added Mac and Linux screenshots in r78667. The way the inline javascript works, there doesn't appear to be any performance impact.

If you don't have the other platforms to see the other screenshots (since detection/display is automatic), you can see them here:

http://nova.stage.mozilla.com/img/home/screenshot-shadow.png
http://nova.stage.mozilla.com/img/home/screenshot-shadow-mac.png
http://nova.stage.mozilla.com/img/home/screenshot-shadow-linux.png
Pending any further optimization work from Anthony (might we in-line download.old.js?), this page is ready. Anthony, can you chime in and let us know if we could mark this as FIXED?
Severity: normal → blocker
Reassigning to Anthony to either update with further optimization work, or mark as complete.
Assignee: steven → anthony
Commited r78973.

I've inlined all JS, removed jQuery since it's not used on the homepage.
Removed fonts on this one since IE downloads the .eot even if the font is not used.
I've used ImageOptim to recompress the images.
And I've inlined home.css.

The last thing we could do to perform better is to reduce the size of download.old.js.
Severity: blocker → normal
Component: www.mozilla.com → www.mozilla-japan.org
Commited r78975.

Forgot to inline all CSS.
So down to 10 requests, 90kb.

Testing from Dulles, VA:
IE6 IE7, start render ~0.7s, doc complete ~1.8s
IE8 IE9, start render ~0.6s, doc complete ~1.6s

Filmstrip for IE8 : http://www.webpagetest.org/video/compare.php?tests=101209_2BP7-r:3-c:0
Assignee: anthony → nobody
Status: NEW → RESOLVED
Closed: 14 years ago
Component: www.mozilla-japan.org → www.mozilla.com
Resolution: --- → FIXED
Thanks Anthony!
Found a regression on IE6, will look tomorrow.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(In reply to comment #39)
> Found a regression on IE6, will look tomorrow.

Anthony, I presume this is the regression you're referring to, but just in case, I've attached a screenshot.
Severity: normal → blocker
Attached image PNG problem on IE6 — 
No, my regression is on IE6. I'm looking at VMLs solution to have transparency.

This looks like IE7, I don't know if it was like that before my optimisations. I'm installing an IE7 VM to check.
Thanks Anthony. I'm officially assigning this to you. Please keep us posted on your progress.
Assignee: nobody → anthony
Commit r79317. Restore the green background for IE6.
Keywords: qawanted
Status: REOPENED → RESOLVED
Closed: 14 years ago → 14 years ago
Resolution: --- → FIXED
verified fixed http://www.mozilla.com/en-US/firefox/new/
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: