868199 - [tracking] Create unified Firefox download experience

Status: RESOLVED FIXED

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

Description

[Chris More [:cmore]]

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

Comment 1

[John Karahalis [:openjck]]

Just testing that Bugmail is working properly. Please ignore this comment.

Comment 2

[Holly Habstritt Gaal [:Habber]]

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.

Comment 3

[Chris More [:cmore]]

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

Comment 5

[Holly Habstritt Gaal [:Habber]]

I spoke with Lee and he is working on getting us the neutral browser images today.

Comment 6

[Chris More [:cmore]]

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!

Comment 7

[Chris More [:cmore]]

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!

Comment 8

[Michael Gauthier [:gauthierm]]

Holly, attached are screenshots of the page on the various browsers/platforms. The Firefox screenshots in these are not the final Firefox screenshots.

Comment 9

[Michael Gauthier [:gauthierm]]

Attachment: firefox-slash-new-screenshots.zip

Comment 10

[Holly Habstritt Gaal [:Habber]]

Thanks, Michael! I'll be sure to note that the product images are not final.

Comment 11

[Chris More [:cmore]]

(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?

Comment 12

[Michael Gauthier [:gauthierm]]

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.

Comment 13

[Chris More [:cmore]]

(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!

Comment 14

[Holly Habstritt Gaal [:Habber]]

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

Comment 15

[Chris More [:cmore]]

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

Comment 16

[Chris More [:cmore]]

Mega PR: https://github.com/mozilla/bedrock/pull/1115

Comment 17

[Steven Garrity [:sgarrity]]

This is up on demo2 ready for review: https://www-demo2.allizom.org/en-US/firefox/new/

Comment 18

[Holly Habstritt Gaal [:Habber]]

Hi Steven, 
What is the best way for me to demo each state of this page?

Comment 19

[Chris More [:cmore]]

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.

Comment 20

[Holly Habstritt Gaal [:Habber]]

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.

Comment 21

[Holly Habstritt Gaal [:Habber]]

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)

Comment 22

[Nick Burka [:cremini]]

(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.

Comment 23

[Nick Burka [:cremini]]

(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.

Comment 24

[Holly Habstritt Gaal [:Habber]]

Great. Thanks, Nick! 

Did you see the copy update in bug #883800?

Comment 25

[Nick Burka [:cremini]]

Yes Holly - Mike will have a commit for that later today.

Comment 26

[Michael Gauthier [:gauthierm]]

Bug 883800 is updated.

Comment 27

[Chris More [:cmore]]

Go live date of the updated /new page and conditional content: September 19th, 2013.

Comment 28

[Chris More [:cmore]]

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

Comment 29

[Michael Gauthier [:gauthierm]]

Chris, this is fixed. The links now point to https://www.mozilla.org/mobile/

Comment 30

[Chris More [:cmore]]

Latest PR: https://github.com/mozilla/bedrock/pull/1191

Comment 31

[[github robot]]

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.

Comment 32

[Chris More [:cmore]]

:retornam: can you help me test stage tomorrow?

https://www.allizom.org/en-US/firefox/new/

https://www.allizom.org/pt-BR/firefox/new/

https://www.allizom.org/es-ES/firefox/new/

Go live: 2013-09-19

Comment 33

[raymond [:retornam] (inactive)]

fixed on stage see https://webprod.etherpad.mozilla.org/unified-firefox-download-launch-steps for all steps tested.

Comment 34

[raymond [:retornam] (inactive)]

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.

Comment 35

[Chris More [:cmore]]

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

Comment 36

[Chris More [:cmore]]

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.

Comment 37

[raymond [:retornam] (inactive)]

(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.