Closed Bug 570609 Opened 14 years ago Closed 14 years ago

create new download page for Firefox 4 beta

Categories

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

Product:
www.mozilla.org
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: jslater, Assigned: sgarrity)

References

(
URL
)

Details

(Keywords: verified-production)

Attachments

(2 files, 1 obsolete file)

Mock up for additional block of text
136.38 KB, image/png
Details
Firefox 4 Beta 1 Main Window Screenshot
222.79 KB, image/png
Details 
As noted in earlier conversations, we'd like to create a new section within mozilla.com (much like we added mobile last year) to cover pages created for the Firefox 4 beta. The twist this time around is that we're modifying the current site's look & feel to convey that this is a new & different product than what's come before (while also keeping a lot of the basic structure for general continuity).

With all that in mind, we've created the first page in the series (the download page) and are ready to start building it. The PSD is available for download here:
http://rcpt.yousendit.com/886408361/1ce18ca609c51c8632a2b490a64eac95

The page is mostly finished, but a lot of things are happening all at once and there are a couple of FPO areas that will be filled in later this week...both are noted as such in the file. My guess is that the copy will change a bit, too.

As for the URL, my preference would be that this and the other beta pages (features, feedback, first run) all be a new subsection within the existing Firefox area of the site. Perhaps something like www.mozilla.com/firefox/beta/download.html for this? Not sure if that presents a conflict with the /download.html for the general release versions of Firefox, since that page is the one you see while downloading rather than the one where you initiate the download. Am open to suggestions for tweaking there.

Lastly, I know we're on an accelerated schedule here, but Laura is managing those details. Laura, can you let everyone know where things stand?

Thanks-
Target Milestone: --- → 4.0
A few quick thoughts on the new design:

The different background color will require some additional graphics to be over-ridden for this page in the main dark-blue header (it has hard-coded corners intended for a light-background).

The the blue gradient at the bottom of the page (above the footer) may prove difficult to implement. It might be simpler to over-ride this footer background image (preserving the height) and address the bottom of the blue area somehow in this image: http://www.mozilla.com/img/tignish/template/footer-border.png
Oh, another question: will the download button work like the one on the current beta page (http://www.mozilla.com/en-US/firefox/all-beta)? Should it incorporate download size, platform, etc?
(In reply to comment #2)
> Oh, another question: will the download button work like the one on the current
> beta page (http://www.mozilla.com/en-US/firefox/all-beta)? Should it
> incorporate download size, platform, etc?

Yes, it should.
About comment #1, are there are any particular graphic changes we should make now? I know time is tight, and want to make things as simple to implement as possible.

As for comments #2 & 3, the button wasn't really designed to be big enough to fit all the size, platform, etc info in there. Would it be possible to put that info down at the bottom of the promo box, separate from the button itself? Something like http://en-us.www.mozilla.com/en-US/firefox/security/, for example (although there the info is above the button rather than below it).
(In reply to comment #4)
> About comment #1, are there are any particular graphic changes we should make
> now? I know time is tight, and want to make things as simple to implement as
> possible.

I can take some liberties during implementation - nothing major.

The "Download Firefox 4 Beta" text link in the main feature area (under "It all begins here...") - is that another download link?
Hi Steven,
I wanted to pass along the latest PSD for the Fx4 Beta Download page. I revised the IM bubble graphics in the Tell Your Friends section.

https://www.yousendit.com/download/YWhOcHBKbWdmVFpjR0E9PQ

Thanks,
Lee
(In reply to comment #5)
> The "Download Firefox 4 Beta" text link in the main feature area (under "It all
> begins here...") - is that another download link?

Yep!
A couple of notes here:

1. We'd like to change the copy in step 2 (graphic is still FPO, but will be updated later to something pretty similar). Here's the new text:

Become a Test Pilot
Take Test Pilot surveys or click the Feedback button to tell us what you think about the beta. We want to hear from you!


2. We'll be updating that hero screen shot with new images as the UI evolves throughout the beta process (to be clear, what we have now is likely fine for launch, but will change over time). So, please keep that in mind while you're coding this page...anything you can do to keep that file separate so we can easily swap new ones in would save us a lot of effort later on.

Thanks!
This page is basically setup in trunk in r68672 (and r68673).

Preview here: http://www-trunk.stage.mozilla.com/en-US/firefox/beta/

You'll notice the download button has the extra info (platform/size/etc.) and Release Notes and Other Systems & Languages links - those will need to be cleaned up.
Looking good, thanks Steven. As for the info around the download button, how much do you think you'll be able to clean up? For starters, I'd be fine with going with a smaller font size. Also, you can just write "other languages" instead of "other systems and languages" if that helps.

The way the info is handled on this page might be a good model to follow: http://en-us.www.mozilla.com/en-US/firefox/security/
Cleaned up the download button arrangement in r68730. Feedback is welcome.

Just need the image for the Tell Us What You Think feature.
(In reply to comment #11)

> 
> Just need the image for the Tell Us What You Think feature.

Horlander is on the hook for that image.
Steven, some quick copy changes:

In box 1)Can we change "industry-best HTML5 support" to "industry leading". 

Also, under box number 1, we have to add some legal copy:

"As part of the Beta Program, you will receive the Feedback Add-On, which will
run user studies on your machine as you browse. No data will be sent to Mozilla
until
you agree. Learn more[Link to Feedback Privacy Policy which is still TBD]" 

Should probably be in black font, maybe a tiny bit smaller than the font in the box above it. 

Box 2)
Chnage text to "Take Test Pilot surveys or click the Feedback button to tell us what you think."

Thank you!
(In reply to comment #13)
> Steven, some quick copy changes:

Done in r68914. Still need an image for the "Become a Test Pilot" block.
So, we got a reprieve on the check box, but legals still feels like the copy is hard to read. 

Our solution is to put the legal copy (slightly bigger text size) in a horizontal textured box that spans under all three boxes,

{ }   {  }   {  }
{               }  (My ASCI ART)

The new copy should be: 

"As part of the Beta Program, you will receive the Feedback Add-On, which will run user studies on your machine as you browse. No data will be sent to Mozilla until you agree. To learn more, read the Firefox and Test Pilot Privacy Policies."

"Firefox" links to: http://www.mozilla.com/en-US/legal/privacy/firefox-en.html

 and "Test Pilot" links to : https://testpilot.mozillalabs.com/privacy.html

Thanks
Updated style, text, and links for disclaimer in r68956.
Arg.  Disclaimer is still not up to par :(

Remove the newly made texture horizontal box and instead we add the disclaimer to box 1, under the download button. 
Take out the "Firefox 4 Beta includes industry-leading HTML5 support, performance gains and new features. See what’s new." and in its place put this:

"The Beta Program includes the Feedback Add-On, which will run user studies as you browse. No data will be sent to Mozilla until you agree. Read the Firefox  and Feedback Add-On privacy policies."

This means we'll probably have to expand box 1 to fit in all the text.

Firefox links to the Firefox privacy policy. Feedback Add-On links to the Feedback Privacy Policy which is still TBD.  I will file a bug to get that hosted once that legal copy is complete. 


Also, instead of "Become a Test Pilot" can we relabel box 2 as "Give us Feedback"

Sorry for these last minute changes.
John/Laura: the files in comment 0 and comment 6 have expired, and QA would like those for reference; can you please upload them somewhere permanent?
Wording updates from comment #17 done in r68997.
Will a product-details update take care of the Download button linking to the right file for Firefox 4 beta?
A few more quick changes: 
1) "Help build" in the sub-header to "Help make"?
2) Can you please change the copy from  "No data will be sent to Mozilla until you agree" to "No data will be sent to Mozilla without your permission."
3) Under the screenshot of the feedback button, we'd like to add: "Read more about Test Pilot {test pilot is underlined and linked to: https://testpilot.mozillalabs.com/faq.html}
(In reply to comment #18)
> John/Laura: the files in comment 0 and comment 6 have expired, and QA would
> like those for reference; can you please upload them somewhere permanent?

John, can you please upload this?
(In reply to comment #20)
> Will a product-details update take care of the Download button linking to the
> right file for Firefox 4 beta?

Yes - though perhaps there should be a bug filed for this too? It's usually not something I handle. It looks like clegnitto or abuchanan has been doing this recently.

(In reply to comment #21)
> A few more quick changes: 
Done in r69236.
(In reply to comment #18)
> John/Laura: the files in comment 0 and comment 6 have expired, and QA would
> like those for reference; can you please upload them somewhere permanent?

PSDs for this and the other beta pages have been uploaded to a more long-term spot here:
http://www.intothefuzz.com/beta/

Note that these files don't reflect all the changes to the verbiage and other details that have come through since they were originally handed off.
John, are we going to have a redesigned download.html page (https://www-trunk.stage.mozilla.com/en-US/products/download.html?product=firefox-3.6.4build7&os=osx&lang=en-US) for Firefox 4 beta (blue background)?
(In reply to comment #25)
> John, are we going to have a redesigned download.html page
> (https://www-trunk.stage.mozilla.com/en-US/products/download.html?product=firefox-3.6.4build7&os=osx&lang=en-US)
> for Firefox 4 beta (blue background)?

Stephen, that's a great question. At this point I think it's too late to get the page in for beta 1, but it seems like a good idea for the near future. Laura, what do you think?
Priority: -- → P1
(In reply to comment #26)
> (In reply to comment #25)
> > John, are we going to have a redesigned download.html page
> > (https://www-trunk.stage.mozilla.com/en-US/products/download.html?product=firefox-3.6.4build7&os=osx&lang=en-US)
> > for Firefox 4 beta (blue background)?
> 
> Stephen, that's a great question. At this point I think it's too late to get
> the page in for beta 1, but it seems like a good idea for the near future.
> Laura, what do you think?

Bug 574410 filed.
We have some more changes to the structure and copy of this page:

new text beneath the download button:

The Firefox 4 Beta includes the Feedback Add-On which includes you in user studies. No data will be sent to Mozilla without your permission. _More information_

the more information link will lead to the block across the bottom which will read:

Header: Firefox 4 Beta includes Feedback Add-On based on Mozilla Test Pilot

Once you install the Firefox 4 Beta, you will notice the Feedback Add-On in the upper right corner. You can use this to provide instant feedback at any time. You will also be notified about user studies (run by Mozilla Test Pilot) which collect information about how you use Firefox, but not which websites you visit. You have control over your participation, and can choose to opt out of any study, or see what data has been collected. You will be asked before any data is sent to Mozilla, and that data is subject to the Feedback and Test Pilot privacy policies.

Attaching relevant mockup in a second.
Some changes to the existing three boxes:

Box 1: "Install the Beta" should be "Install The Beta"
Move the download button up in the box and remove the text about the operating system and version number and we just need to make sure we serve the right version to each user. 

Box 2:Remove "Take Test Pilot surveys or click the Feedback button to tell us what you think" and instead put ""Click the Feedback button at any time to tell us what you think."  We can remove the sentence and link to test pilot. 

Box 3: Same text, add "Learn more about the beta." with a link from Learn more to the beta features page.
(In reply to comment #29)
> Created an attachment (id=454875) [details]
> Mock up for additional block of text

There's not really a good way to organize the text in three flowing columns  (Firefox can do it, but most other browsers can't).
In r69801 we added new text from comment #28 added using CSS3 columns - so the three-columns just fall back to one wide column in IE (looks fine). Also added Feedback Button screenshot to center column.

(In reply to comment #30)
> Box 1: "Install the Beta" should be "Install The Beta"
Is this backwards? It already has a capitalized "The".

> Move the download button up in the box and remove the text about the operating
> system and version number and we just need to make sure we serve the right
> version to each user. 
That's why the text is there - we can't be 100% sure about locale or platform - I would advise against removing this. Feel free to over-rule me.

> Box 2:Remove "Take Test Pilot surveys or click the Feedback button to tell us
> what you think" and instead put ""Click the Feedback button at any time to tell
> us what you think."  We can remove the sentence and link to test pilot. 
> Box 3: Same text, add "Learn more about the beta." with a link from Learn more
> to the beta features page.

Done in r69801.
(In reply to comment #32)
> In r69801 we added new text from comment #28 added using CSS3 columns - so the
> three-columns just fall back to one wide column in IE (looks fine). Also added
> Feedback Button screenshot to center column.
> 
> (In reply to comment #30)
> > Box 1: "Install the Beta" should be "Install The Beta"
> Is this backwards? It already has a capitalized "The".
Ah--nm.
> 
> > Move the download button up in the box and remove the text about the operating
> > system and version number and we just need to make sure we serve the right
> > version to each user. 
> That's why the text is there - we can't be 100% sure about locale or platform -
> I would advise against removing this. Feel free to over-rule me.]

Yeah, I understand what you're saying, but I think its important to have the button be the first thing people see. Unless there's a way to fit our original button (thats on the current mozilla site) in that space, then I'd rather go without the version info. 
> 
> > Box 2:Remove "Take Test Pilot surveys or click the Feedback button to tell us
> > what you think" and instead put ""Click the Feedback button at any time to tell
> > us what you think."  We can remove the sentence and link to test pilot. 
> > Box 3: Same text, add "Learn more about the beta." with a link from Learn more
> > to the beta features page.
> 
> Done in r69801.

 Can we extend the shading of the feedback add-on in box? It looks weird without the uniform shading and parts of the UI seem to disappear into the box.
(In reply to comment #33)
> > > Box 1: "Install the Beta" should be "Install The Beta"
> > Is this backwards? It already has a capitalized "The".
> Ah--nm.

This is a small nit, but it should actually be "Install the Beta".
Feedback Button screenshot updated in r69844.

Platform/locale moved below the download button in r69846.
Oh, the capitalization on "Install the Beta" was fixed in r69846 as well.
Stephen H--

Can you check out the main screenshot of the new UI on our download page? I just realized that it's an "aspirational" screenshot, and was wondering if you could do a similar screenshot but one of what's actually landed. 

Thanks!

L
Attached image Firefox 4 Beta 1 Main Window Screenshot (obsolete) — 
(In reply to comment #37)
> Stephen H--
> 
> Can you check out the main screenshot of the new UI on our download page? I
> just realized that it's an "aspirational" screenshot, and was wondering if you
> could do a similar screenshot but one of what's actually landed. 
> 
> Thanks!
> 
> L

This should work in that space. Steven let me know if you need something else :)
(In reply to comment #38)
> This should work in that space. Steven let me know if you need something else

Looks like the background squares are merged into the transparent window - can you post one without the background? Thanks.
(In reply to comment #39)
> (In reply to comment #38)
> > This should work in that space. Steven let me know if you need something else
> 
> Looks like the background squares are merged into the transparent window - can
> you post one without the background? Thanks.

Oops! I didn't even notice that.
Attachment #455157 - Attachment is obsolete: true
New screenshot added in r69873 (and background color for IE6 fixed in r69876).
Looks awesome.  

This page, as far as I'm concerned, is ready for QA.  Have at it, Donner!
Nit: "Feedback Add-On" should read "Feedback Add-on"; I'll continue to test, but it's looking good.
(In reply to comment #43)
> Nit: "Feedback Add-On" should read "Feedback Add-on"; I'll continue to test,
> but it's looking good.

Fixed in r69882.
Sounds like this is in QA, so the bug should be closed.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
Yep; I'll verify once the two dependent bugs have been fixed and verified.
No longer depends on: 574410
Platform/locale moved below the download button for OS X too in r70001.
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: