Bedrock: Coding /all

[ejregithub]

Description

Coding the the /all page with new design and copy

---

:yellow_heart: Success Criteria :yellow_heart:

• [ ] Page is live and open for localization by end of sprint.
• [x] Fallback to existing content until locales (per locale basis) are to 100%
• [ ] Can deep link to a specific configuration
• [x] OS is detected, pre-selected (but still changeable)
• [x] OS dropdown is sorted by OS, so 32/64 are clustered together

Tasks

• [x] Code the page
• [ ] Extract strings to Pontoon for L10n, notify L10n team when strings are ready

[hoosteeno]

@craigcook

• I captured the feedback from design doc in the success criteria above. Please let me know if you have questions.
• I also added a blocker for the copy card.

[ejregithub]

Moving this to the next milestone. Copy won't be complete til later today, the last day of the sprint, and per discussion with Craig on the progress of coding.

[hoosteeno]

Dragging this back into backlog so @alexgibson can pick it up next.

[alexgibson]

@craigcook do you have a branch containing your WIP on this? If so, I can pull it down and build upon it. Thanks

[alexgibson]

Relevant links:

• Copy deck
• Sketch file

[alexgibson]

WIP version is finally up on demo for design/copy/UX review:

https://bedrock-demo-agibson.oregon-b.moz.works/en-US/firefox/all/

Some notes:

Things still to do:

• [x] Pre-select operating system choice on page load (it currently defaults to Windows 64bit).
• [x] Updated based on feedback.
• [ ] Analytics requirements.
• [ ] Write tests.

[rraue]

We should have links to learn more for all editions in this info box:

[craigcook]

We should have links to learn more for all editions in this info box:

Do we have pages to link to for all of these? We have a product page for Dev Edition, and there's a page at /firefox/enterprise that might work for ESR. I don't know that we have informative pages for Beta or Nightly.

[alexgibson]

It's not perfect, but perhaps we can do the following:

• Firefox: /firefox/
• Firefox Beta: /firefox/channel/desktop/#beta
• Firefox Developer Edition: /firefox/developer/
• Firefox Nightly: /firefox/channel/desktop/#nightly
• Firefox ESR: /firefox/organizations/ (Firefox Enterprise isn't really a channel like ESR)
• Firefox Android: /firefox/mobile/
• Firefox Android Beta /firefox/channel/android/#beta
• Firefox Android Nightly /firefox/channel/android/#nightly

[rraue]

Thats exactly what I though of @alexgibson. Why isnt ios included there? Shouldnt we include it and then send them to the app store? I know we cant serve the ios build and it makes it more complicated.

[rraue]

Here are the two things we talked in slack about @alexgibson:

• Canonical: as /beta/all/, /nightly/all/ and all other right now existing pages will be not transferred right away, when we push out the new /all/ we should include in all templates a canonical to /locale/firefox/all/ so we do not produce dublicate content. Then when these pages are all set, we redirect them to locale/firefox/all/

• Title: I talked with @amychurchwell about it and would like to have the same language string in the title like we use in the dropdown on the new /all/ and like we use in the language switcher in the footer. The /all/ page gets a good amount of search traffic because users search explicitly for "firefox language" and we are not using the language anywhere else in the title, so this is a extra incentive to click on /all/ instead of on some other website being explicit about the language.

[alexgibson]

Why isnt ios included there? Shouldnt we include it and then send them to the app store? I know we cant serve the ios build and it makes it more complicated.

We don't serve builds for iOS directly from mozorg, but I think you're right we do need to do something for iOS users. Perhaps we can include some conditional string to explain that links over to the app store.

[hoosteeno]

Nice. I am very happy with the way this is shaping up.

• Is there a reason to omit the global accounts CTA from this page?
• How is the download button instrumented -- does it cause GA events to fire? Do events match the download (e.g. nightly vs. release)?
• What do we have to do to get MSI downloads here? That was one of the original justifications for this redesign.
• One of the features we have wanted here is a deep link to a specific configuration. What's the status of that?

[rraue]

One more detail:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=osx&amp;lang=ach" title="Download for macOS in Acholi" data-download-version="osx" data-download-language="acholi" data-link-type="download" data-download-os="Desktop">macOS </a>

I would like to include here in the title the firefox prduct so the sentence most users are searching for is at least once completly in the document, even if its just in the link-title. For example:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=osx&amp;lang=ach" title="Download Firefox beta for macOS in Acholi" data-download-version="osx" data-download-language="acholi" data-link-type="download" data-download-os="Desktop">macOS </a>

[alexgibson]

Is there a reason to omit the global accounts CTA from this page?

Right now I'm hiding the global nav download button / accounts CTA, as the download button is confusing in context of the page. To pick apart that functionality so we can only show the accounts CTA is possible, but not something I'd want to add scope in doing here.

How is the download button instrumented -- does it cause GA events to fire? Do events match the download (e.g. nightly vs. release)?

Right now I'm just making up data-attributes. I could use some help from maybe AP to confirm what I'm doing is ok.

What do we have to do to get MSI downloads here? That was one of the original justifications for this redesign.

We have to do the work to add those installers. This redesign is already large enough I'm not going to add scope here by piling on more features. I'd suggest a followup issue for doing this, although it may also need to wait until we can safely retire the old page.

One of the features we have wanted here is a deep link to a specific configuration. What's the status of that?

Other than the brief mention in the description above, I have zero information on how this is supposed to work. Right now, there is no deep linking. I'd suggest writing up some proposed functionality, and filing a separate issue for it. I'd imagine it may need to be built on fragment identifiers or url params, seeing as this all now lives at one URL for SEO.

[alexgibson]

One more detail:

I would like to include here in the title the firefox prduct so the sentence most users are searching for is at least once completly in the document, even if its just in the link-title. For example:

I'll see what I can work out here. I'm going to say no to changing the link text, to keep things readable for humans. Doing this in the title attribute may be OK though.

[rraue]

I'm going to say no to changing the link text

We agree on this, just the title, not the link text, like in my example.

[alexgibson]

I've updated the demo with the following changes, based on feedback:

• [x] Operating system and language are pre-selected on page load to default to the most suitable choice for the visitor (if locale is not available for a product, it defaults back to en-US).
• [x] The new design is shown only at /firefox/all/ if translated (after on discussion with @rraue). Pages such as /firefox/beta/all/ will continue to see the old design until we can retire and redirect the old URLs.
• [x] Page title now contains English (US) with an L10n comment: HTML page title. Replace "English (US)" with your local language.
• [ ] Firefox iOS is now listed in the products, and links to the app store.
• [x] The learn more modal now links to product pages via the titles.
• [x] Title attributes on links now contain the product name as well as platform and locale.
• [x] Added more spacing between the two columns at larger viewport sizes.
• [x] Added Firefox privacy and help links.

Things I'm not going to include right now are:

• Adding new installer types, such as MSI.
• Adding deep-linking
• Building custom select boxes to allow bespoke page styling.

In the interest of getting this code complete this week, I'm going to call time on additional feature requests.

[alexgibson]

After delving further, I'm not yet going to add Firefox for iOS in this initial PR. There is plumbing in product details to support it, but it does not seem fully implemented in bedrock. In order to get people to the correct App Store, it may require some more back-end work that goes beyond the scope of this redesigned page.

[alexgibson]

@hoosteeno is it possible to enlist the help of Analytics Pros to QA that we're still counting downloads correctly on this new page? I think I've followed everything as closely as I can in terms of how regular download buttons work, but it would be good to get someone to help verify? Thanks

[hoosteeno]

@apwescontreras or @SirDudeness, could you take a quick look at the demo page and let us know how the instrumentation looks? We want to capture the data in the dropdowns in the same way we have been on the existing pages.

[alexgibson]

@apwescontreras or @SirDudeness, could you take a quick look at the demo page and let us know how the instrumentation looks? We want to capture the data in the dropdowns in the same way we have been on the existing pages.

To be clear, we would like to verify that when someone clicks the blue "Download Now" button, the correct data attributes have been set (e.g. for product, platform, language etc). The data that gets passed on when clicking "Download Now" should be consistent with how other download buttons are tracked in general. Thanks

[alexgibson]

This issue is not complete until it is merged, and we're still waiting on input from AP. Reopening.

[hoosteeno]

Here is AP feedback:

• We need to change the datalayer variable name associated with language. It should be data-download-language.

Otherwise, the code looks good from an instrumentation perspective.

[alexgibson]

Thanks, updated! This is now good to merge once it gets code review.

[hoosteeno]

We have a modified rollout plan for this page:

1. Merge, deploy for en-US
2. Iterate on UI to be sure it can incorporate MSI installers (and future installer types)
3. Adjust product-details to include MSI installers
4. Merge, deploy for global l10n

[hoosteeno]

Seealso: https://github.com/mozilla/bedrock/pull/7266