Closed Bug 868199 Opened 8 years ago Closed 7 years ago

[tracking] Create unified Firefox download experience

Categories

(www.mozilla.org :: Pages & Content, defect, P2)

x86
macOS
defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: cmore, Assigned: cmore)

References

()

Details

(Whiteboard: [kb=1029579] )

Attachments

(1 file)

We have been discussing for a while a unified Firefox Download page that will obsolete the following pages:

http://www.mozilla.org/en-US/firefox/new/
http://www.mozilla.org/en-US/firefox/fx/
http://www.mozilla.org/en-US/firefox/update/

The 3 pages serve almost the same purpose with slightly different content. The goal of this project is to provide a single download experience for all Firefox products that handle desktop and mobile across all platforms with content that varies depending on the visitor's OS and browser.

Project plan:

https://www.smartsheet.com/b/publish?EQBCT=59b62b4c5009478cab08a5bdbbfdb45e
Depends on: 866995
Assignee: nobody → chrismore.bugzilla
Depends on: 767985
Priority: -- → P2
Depends on: 874913
Depends on: 880372
Depends on: 883800
Depends on: 883801
Depends on: 883802
Depends on: 883804
Depends on: 883806
Depends on: 883808
Depends on: 883811
Whiteboard: [test -- please ignore]
Whiteboard: [test -- please ignore]
Just testing that Bugmail is working properly. Please ignore this comment.
PSD Template for /new: http://cl.ly/3l0l3I0W2C1y

Use for: conditional messaging icons and style for all page states, link placement and style, mobile product image.
Depends on: 837778
Depends on: 887935
Nike/Mike: Bug 653876 is the bug to allow for localizing images on Bedrock.

In Template example

{{ img_l10n('firefoxos/screenshot.png') }}

For en-US this would output:

{{ MEDIA_URL }}img/l10n/en-US/firefox/screenshot.png

For fr this would output:

{{ MEDIA_URL }}img/l10n/fr/firefox/screenshot.png
Whiteboard: [kb=1029579]
Depends on: 869937
Depends on: 888512
No longer depends on: 888512
Depends on: 891562
Depends on: 891633
Duplicate of this bug: 866995
I spoke with Lee and he is working on getting us the neutral browser images today.
Mike/Nick: The locale neutral images are here:

https://bugzilla.mozilla.org/show_bug.cgi?id=888512#c18

I figured making this comment in the tracking bug is better than each specific bug. Thanks!
Depends on: 888512
Mike/Nick: There are updates coming to the locale-neutral screenshots based on feedback. Also, we have a content/design review next week and there may be some other adjustments. Logic should stay the same. Stay tuned!
Depends on: 891362
Holly, attached are screenshots of the page on the various browsers/platforms. The Firefox screenshots in these are not the final Firefox screenshots.
Thanks, Michael! I'll be sure to note that the product images are not final.
(In reply to Michael Gauthier [:gauthierm] from comment #9)
> Created attachment 778654 [details]
> firefox-slash-new-screenshots.zip

Michael. What is up with the grey circle in the middle of the android-tablet-firefox-latest|android-tablet-firefox-old screenshots? Is that an artifact from the screenshot?
Chris, those are shots from an actual device. Firefox on Android has low color depth (16-bit vs 24-bit) for images causing banding. See bug 694828.
(In reply to Michael Gauthier [:gauthierm] from comment #12)
> Chris, those are shots from an actual device. Firefox on Android has low
> color depth (16-bit vs 24-bit) for images causing banding. See bug 694828.

Ah! I thought it was just a resized desktop screenshot. That explains it. Thanks!
Depends on: 897080
Updates:

1. SUMO link and second sentence for 'not up-to-date' desktop user is not in banner: http://cl.ly/image/1x3f0G0N1f0k.
See c#6 https://bugzilla.mozilla.org/show_bug.cgi?id=883800#c6


2. For all mobile views, can we allow download buttons and links (at least top link) to show in the viewport? Suggestion would be to reduce vertical spacing between elements on the page and/or minimize banner font size so that all fit in viewport.
 
button initially out of view: http://cl.ly/image/2z1i0y2g0O2q
button in view after scrolling past tabzilla: http://cl.ly/image/3U043Z0O0z3c


3. For all mobile views, left align links that take over the download button area. They are showing up center aligned: http://cl.ly/image/0W1f3l0R2n1c
Mike/Nick: demo2 basic auth is removed: https://www-demo2.allizom.org/en-US/

Pmac: Can you get demo2 chief set up with: https://github.com/mozilla/bedrock/tree/bug-868199-unified-download
Hi Steven, 
What is the best way for me to demo each state of this page?
You could always use a website like: http://browsershots.org/https://www-demo2.allizom.org/en-US/firefox/new/

To test what the site look like in different browsers.
A few comments: 

- I would like to verify that the links in each state are correct. Visually, for desktop states seen through the browsershots tool, everything looks good.

- One pending update: the banner for the 'desktop not up-to-date' user is awaiting a copy update from Matej as well as a possible URL change from SUMO.

- Do you notice that Camino shows up as a 'not up-to-date Fx' user? 
http://browsershots.org/screenshots/c56f99d134dd3a15bae6a79860c944fc


- I've been using browserstack.com to look at mobile page states, but am not able to tell it what version of the browser I am using, so I'm only able to test the looks of the non-Fx user. When looking at Android (galaxy S2) I first received a security warning which we probably won't see when it's live (http://cl.ly/image/3n1G0W1N3k0W) and the download button is not centered with it's supporting links. (http://cl.ly/image/342f3S3C0d29) The alignment issue happens across the Android emulators that I tried. I can try it on my actual Android phone when I get home. 

- for iOS users can we tighten up the spacing between the 3 copy points and the links? 
http://cl.ly/image/2b0Y2A0m0p35

- An overall comment for mobile would be to make sure download button is centered and space between links and 3 copy points are tightened up.
Is there a list of html class names that I could drop into the inspector for each of the states we need to test? Then I will be able to check out the links on each as well.

For instance, when switching from OSX to oldmac, I change the class here: http://cl.ly/image/262v1z223X0v

osx (http://cl.ly/image/3S1s0a1G0X0S) > oldmac (http://cl.ly/image/3s1b190i1A0l)
(In reply to Holly Habstritt [:Habber] from comment #20)
> A few comments: 
> 
> - I would like to verify that the links in each state are correct. Visually,
> for desktop states seen through the browsershots tool, everything looks good.

Here are the various links on the page:
 - Top banner message for desktop old: "Updating is quick and easy." https://support.mozilla.org/kb/update-firefox-latest-version?esab=a&s=silent+download&r=0&as=s
 - Desktop latest:
   - "Learn more about Firefox for desktop" url('firefox.customize')
   - "Need help?" https://support.mozilla.org/products/firefox
   - "Looking for mobile?" url('firefox.fx')
   - "Download a fresh copy" url('firefox.all')
 - Android latest:
   - "Learn more about Firefox for Mobile" url('firefox.mobile.features')
 - FxOS latest:
   - "Learn more about Firefox OS?" url('firefox.os.index')
   - "Discover all the ways to take Firefox on the go" url('firefox.fx')
 - iOS:
   - "Looking for mobile?" url('firefox.fx')
   - "Why don’t we offer an iOS version?" https://support.mozilla.org/kb/is-firefox-available-iphone-or-ipad

> 
> - One pending update: the banner for the 'desktop not up-to-date' user is
> awaiting a copy update from Matej as well as a possible URL change from SUMO.
> 
> - Do you notice that Camino shows up as a 'not up-to-date Fx' user? 
> http://browsershots.org/screenshots/c56f99d134dd3a15bae6a79860c944fc

Camino shows up as Fx because the user-agent for Camino is "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.8; en; rv:1.9.2.28) Gecko/20120308 Camino/2.1.2 (MultiLang) (like Firefox/3.6.28)". the "like Firefox" is caught by the isFirefox() function in media/js/base/global.js - this is code that's been in bedrock for a while.

I've talked with pmac on #www and a bug has been filed (bug #906700) to fix this. It's probably not a blocker to getting this live though.

> 
> - I've been using browserstack.com to look at mobile page states, but am not
> able to tell it what version of the browser I am using, so I'm only able to
> test the looks of the non-Fx user. When looking at Android (galaxy S2) I
> first received a security warning which we probably won't see when it's live

Yeah, this error shouldn't appear on live. I think it's just a side-effect of the SSL URL and the stage domain.

> (http://cl.ly/image/3n1G0W1N3k0W) and the download button is not centered
> with it's supporting links. (http://cl.ly/image/342f3S3C0d29) The alignment
> issue happens across the Android emulators that I tried. I can try it on my
> actual Android phone when I get home. 

Fixed. It was misaligned for all of Android.

> 
> - for iOS users can we tighten up the spacing between the 3 copy points and
> the links? 
> http://cl.ly/image/2b0Y2A0m0p35

Fixed.

> 
> - An overall comment for mobile would be to make sure download button is
> centered and space between links and 3 copy points are tightened up.

Fixed.
(In reply to Holly Habstritt [:Habber] from comment #21)
> Is there a list of html class names that I could drop into the inspector for
> each of the states we need to test? Then I will be able to check out the
> links on each as well.
> 
> For instance, when switching from OSX to oldmac, I change the class here:
> http://cl.ly/image/262v1z223X0v
> 
> osx (http://cl.ly/image/3S1s0a1G0X0S) > oldmac
> (http://cl.ly/image/3s1b190i1A0l)

There are two sets of classes on the <html> tag that can be used to test:
 - platform class: "android", "fxos", "mac", "windows", "linux"
 - firefox version class: none, "firefox-latest", "firefox-old"

So <html class="android firefox-latest"> will work for testing Android with Fx up-to-date.

Note that this won't work for testing screenshot images as those are handled using javascript that executes when the page loads and doesn't re-execute when the class names are changed.
Great. Thanks, Nick! 

Did you see the copy update in bug #883800?
Yes Holly - Mike will have a commit for that later today.
Depends on: 908297
Depends on: 908660
Depends on: 908663
No longer depends on: 908660
No longer depends on: 908663
Blocks: 869937
No longer depends on: 869937
Blocks: 874913
No longer depends on: 874913
Blocks: 897080
No longer depends on: 897080
Depends on: 910404
No longer blocks: 910202
No longer blocks: 869937
No longer depends on: 891362
Go live date of the updated /new page and conditional content: September 19th, 2013.
All: Please make sure there are no references to firefox.fx in this new unified download codebase. I checked the PR and there were a few references to it. That page is going away soon and we shouldn't be linking to it. Those links should be firefox.mobile or firefox.mobile.features
Chris, this is fixed. The links now point to https://www.mozilla.org/mobile/
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/f46cbd2a48544f357c0b8c94ebb1c82748316843
Bug 868199: Update /new page.

Adds better user-agent custom messages, cleaned up images and Google
Analytics tracking.

See https://bugzilla.mozilla.org/show_bug.cgi?id=868199

 - custom messaging support for Desktop
   - non-Firefox
   - Firefox old
   - Firefox up-to-date
 - custom messaging support for Android
   - non-Firefox
   - Firefox old
   - Firefox up-to-date
 - custom messaging support for Firefox OS, informative links
 - custom messaging support for iOS, friendly unsupported message
 - improved screenshots
   - less locale-dependent
   - more platform-specific
 - added Google Analytics custom tracking
   - off-site links
   - custom var for platform reporting
 - fix media-query css for l10n-specific CSS

https://github.com/mozilla/bedrock/commit/250d82b3bded7b130a80181935346eb3b877aca5
Bug 868199: Switch mobile links to use url helper.
fixed on stage see https://webprod.etherpad.mozilla.org/unified-firefox-download-launch-steps for all steps tested.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
We have shipped and verified the steps in https://webprod.etherpad.mozilla.org/unified-firefox-download-launch-steps on production.


I'm leaving this open until bugs 883806, 891562 and 908297  are resolved.
We are live on production!

http://www.mozilla.org/en-US/firefox/new/

Next steps: 

* verify data
* Redirect /firefox/fx/ to /firefox/new/
* verify data
* Redirect /firefox/update/ to /firefox/new/
* verify data
Depends on: 919788
Depends on: 920212
Raymond: can you install Firefox 24 on a Windows 7, XP, and 8 and then visit https://www.mozilla.org/en-US/firefox/new/ and see if you get the download button or if you get the "congrats! you are up to date". We are getting downloads from those OS' to the download button and it should be hidden for them.
Flags: needinfo?(mozbugs.retornam)
(In reply to Chris More [:cmore] from comment #36)
> Raymond: can you install Firefox 24 on a Windows 7, XP, and 8 and then visit
> https://www.mozilla.org/en-US/firefox/new/ and see if you get the download
> button or if you get the "congrats! you are up to date". We are getting
> downloads from those OS' to the download button and it should be hidden for
> them.

Hi Chris, 
The download button is hidden on the /firefox/new page on Windows.
Flags: needinfo?(mozbugs.retornam)
Status: RESOLVED → REOPENED
Depends on: 918913
Resolution: FIXED → ---
Depends on: 924824
Depends on: 929775
Depends on: 930131
Status: REOPENED → RESOLVED
Closed: 8 years ago7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.