Closed Bug 623804 Opened 14 years ago Closed 13 years ago

[Fx4Launch] add HTML5 awesomeness to First Run page

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: potch)

References

(
URL
)

Details

Attachments

(4 files)

Linux screenshot
64.46 KB, image/png
Details
Mac screenshot
31.93 KB, image/png
Details
Windows screenshot
63.08 KB, image/png
Details
Patch to make Tour content work from either /firstrun/ or /whatsnew/
879 bytes, patch
Details | Diff | Splinter Review 
As previously discussed, one of the top pre-Firefox 4 goals for mozilla.com is using the latest & greatest open web technology (we'll just call all that HTML5 as shorthand) to increase engagement, make the content more interesting/impactful and generally add awesomeness wherever possible.

This bug covers the First Run page. The Fx4 version of the page will need to do a few key things - communicate some of the new features & elements of the browser, highlight in the brand messaging (most likely with a video element of some sort) and include a newsletter promo. And, it needs to do all that without feeling busy or cluttered. 

So, it's a tall order but I have some ideas on how it could work. Might need a little design finesse, and will definitely need a lot of webdev help though. 

Mike, I'm assigning this to you as a starting point. Next steps are finding a proper webdev resource (or resources), slotting this into one of the upcoming releases and having a kickoff meeting to get it started. As noted earlier, I'd like this to be a very collaborative project between engagement and webdev.

More background and inspirational links are in bug 620082. As for the timing, this needs to be ready for launch by 2/15.
OS: Mac OS X → All
Hardware: x86 → All
Thanks John -- I also wanted to add in the "Join Mozilla" program which will be featured on this page.
Target Milestone: --- → 1.1
Assignee: morgamic → thepotch
Potch, glad to have you on this project...I'll set up a kickoff meeting for later this week.
Target Milestone: 1.1 → 1.2
Depends on: 626668
Per bug 626668, we have some prototypes to begin playing with. These designs aren't 100% final yet - I think we'll need to see how the interaction affects things before determining that - but they do feel ready to start the next phase.

The files are here:
http://intothefuzz.com/leetom/Mozilla.com/JPG/firstrun_11.jpg
http://intothefuzz.com/leetom/Mozilla.com/PSD/firstrun_06.psd

Potch, based on this and our conversation the other day, do you have enough info to get started? I think the main things to start exploring are: 1) how the interactive tour will work, 2) how the video will work, 3) loading the page in an interesting way.

Am happy to discuss further, of course.
Potch, any updates on your progress here?
Moving this to 1.3 since code freeze is this Thursday.
Target Milestone: 1.2 → 1.3
Summary: add HTML5 awesomeness to First Run page → [Fx4Launch] add HTML5 awesomeness to First Run page
Re-posting Sean's final comment from the design bug:

Final Firstrun design
---------------------- 

PSD:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/firstrun.psd

Preview JPGs:
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/firstrun-main.jpg
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/firstrun-form.jpg
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/firstrun-tour.jpg
http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/firstrun-video.jpg

----------------------

Potch, we should get on a call and discuss some of the subtle things that we
can do with transitions and effects for this page and its interactive elements.

Any clarifications/concerns, send 'em my way. Enjoy!
Depends on: 634154
Potch showed me some early dev work on this yesterday it's looking great. As we work to finalize, there will likely be a few small content tweaks that drop in along the way (such as swapping out the mobile promo for launch, as discussed).

Here's a copy change...this replaces the "browser that's making a difference" text in the upper right. It's a few characters longer, but should still fit (let me know if not):

Made by a global non-profit dedicated to shaping the future of the Web for the public good. _Learn more_.

"Learn more" links to mozilla.org/about.

Thanks!
Target Milestone: 1.3 → 1.4
Can I get access to this work?
(In reply to comment #8)
> Can I get access to this work?

Definitely. James, can I work with you to land some strings in svn tomorrow?
Yeah, that's cool.
I just came to the rude surprise of remembering I don't have commit access to mozilla.com in SVN. I'll open a bug to get access, but until then, I'm stuck.
Depends on: 636675
Committed r83196 for potch.

Visible on http://www-fx4.stage.mozilla.com/en-US/firefox/4.0/firstrun/

I've just taken potch's patch and moved some files into the appropriate directories. But it should use some of the existing code (at least to use the CDN). Potch, you can take a look at /en-US/firefox/3.6/firstrun for that. And I can help.

Also, please note that we need to make sure that this page is as fast as possible. I can also help with that.
Awesome! It's really great to see this. 

I have a few nits to share, but I'm guessing that many of them will be addressed as Potch continues to work on the page. Potch, what's your schedule for having something more final to share? Should I just hold my comments until then, or do you want me to go ahead & post 'em?
> Also, please note that we need to make sure that this page is as fast as
> possible. I can also help with that.

Definitely- I want this sucker to fly :) A few ideas- one is to sprite absolutely every visual element on the page (bg included) into one resource and use -moz-image-rect to split out the backgrounds, etc. Also, since the flow has so little javascript, we can easily go without jquery (I'm using it as a development convenience). Lastly, the tour can be lazy loaded, which make sense since we'll need to see what platform the user is on anyway.
May as well hear pickable nits sooner than later :)
regarding speed, we don't need to cache images for further use therefore data-url could be used

a few nits:

Learn more and the chevron appear on two lines for me, you should add a nbsp to stick them together

The screenshot is a mac one and the first marker is about the firefox button which doesn't exist on mac

The link to step 2 does not work if javascript is disabled

There is lirum upsum text for step 2 but I guess you know it :)
(In reply to comment #15)
> May as well hear pickable nits sooner than later :)

Ok, nits are below (with the caveat that you probably know about most of these):

- would be cool if the page had a little more panache (like we've discussed) in the way it loads rather than everything appearing all at once.
- copy in the upper right needs to change per comment #7
- the big step 1 & step 2 boxes need to have the faint images in there as shown in comment #6
- the "Meet Firefox 4" video won't be ready until March 14 (I know that's super last minute...apologies...it's a long story), but it would be good to put something in there so QA can test. I suggest http://videos.mozilla.org/brand/ as a placeholder.
- when the tour opens up, the blue gradient background disappears (it shouldn't).
- header inside the tour overlay should read "Know Your Browser" instead of "Know Your Firefox".
- tour isn't fully functional yet...is missing some of the markers and copy, and of course it has a Minefield screenshot. (Do you need me to re-send that final copy? Not sure if it ever made it to you)
- the close graphic in the tour overlay is missing.
- the downward pointing gradient below step 1 & step 2 is missing.
- can we make "your email address" in the email field just a bit darker? It's a little faint now.
- will need to replace the mobile promo with the Facebook & Twitter ones when they're ready.

All those nits aside, this page is looking awesome. Thanks Potch!
Also - seems like this is missing some alt tags for maximum accessibility? I know the current page doesn't have them, so I'm not sure if this is intentional or not, but it's probably worth a quick discussion.
Priority: -- → P1
Hey Potch. Really sorry about the lack of clarity about the copy. I didn't realize you didn't have it yet. Here's the info on text for the tour section...let me know if you have any questions.
Copy for main screen:
Step 2: BROWSING TIPS

Tour 1 - PC/LINUX VERSION (Tabs on Top / Firefox Button):
All your menu items are now in a single button for easy access, and tabs have been given top visual priority so you can focus on the content of the sites you visit.

Tour 1 - MAC VERSION (Tabs on Top):
Tabs have been given top visual priority so you can focus on the content of the sites you visit.

Tour 2 (Home & Bookmarks Buttons)
The Home button has moved right next to a handy button for one-click bookmarking of your favorite sites.

Tour 3 (Awesome Bar)
No need to remember clunky URLs - the Awesome Bar helps you find favorite sites in seconds.

Tour 4 (Reload/Stop Button)
Reloading a page or stopping a page from loading has been combined into a single button located next to the Awesome Bar. 

Tour 6 (Add-ons Manager)
The Add-ons Manager has been redesigned to let you discover and install add-ons without ever leaving Firefox.

Tour 7 (End)
Want to learn more about Firefox 4? _Take the tour_ and discover even more awesomeness!
Thanks Sean! Potch, as discussed earlier, these should replace the default promo in the original PSD for launch.
A few more notes on comment #20:

- let's change the FB badge copy to "Facebook badges >>"
- Twitter Party URL: http://twitterparty.mozilla.org
- we're still confirming the Facebook URL, but will have it soon...William, please post here when that's set

Thanks!
Since these videos are the major component of this new page it would be very useful to know how many visitors to this page end up viewing them. 

Potch: here's some tracking code that will let us do that. It should go on the "play" button.

Meet Fx4 Video:
onMouseDown="dcsMultiTrack('DCS.dcsuri',
'/video/firstrun/meetfx4.html', 'WT.ti',
'Meet%20fx%204%20Video');">

Know Your Browser Video:
onMouseDown="dcsMultiTrack('DCS.dcsuri',
'/video/firstrun/knowyourbrowser.html', 'WT.ti',
'Know%20Your%20Browser%20Video');">
(In reply to comment #22)
> A few more notes on comment #20:
> - we're still confirming the Facebook URL, but will have it soon...William,
> please post here when that's set

The Facebook URL will be http://www.facebook.com/Firefox?v=app_122300121174636
Copying Steven & Stephen to help with screenshots on this page. Guys, if you go to http://www-fx4.stage.mozilla.com/en-US/firefox/4.0/firstrun/ and click "Know Your Browser" you'll see what's needed. 

We basically need something to mimic that look & style (i.e., not showing the content below the Chrome), but using the RC version, in all three OS's and using the following content

Twitter - app tab
Pandora - app tab
Wikipedia - Mozilla Firefox start page (about:home)
Add-ons Manager - non-exposed tab (like it is on stage now)

Potch, if you think any of this will mess up the line or markers you have now, please let us know!
I'd prefer the browser to not have any webpage loaded in its content (we can cut the page content out afterward if need be) so it's not too cluttered, but that should suit our needs.
(In reply to comment #26)
> I'd prefer the browser to not have any webpage loaded in its content (we can
> cut the page content out afterward if need be) so it's not too cluttered, but
> that should suit our needs.

Sounds good. Yes, the less content the better.

Also, for clarity, please ignore the wikipedia reference in comment #25...that should just read "Mozilla Firefox start page". (I blame gremlins)
Attached image Windows screenshot — 
Windows, Mac, and Linux screenshots taken as directed at the same width as the current First Run page image. Let me know if anything more is needed.
You guys are good, thanks! Potch, how do these work for you?
these look great- thanks Steven!
Meet Firefox 4 Video: 641654 - coming soon- eod 3/14.
Hey Potch. Looks like this page is pretty close to final at this point. What's still left to do? Am wondering if there's any small polish left that maybe I'm not noticing at a quick glance.
Here's some tracking goodness for Twitter/Facebook. 

Twitter:
onMouseDown="dcsMultiTrack('DCS.dcsuri',
'/button/firstrun/twitter.html', 'WT.ti',
'First%20Run%20%20Twitter');">

Facebook:
onMouseDown="dcsMultiTrack('DCS.dcsuri',
'/button/firstrun/facebook.html', 'WT.ti',
'First%20Run%20%20Facebook');">
r85782, r85667, and r85662 were committed to trunk, and need to be merged to stage for fx4 launch.
I still need a 480p link for the firstrun video. Right now I'm serving a 720p video and downscaling- a major bandwidth waste. Laura, John, do one of you have the URL?
The <title> is missing.

What's New page's Know Your Browser content is blank.
http://www-trunk.stage.mozilla.com/en-US/firefox/4.0/whatsnew/

No l10n chance prior to GA.
(In reply to comment #37)
> r85782, r85667, and r85662 were committed to trunk, and need to be merged to
> stage for fx4 launch.

Awesome, thanks Potch.

(In reply to comment #38)
> I still need a 480p link for the firstrun video. Right now I'm serving a 720p
> video and downscaling- a major bandwidth waste. Laura, John, do one of you have
> the URL?

Sorry about that...I thought that's what they sent already. I have an email in to the people who made the video to get it resized for us asap.

(In reply to comment #39)
> The <title> is missing.
> 
> What's New page's Know Your Browser content is blank.
> http://www-trunk.stage.mozilla.com/en-US/firefox/4.0/whatsnew/

Hmm, that's weird. These pages should be sharing the same exact code. Steven is looking into it, but if anyone else finds anything please post here.
 
> No l10n chance prior to GA.

Pascal has a version of this page that's stripped down and easier to localize.
(In reply to comment #39)
> What's New page's Know Your Browser content is blank.
> http://www-trunk.stage.mozilla.com/en-US/firefox/4.0/whatsnew/

This is happening because  /whatsnew/index.html is just doing a direct PHP include of /firstrun/index.html - however, the firstrun page uses a relative URL for the AJAX call that grabs the platform-specific tour page HTML.

Line #227 of en-US/firefox/4.0/firstrun/index.html:

   req.open('GET', 'tour_' + platform + '.html', false);


Potch, can we either:

1. make this request explicitly look in the firstrun dir: /<?=lang?>/firefox/4.0/firstrun/tour_... or

2. have the JS grab the pathname:
 window.location.pathname + 'tour_' ...

or something similar?
(In reply to comment #41)
> Potch, can we either:
> 1. make this request explicitly look in the firstrun dir:
> /<?=lang?>/firefox/4.0/firstrun/tour_... or
> 2. have the JS grab the pathname:
>  window.location.pathname + 'tour_' ...
> or something similar?

Disregard these suggestions. Instead, I'd recommend just using a ../firstrun/tour_... url - works in both /firstrun/ and /whatsnew/. Patch attached.
Attachment #520651 - Flags: review?(thepotch)
(In reply to comment #43)
> > Firefox4 Features Video in 480 version
> > 
> > http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1[480p].mp4
> > http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1[480p].webm
> > http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1[480p].theora.ogv

Grace, these videos have letterboxing- what I'm looking for is a 16x9 version of the video whose height is 480px.
(In reply to comment #45)
> Grace, these videos have letterboxing- what I'm looking for is a 16x9 version
> of the video whose height is 480px.

Sorry about that Potch. We have a new 853x480 video on the way.
will upload as soon as we get the new version. would it help if i just keep the links provided in comment 43?
committed r85946, merging to stage...
(In reply to comment #47)
> will upload as soon as we get the new version. would it help if i just keep the
> links provided in comment 43?

That would be fantastic :)
(In reply to comment #49)
> (In reply to comment #47)
> > will upload as soon as we get the new version. would it help if i just keep the
> > links provided in comment 43?
> 
> That would be fantastic :)

Hi Matt. CDN not updating. Here are the new links: 
http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1_852x480p.webm
http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1_852x480p.mp4
http://videos-cdn.mozilla.net/serv/marketing/firefox4/FF4_VO_1_852x480p.theora.ogv

Let me know if you need anything else. 

Thanks!
r85966 changes to the new url.
Thanks Potch! Am triumphantly marking this one as resolved.

Raymond, can you give this one more lookover and verify if everything checks out?
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
merged to stage in r85969.
verified fixed http://www.mozilla.com/en-US/firefox/4.0/firstrun/
Status: RESOLVED → VERIFIED
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
Comment on attachment 520651 [details] [diff] [review]
Patch to make Tour content work from either /firstrun/ or /whatsnew/

Review of attachment 520651 [details] [diff] [review]:
-----------------------------------------------------------------

This is decidedly stale.
Attachment #520651 - Flags: review?(thepotch)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: