1396005 - [Fx 56] - Fx 57 promotional page

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Current requirements:

    - URL mozilla.org/firefox-quantum
    - new page live on 9/26

Initially this will be a separate page from /firefox to be used to promote the 57 release.  When the 57 release is live this URL will be redirect to /firefox and the contents, with some revisions, set as the content in /firefox

Comment 1

[Eric Renaud [:erenaud]]

Alex - please add the link to the /firefox-quantum page to the copy "The New Firefox will feature" in the "What's next" section as seen here - https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/?oldversion=55.0.3

Comment 2

[Rachel Wong]

Hey Alex refer to the mockup header image with the big product image to the right. I'll be on by 7am tomorrow so we can sync up to talk design. Good news is there will only be 4 motion videos instead of 5 now? ;) 

Thanks! 

File was too big upload to bugzilla but can be accessed here: https://drive.google.com/a/mozilla.com/file/d/0Bz-i5ssRMXa1clJDMGZWeEhRU00/view?usp=sharing

Comment 3

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #1)
> Alex - please add the link to the /firefox-quantum page to the copy "The New
> Firefox will feature" in the "What's next" section as seen here -
> https://www-demo3.allizom.org/en-US/firefox/56.0/whatsnew/?oldversion=55.0.3

We can't add a link in the middle of the string as that consitites a string change for l10n. We can either:

a) Just do the string change for en-US
b) Instead of change the string mid-sentance, add a link at the end of the paragraph using the common string "Learn more".

Let me know which option you would prefer. I woulld probably side towards a), seeing as the Quantum page is only being localized for two languages.

Comment 4

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #0)
> Current requirements:
> 
>     - URL mozilla.org/firefox-quantum
>     - new page live on 9/26
> 
> Initially this will be a separate page from /firefox to be used to promote
> the 57 release.  When the 57 release is live this URL will be redirect to
> /firefox and the contents, with some revisions, set as the content in
> /firefox

I'm going to make the call that this page should live at `/firefox/quantum/`, as it's part of the Firefox app. If someone really wants a vanity URL mozilla.org/firefox-quantum that redirects then we can do that, although that would be just the same number of characters so it seems a little pointless.

Comment 5

[Rachel Wong]

Attachment: Bookmarks+Pocket Animation 850x450.png

Still for the Bookmarks + Pocket

Comment 6

[Rachel Wong]

Attachment: New_tab_850x450.png

Still for New Tab (Caption text: New Tab)

Comment 7

[Rachel Wong]

Attachment: Screenshots_850x450.png

Still for Screenshots animation (caption: Screenshots)

Comment 8

[Alex Gibson [:agibson]]

Copy doc: https://docs.google.com/document/d/1Zvu_gNNeFyH0pcbmQfa4lfTO59zT5VoaHI5GYrHE5LE/edit#heading=h.gdxhyebldb1t

Comment 9

[Rachel Wong]

Hey @agibson, 

Here is the google drive file with the UI animations in the 3 different files formats. 

https://drive.google.com/drive/folders/0Bz-i5ssRMXa1cU9JRXNvRkN1MWc?usp=sharing

Comment 10

[christa seabolt]

Attachment: 01.png

sign in modal

Comment 11

[christa seabolt]

Attachment: 02.png

Confirmation

Comment 12

[Alex Gibson [:agibson]]

Attachment: fox-tail-header-high-res.png

Comment 13

[Alex Gibson [:agibson]]

Attachment: fox-tail-features.high-res.png

Comment 14

[Alex Gibson [:agibson]]

Attachment: fox-tail-sign-up-high-res.png

Comment 15

[Alex Gibson [:agibson]]

WIP demo: https://www-demo3.allizom.org/en-US/firefox/quantum/

Comment 16

[christa seabolt]

Attachment: Firefox 57 What's New.png

Revised creative - not splitting up the paragraph of text.

Comment 17

[Gareth Cull [:garethc]]

Wes, can you please review this page and provide analytics requirements? If you need to sync prior to this, please let me know. Thanks.

Comment 18

[Eric Renaud [:erenaud]]

Winston - per message in Slack - please confirm that the vanity URL https://mozilla.org/firefox-quantum is required - or if we can simply go by the filepath that will be established  - https://mozilla.org/firefox/quantum

Comment 19

[Wes Contreras]

Analytics code:

1. For the "Notify Me" button near the top:

   window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Notify Me' });

2. For the "Or try beta" button right under #1:

   window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Try Beta' });

3. For the "Sign Me Up" button at the bottom:

   window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Sign Me Up' });


To confirm, it looks like this is a single experience for all users. Is that correct?

Comment 20

[Rachel Wong]

Hey all the video files for the page can be found here: https://drive.google.com/drive/folders/0Bz-i5ssRMXa1cU9JRXNvRkN1MWc

Comment 21

[Eric Renaud [:erenaud]]

Alex - per my Slack conversation w. Winston - https://mozilla.org/firefox/quantum is good - no vanity URL required

Comment 22

[Alex Gibson [:agibson]]

(In reply to Wes Contreras from comment #19)
> Analytics code:
> 
> 1. For the "Notify Me" button near the top:
> 
>    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> Click', eLabel: 'Notify Me' });

OK

> 2. For the "Or try beta" button right under #1:
> 
>    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> Click', eLabel: 'Try Beta' });

This is a regular HTML link, using data-attributes would be preferable here (we already do this on many pages if you need existing examples)

> 3. For the "Sign Me Up" button at the bottom:
> 
>    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> Click', eLabel: 'Sign Me Up' });

OK

 
> To confirm, it looks like this is a single experience for all users. Is that
> correct?

Correct yes.

Some additional questions:

Do you want to track button clicks on:

1.) the sticky footer CTA
2.) the video carousel

Neither of these two items seem to be covered here.

Comment 23

[Wes Contreras]

(In reply to Alex Gibson [:agibson] from comment #22)
> > 2. For the "Or try beta" button right under #1:
> > 
> >    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> > Click', eLabel: 'Try Beta' });
> 
> This is a regular HTML link, using data-attributes would be preferable here
> (we already do this on many pages if you need existing examples)

If you can point me to where the technique is currently working in production, I can see where it connects to the GTM config and whether we can apply it here. (Not counting Firefox Download links - those get special treatment.)

> Some additional questions:
> 
> Do you want to track button clicks on:
> 
> 1.) the sticky footer CTA
> 2.) the video carousel
> 
> Neither of these two items seem to be covered here.

Gareth, do we want to track those interactions as well?

Comment 24

[Gareth Cull [:garethc]]

Yes. Let's please measure those clicks. Wes, can you please set this up based on any data-attributes on those actions?

Comment 25

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5118

Comment 26

[Alex Gibson [:agibson]]

(In reply to Wes Contreras from comment #23)
> If you can point me to where the technique is currently working in
> production, I can see where it connects to the GTM config and whether we can
> apply it here. (Not counting Firefox Download links - those get special
> treatment.)

Take a look at just about any mozorg page. The links in the top navigation or site footer on the home page are good basic examples: https://www.mozilla.org/en-US/

Comment 27

[Eric Renaud [:erenaud]]

https://docs.google.com/document/d/1Zvu_gNNeFyH0pcbmQfa4lfTO59zT5VoaHI5GYrHE5LE/edit#

Alex - copy in that doc above is final, approved by legal (Elvin)

Comment 28

[Rachel Wong]

Hey Alex below are my comments re: design. I've listed them below and I know it's a lot so totally down to walk through some of this early tomorrow morning if you have time. But super appreciate all your help with bringing the design to life. Let me know if you have any questions or concerns. Thanks! 


Header section:
- Logo in header section seems fuzzy. Perhaps I need to export a larger version? 

- Overall the scale of the test across the page seems a little higher. Could we shrink everything down especially in the H1, H2 rules section at least 10 px? 

- Can you match the height and and type size of the notify me and try beta text to that of the sticky CTA? Right now the text is a little too big. 

- In the mockup the wave shape had a little bit of a soft drop shadow. Could we bring that back in? 



Sticky Nav:
- Visually looks great but just want this to show up after you’re scrolled past the hero section. Right now it pops up after the Beautiful, intelligent UI. 



Throughout the page: 

- The H2’s all seem slightly too big. Could we make sure they’re closer to 32px?

- The horizontal rules are a different color than the final design version. It should be the same color as the header title. So they should be #0A84FF instead of the teal. 

- The padding between sections is pretty tight. Particularly in the first section (2x speed). And the last section (privacy and Mozilla). Could you increase the spacing between the sections to match the sketch mock up. Probably by at least 40%. 

- The gradients sometimes have a visual breaks. Particularly in the middle blue section I’m not sure if its the tail png but it looks like its broken. 



Bottom CTA section:

- Same comment about the CTA. The text inside the button and the height of it should match that of the sticky CTA

- I think we should change the header to be 32px. This is copy edits but I think that Krishna want’s the date in that. So 
“…Quantum launches November 14, 2017”

- For some reason the wave here is more jagged tan the others. Could you look into that?

Comment 29

[Rachel Wong]

I also forgot that in the middle section on the 13inch laptop the features appear in the 2 row formation. I want to make sure that the break point for them to do that grid formation happens on tablet screen sizes. Thanks!

Comment 30

[Wes Contreras]

I found the automatic link tracking code in GTM - apologies for not spotting that earlier (it was named differently than the other master event handlers). Yes, we can do the <a> links with data- attributes. 


2. For the "Or try beta" button right under #1:

   data-link-type="link" data-link-name="try beta"


4. Sticky Footer CTA:

   data-link-type="link" data-link-name="keep me updated"


5. Video Carousel (one on each arrow):

   window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Carousel Right' });
   window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Carousel Left' });

Comment 31

[Alex Gibson [:agibson]]

(In reply to Rachel Wong from comment #28)

> Header section:
> - Logo in header section seems fuzzy. Perhaps I need to export a larger
> version? 

I'll re-export it from the Sketch file and see if that makes a difference.

> - Overall the scale of the test across the page seems a little higher. Could
> we shrink everything down especially in the H1, H2 rules section at least 10
> px? 

All pages on bedrock are built using the new typescale we agreed on during creation of the Firefox hub pages. Body copy is 18px by default, and for headings you can pick from any of these sizes: http://craigcook.github.io/etc/typescale/

I'm going to say no to setting arbitrary font sizes based on individual design elements.
 
> - Can you match the height and and type size of the notify me and try beta
> text to that of the sticky CTA? Right now the text is a little too big. 

Both the "Notify me" and "Or try beta" buttons are 18px, which is the same as the "Keep me updated" button (also 18px). I'll drop the top/bottom padding a little, which is probably why it looks a little bigger.

> - In the mockup the wave shape had a little bit of a soft drop shadow. Could
> we bring that back in? 

If you would like this then please supply a new svg for the wave shape that incorporates a drop shadow. Keep in mind that the page is responsive, so the browser isn't always behind the exact part of the wave as in the mockup, so you'll probably need to apply a drop shadow to the entire wave (not quite sure if this will look odd or not).

> Sticky Nav:
> - Visually looks great but just want this to show up after you’re scrolled
> past the hero section. Right now it pops up after the Beautiful, intelligent
> UI. 

This isn't where it was positioned in the original mockup, but I'll see if the design can accomodate moving this up.

> Throughout the page: 
> 
> - The H2’s all seem slightly too big. Could we make sure they’re closer to
> 32px?

The closest size in our typescale is 36px, so I'll change them to that (they are currently 48px).

> 
> - The horizontal rules are a different color than the final design version.
> It should be the same color as the header title. So they should be #0A84FF
> instead of the teal.

Will do
 
> 
> - The padding between sections is pretty tight. Particularly in the first
> section (2x speed). And the last section (privacy and Mozilla). Could you
> increase the spacing between the sections to match the sketch mock up.
> Probably by at least 40%. 

Will do

> - The gradients sometimes have a visual breaks. Particularly in the middle
> blue section I’m not sure if its the tail png but it looks like its broken. 

The middle section is a flat blue background with the fox tail image as a secondary layer. If it doesn't look right, please supply a new image. Thanks.

> Bottom CTA section:
> 
> - Same comment about the CTA. The text inside the button and the height of
> it should match that of the sticky CTA

The font size is 18px, which already matches the sticky CTA button size. I'll see if i can drop the top/bottom padding slightly, which is probably why it looks bigger.

> - I think we should change the header to be 32px. This is copy edits but I
> think that Krishna want’s the date in that. So 
> “…Quantum launches November 14, 2017”

I've updated as per the final copy, thanks. The font-size is 36px, which is the closest we'll get to 32px on the typescale.

> - For some reason the wave here is more jagged tan the others. Could you
> look into that?

This is probably an artifact from the way the svg was exported. Happy to try another if you would like to provide an updated asset.

> I also forgot that in the middle section on the 13inch laptop the features appear in the 2 row formation. I want to make sure that the break point for them to do that grid formation happens on tablet screen sizes. Thanks!

It depends how squished the copy gets at that viewport width, but I'll see what I can do.

Comment 32

[Alex Gibson [:agibson]]

(In reply to Alex Gibson [:agibson] from comment #31)
> (In reply to Rachel Wong from comment #28)
> > Sticky Nav:
> > - Visually looks great but just want this to show up after you’re scrolled
> > past the hero section. Right now it pops up after the Beautiful, intelligent
> > UI. 
> 
> This isn't where it was positioned in the original mockup, but I'll see if
> the design can accomodate moving this up.

In order to accomodate this I'm going to have to change the header to stick to the top of the viewport as opposed to the bottom, else the element stickys right away on page load (before you scroll anywhere) on a screen large enough to see the whole hero section. If that's not ok, I can revert to where the sticky element originally was.

Comment 33

[Alex Gibson [:agibson]]

(In reply to Wes Contreras from comment #30)
> I found the automatic link tracking code in GTM - apologies for not spotting
> that earlier (it was named differently than the other master event
> handlers). Yes, we can do the <a> links with data- attributes. 
> 
> 
> 2. For the "Or try beta" button right under #1:
> 
>    data-link-type="link" data-link-name="try beta"
> 
> 
> 4. Sticky Footer CTA:
> 
>    data-link-type="link" data-link-name="keep me updated"
> 
> 
> 5. Video Carousel (one on each arrow):
> 
>    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> Click', eLabel: 'Carousel Right' });
>    window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button
> Click', eLabel: 'Carousel Left' });

Ok, I've implemented the following. Please test and confirm this is OK:

Buttons/links:

"Notify me" button: data-link-type="link" data-link-name="Notify me"
"Or try beta" link: data-link-type="link" data-link-name="Or try beta"
"Keep me updated" sticky button: data-link-type="link" data-link-name="Keep me updated"
"Sign up" buttom button: data-link-type="link" data-link-name="Sign up"

Carousel:

window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Carousel Right' });
window.dataLayer.push({ event: 'in-page-interaction', eAction: 'Button Click', eLabel: 'Carousel Left' });

Comment 34

[Rachel Wong]

Attachment: privacy-3d.png

New privacy image

Comment 35

[Rachel Wong]

Attachment: mozilla-3d.png

new mozilla image

Comment 36

[Rachel Wong]

Hey Alex,

I hear you regarding the modular type scale that Craig put together but right now the type size in the header is 60px which is just really big especially for people seeing this page on smaller screened laptops. For the header section can we have the 60px ("Firefox Quantum) drop down to a level 2 font size at 48px and the "New. Fast. Fierce." drop down to a L3 at 36px?

Comment 37

[Alex Gibson [:agibson]]

(In reply to Rachel Wong from comment #36)
> Hey Alex,
> 
> I hear you regarding the modular type scale that Craig put together but
> right now the type size in the header is 60px which is just really big
> especially for people seeing this page on smaller screened laptops. For the
> header section can we have the 60px ("Firefox Quantum) drop down to a level
> 2 font size at 48px and the "New. Fast. Fierce." drop down to a L3 at 36px?

If it's on the typescale, sure :)

Comment 38

[Rachel Wong]

Attachment: Middle Tail shape.png

Updated middle tail

Comment 39

[Rachel Wong]

Can we reduce the space between the titles and the body copy in the the individual items in the content sections. So between "2x faster" and "Powered by.." for each of this kinds of sections on the page. The spacing you have in the middle feature section is nice so something like that.

Comment 40

[Rachel Wong]

Same with spacing between the UI video caption and the copy beneath it. Close up that space a little.

Comment 41

[Rachel Wong]

Could the body copy in the hero/header section linebreak where the H1 ends? basically can there be more padding between the body copy and the browser image. It would be nice to get the line to break at "know" and have "and get..." on the next line.

Comment 42

[Rachel Wong]

Could you reduce the spacing underneath the UI body copy. Right now it looks like too much empty space. Same with the empty white space below the mozilla section. I know I said it looked okay in slack and it totally does up top but the bottom spacing is too much.

Comment 43

[Wes Contreras]

Will QA the newly tagged links tomorrow. 

Also, we have a request for scroll tracking. Modeling after scroll tracking in place elsewhere on Mozilla, we'll want to execute this code at DOM ready:

    $("[data-scroll-tracking]").each(function() {
        var section = $(this).attr("data-scroll-tracking");
        var waypoint = new Waypoint({
            element: $(this),
            handler: function(direction) {
                if (direction === "down") {
                    window.dataLayer.push({
                        event: "scroll-section",
                        interaction: "scroll",
                        section: section
                    })
                }
            },
            offset: "100%"
        })
    });

And we'll want to add a 'data-scroll-tracking' data attribute to each of the following nodes:

1. For the <header> node (header.main-header):

   data-scroll-tracking="Main Header"

2. For the main key features section (div.key-features-section.main):

   data-scroll-tracking="First Key Features"

3. For the other features section (section.other-features):

   data-scroll-tracking="Other Features"

4. For the secondary key features section (div.key-features-section)

   data-scroll-tracking="Second Key Features"

5. For the secondary signup section (section.secondary-sign-up)

   data-scroll-tracking="Secondary Sign-Up"

Comment 44

[Alex Gibson [:agibson]]

All design feedback and GA requirements should now have been met. Thanks all.

Comment 45

[Wes Contreras]

Attachment: GA events - quantum - demo3.png

Analytics events firing network hits as expected, seeing correct actions in GA (screenshot attached).

Comment 46

[Rachel Wong]

Attachment: FF 57 Quantum Page Meta Image_1200x630.png

Here's the meta image

Comment 47

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/6e33435237dfbc78358003bf14aef79d3c62b445
[fix bug 1396005] Firefox 57 Quantum page

https://github.com/mozilla/bedrock/commit/d844754728412a061409c7d81c077e6328d541a6
Merge pull request #5118 from alexgibson/bug-1396005-firefox-57-quantum-page

[fix bug 1396005] Firefox 57 Quantum page

Comment 48

[Eric Renaud [:erenaud]]

Alex - I confirmed with PMM team that we can flip the switch any time between 4 and 5 am PT tomorrow, Tuesday (so noon to 1pm CET).

Please note the new (known) dependency of the URL updates to DE version listed in https://bugzilla.mozilla.org/show_bug.cgi?id=1402927  The go live times for those blogs as stated in email is 9am PT, so that gives us some 'wiggle room'.

I'll be up before 7 am PT - please flag any issues and ping me in Slack.

Comment 49

[Alex Gibson [:agibson]]

(In reply to Eric Renaud from comment #48)
> Please note the new (known) dependency of the URL updates to DE version
> listed in https://bugzilla.mozilla.org/show_bug.cgi?id=1402927  The go live
> times for those blogs as stated in email is 9am PT, so that gives us some
> 'wiggle room'.

As noted yesterday, this requires a code change to what we pushed yesterday - so it needs a new PR and also code review + time to deploy. It will go out as soon as we can do it, but I can't hold to a guaranteed time. It should have been thought about sooner.

Comment 50

[[github robot]]

Commits pushed to master at https://github.com/mozmeao/www-config

https://github.com/mozmeao/www-config/commit/9e87cc14286822f391fcf52db21b202ec09379e0
[bug 1396005] Enable Firefox Quantum preview page

https://github.com/mozmeao/www-config/commit/aa5ce73c2abc1aedb988b24e0d5c6af5ca59cf92
Merge pull request #41 from alexgibson/bug-1396005-firefox-quantum-page

[bug 1396005] Enable Firefox Quantum preview page

Comment 51

[Alex Gibson [:agibson]]

Page is now anabled in production per Comment 50. It may take up to an hour for cache to expire in all regions.

Comment 52

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/bedrock/pull/5135

Comment 53

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/423461063ace97f64c5ca35ce6f2554dd14ed7c2
[bug 1396005] Remove switch for Quantum preview page

https://github.com/mozilla/bedrock/commit/c5de13d32fea1fbd9716d87092484feb32150d55
Merge pull request #5135 from alexgibson/bug-1396005-remove-quantum-preview-switch

[bug 1396005] Remove switch for Quantum preview page