Create "What's New" page for Fx 4 beta 2

VERIFIED FIXED in 4.0

Status

defect
P1
major
VERIFIED FIXED
9 years ago
7 years ago

People

(Reporter: lmesa, Assigned: stephen)

Tracking

unspecified
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

()

Attachments

(6 attachments, 1 obsolete attachment)

Create a "What's New" page based on the design for the First run page. Copy has not been written yet, so all copy is FPO. Also, added SUMO promo on the side.  Will attach url to correct SUMO destination when I get it. 



https://www.yousendit.com/dl?phi_action=app/orchestrateDownload&rurl=https%253A%252F%252Fwww.yousendit.com%252Ftransfer.php%253Faction%253Dbatch_download%2526send_id%253D907758645%2526email%253D2fa9bdd106b0eb041df4df892c4c5fac
Reporter

Updated

9 years ago
Assignee: nobody → steven
Blocks: 578126
Priority: -- → P1
Target Milestone: --- → 4.0
A copy of the /en-US/firefox/4.0b1/ to /en-US/firefox/4.0b2/ was made in trunk in r70301. That includes the /firstrun/ and /releasenotes/ pages too.

/en-US/firefox/4.0b2/whatsnew/ was setup in r70302 with the existing content from the firstrun page. The "Need Help?" box was also added. The columns under "Tell Us What You Think" are wrapping because they are too wide, but I'll update that when I have the actual text.

Will 4.0b2 have it's own /firstrun/ page too?
Reporter

Comment 2

9 years ago
(In reply to comment #1)
> A copy of the /en-US/firefox/4.0b1/ to /en-US/firefox/4.0b2/ was made in trunk
> in r70301. That includes the /firstrun/ and /releasenotes/ pages too.
> 
> /en-US/firefox/4.0b2/whatsnew/ was setup in r70302 with the existing content
> from the firstrun page. The "Need Help?" box was also added. The columns under
> "Tell Us What You Think" are wrapping because they are too wide, but I'll
> update that when I have the actual text.
> 
> Will 4.0b2 have it's own /firstrun/ page too?

So, we were supposed to have a different illustration for the page, but it looks like we won't get it in time for the beta 2.  Instead, we'll use the current first run page/whats new page ilustration and the first run page 9at least for this round) will keep the same copy as before.
Reporter

Comment 3

9 years ago
Change is SUMO promo wording to:

Need Help?
Our support pages have answers and advice specifically for the Firefox 4 beta.
Reporter

Comment 4

9 years ago
Just got confirmation from Cheng, but these promos will not go live with beta
2--we're keeping them on the page so that the localizers can translate them,
but they will not be visible until beta 3, when they will go live.
Updated the SUMO promo/link in r70450.
Fwiw, the link now points to AMO, not SUMO.  No big deal since it won't be used for b2 anyway, but just so we keep this on the radar for b3...
Reporter

Updated

9 years ago
Assignee: steven → stephen
Reporter

Comment 7

9 years ago
Posted file Copy for WN page (obsolete) —
Latest Copy--lets put it in and see how it looks!
(In reply to comment #6)
> Fwiw, the link now points to AMO, not SUMO.  No big deal since it won't be used
> for b2 anyway, but just so we keep this on the radar for b3...

Thanks - fixed in r70617. Should I hit that promo with CSS?

(In reply to comment #7)
> Latest Copy--lets put it in and see how it looks!

Added the new copy (also in r70617). No actually CSS3 transitions yet, but you can see how it flows on the page.
Reporter

Comment 9

9 years ago
(In reply to comment #8)
> (In reply to comment #6)
> > Fwiw, the link now points to AMO, not SUMO.  No big deal since it won't be used
> > for b2 anyway, but just so we keep this on the radar for b3...
> 
> Thanks - fixed in r70617. Should I hit that promo with CSS? 
Do you mean hide it? If so--yes please!
> 
> (In reply to comment #7)
> > Latest Copy--lets put it in and see how it looks!
> 
> Added the new copy (also in r70617). No actually CSS3 transitions yet, but you
> can see how it flows on the page.

Awesome!  I think we may even need more copy, but I think that will be easy to add.  Either that or make the font slightly bigger?

I'll look into it for Monday.
Yes, "HIDE that", not "HIT that". Ahem...

Hid the support feature and adjusted column widths and font sizes accordingly in r70671.
Reporter

Comment 11

9 years ago
Steven G--do you want to start playing with some CSS3? :P 

This is what I'm thinking--please tell me if I'm dreaming too big--not really sure what is and isn't possible.

"like this one" should be called out in some way so people understand what they're looking for on the page.  Maybe the font is a little bigger and underlined in grey.  When someone hovers over that text it gets a touch bigger and glows/ 

next effect: 
hovering over the video player makes it grow slowly.

next effect
"Firefox 4 is off to a great start." On mouse hover kind of speeds off the page horizontally (like a race car) and goes back to its spot in the copy. 

next effect
share feedback link grows slowly on mouse hover

last effect:
"What's New" title spins a few times in place--kind of like a top or like someone flicked it with they're fingers.  


Also, can we reorder the copy so CSS3 comes first in the feature showcase?
Reporter

Updated

9 years ago
Severity: normal → major
Posted patch 5 transitionsSplinter Review
Here are my changes. It's a mix of Laura and Nick's ideas.

We have:
- a rotation on the Firefox logo when hovering the title
- a panning for the background when loading the page (back and forth)
- a zoom, shadow and border color change on hovering the video player
- a zoom when hovering "Share feedback"
- a "demo" transition on "like this one!" when hovering the "CSS3" column

I couldn't work around the bad look on very large screens, it should be fixed though.

I'll join the new images right away.
Posted image Title logo
Posted image Title slogan
And if you want to see the final look : http://hanblog.info/test/mozilla/whats-new/
(In reply to comment #17)
> And if you want to see the final look :
> http://hanblog.info/test/mozilla/whats-new/

Fwiw, that page is extremely choppy and makes Firefox (Minefield) unresponsive. This is on an almost brand new Thinkpad T400s running latest Ubuntu.
This video shows what I'm seeing. Note also the glitch on the right margin. 

http://www.flickr.com/photos/djst/4815034126/
For the right margin, the background should be clipped into the area.

David, after the background animation, what about the other ones ? Are they choppy too ? If not, we could just remove the background animation.

I won't be able to work on that today though.
Talking with Pascal, I've noticed that I shouldn't be using this selector #whats-new img:first-child. It won't play well with localization. We should add an id to target the logo.
(In reply to comment #20)
> David, after the background animation, what about the other ones ? Are they
> choppy too ? If not, we could just remove the background animation.

The other animations are not choppy, it's just the background image.

I realize that this may be unhelpful and unwanted feedback this late in the game, so apologizes in advance for saying it: I'm not sure if the animations communicate a sense of state of the art, hi-tech coolness that I would guess we're trying to demonstrate on this page? This is highly subjective, but to me, the animations seem a bit random (like the "Share Feedback »" link that expands the box when hovering -- why does only one link have this behavior?) and bordering silly (like the spinning logo that unfortunately doesn't really spin around the center of the logo, and is taking the drop shadow with it in the spin -- why is it spinning? because it can? ;)). 

I understand that the aim is to showcase some of the new CSS3 animations, but perhaps this would be more powerful if done on a separate page that puts the animations into more useful contexts? All this said, I'm obviously cool with keeping them and view it as more of a tongue-in-cheek display of what's possible with CSS3 animations. Consider my feedback just my personal opinion. :)
I agree with David's comments from comment #22. We've got a few variations of our own and adaptations of some of Anthony's work as well. Will update shortly.
Steven and I have been working on incorporating some of Anthony's ideas like the hover-animating text while also making things a little more subtle and integrated into the layout. The animations on our version - r70991 - include:
 - video thumbnail pans on hover and a blue border fades in
 - menu items in the main feature have subtle boxes that fade in
 - one animation for each of the three text columns

You can see the latest changes at http://www-trunk.stage.mozilla.com/en-US/firefox/4.0b2/whatsnew/
I did a touch more CSS clean-up in r70992 and r70995 as well.
Reporter

Comment 26

9 years ago
(In reply to comment #22)
> (In reply to comment #20)
> > David, after the background animation, what about the other ones ? Are they
> > choppy too ? If not, we could just remove the background animation.
> 
> The other animations are not choppy, it's just the background image.
> 
> I realize that this may be unhelpful and unwanted feedback this late in the
> game, so apologizes in advance for saying it: I'm not sure if the animations
> communicate a sense of state of the art, hi-tech coolness that I would guess
> we're trying to demonstrate on this page? This is highly subjective, but to me,
> the animations seem a bit random (like the "Share Feedback »" link that expands
> the box when hovering -- why does only one link have this behavior?) and
> bordering silly (like the spinning logo that unfortunately doesn't really spin
> around the center of the logo, and is taking the drop shadow with it in the
> spin -- why is it spinning? because it can? ;)). 
> 
> I understand that the aim is to showcase some of the new CSS3 animations, but
> perhaps this would be more powerful if done on a separate page that puts the
> animations into more useful contexts? All this said, I'm obviously cool with
> keeping them and view it as more of a tongue-in-cheek display of what's
> possible with CSS3 animations. Consider my feedback just my personal opinion.
> :)

I appreciate the feedback David! In all honesty, I do want the effects to be unexpected (and a bit random). I want them to be eye-catching and really show off what we can do. I think there is a definitely a balance between being too eye-catching/annoying and the wow-factor, but because this page is only seen once by users, I'm okay with being a bit more liberal in the wow-factor.
Reporter

Comment 27

9 years ago
Also, is it possible to make the Firefox logo spin again? I really liked that effect.

Also, is there anyway we can still zoom into the background image, or make it move, like in Anthony's version? I think the reason I liked it was because it really went with the illustration and it allowed us to "explore" the scene.  I also liked that something happened immediately on page loading--it peeks curiosity. Otherwise, I'm worried people won't even be interested in finding the other "easter eggs" we have hidden.
Reporter

Comment 28

9 years ago
Updated copy
Attachment #458029 - Attachment is obsolete: true
Assignee

Comment 29

9 years ago
copy has been updated in r71075
Another round of cleanup and polish to the CSS3 transitions based on Laura's feedback has been committed in r71089. Be sure to shift+refresh to get the updated CSS.
Reporter

Comment 31

9 years ago
I can know see the XPCOM-w00t!
Reporter

Comment 32

9 years ago
I'm trying to get feedback from beltzner, hopefully have what need eod today to finish this page.
Reporter

Updated

9 years ago
Depends on: 579368
Reporter

Comment 33

9 years ago
Very minimal copy changes--

Can we get the "More features" link in the top box to say "Feature Showcase"
and that link then becomes an anchor link for the Feature showcase (we want to
keep people on the page to play with our transitions).  Then, under Retained
Layers (bottom right corner of the page), can we reinsert the "More Features"
link that takes people again to the beta features page?
Assignee

Comment 34

9 years ago
As noted over IM. This is a very short page and an anchor scroll link could look broken for most users. I've moved the More features link to the Retained Layers feature.

r71194
Reporter

Comment 35

9 years ago
Looks good to me!  All we're waiting on now is faaborgs video.
I think we should not use the rotation effect on XPCOM. This is not the intended effect per the CSS spec. We should see the whole word rotating (ie. letters should rotate too). Instead, they are staying in the same orientation during the rotation. This is a bug in Gecko and I'm going to file a bug for that.

In the meantime, I think it's not good to showcase a non intended effect. Could you come up with a different transition ?

Updated

9 years ago
Depends on: 581986
(In reply to comment #36)
> I think we should not use the rotation effect on XPCOM. This is not the
> intended effect per the CSS spec...

Good point - we've replaced it with another variation of a shadow animation in r578138.
Wow, nice effect ! Sidenote : If you don't want to add so many IDs, you can play with the + combinator (span + span) or span:nth-of-type(2).

The fade in for #sub-feature is not working every time here. Sometimes it's displayed immediately, sometimes it stays with opacity: 0 and sometimes it's working. I recommend adding something like document.body.offsetLeft to force a relayout.

YAHOO.util.Event.onDOMReady(function() {
	document.body.offsetLeft;
	document.getElementById('sub-feature').className = 'loaded';
});
Anthony: the JS change is done in r71365.
The App Tabs video has been added in r71367.

Comment 42

9 years ago
Is there a different version of the what's new page for OSx and Windows?  If so, Faaborg said that he could create a different video for OSx for app tabs with the OS interface but if not we can keep it the same across all platforms.
(In reply to comment #40)
> Anthony: the JS change is done in r71365.

Great, the effect is now much more reliable here.

Quick reminder: check the number of transitions you mention in the text and the number of transitions we really use on the page. If we count the fade-in effect, it's now 6 transitions.
(In reply to comment #42)
> Is there a different version of the what's new page for OSx and Windows?  If
> so, Faaborg said that he could create a different video for OSx for app tabs
> with the OS interface but if not we can keep it the same across all platforms.

As far as I know, there is only one version.


Is this bug complete?

Comment 45

9 years ago
This bug is complete, updated status
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
(In reply to comment #42)
> Is there a different version of the what's new page for OSx and Windows?  If
> so, Faaborg said that he could create a different video for OSx for app tabs
> with the OS interface but if not we can keep it the same across all platforms.

There isn't a different version of the page, but we do check for platform with Javascript to tweak some elements like default download options and screenshots. An alternate video could possibly be switched in, but probably not tonight ;-)

Validation issue fixed in r71399.
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → FIXED
Can we get someone to test the fade-in effect on a "slow" computer. David, since you had a bad experience with the previous panning effect, is it ok with this one ?
Status: VERIFIED → REOPENED
Resolution: FIXED → ---
Replaced all those IDs with nth-child selectors in r578138.
Some Paris colleagues have tested on Linux machines, the fade-in should be ok.

Closing again.
Status: REOPENED → RESOLVED
Closed: 9 years ago9 years ago
Resolution: --- → FIXED
Verified FIXED (again).
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.