822374 - QA new /firefox/new-b/ [Bedrock] page

Status: RESOLVED FIXED

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

Description

[Chris More [:cmore]]

Phase 1:

For now, please focus on phase 1 and QA this page:

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

notes:

* en-US only
* Tabzilla is broken on demo2 servers and should be ignored in this test.
* OS: Windows, Mac OSX, and Linux
* Browsers: IE 6-10, Chrome recent versions, Firefox 4-17, Safari, Android
* Test with JavaScript enabled and disabled
* iOS users will get the desktop instructions and iOS should be ignored for now

Phase 2:

QA the 25% sample of the /firefox/new/ page

Note: Depends on Google Analytics being on the site and we will give the green light when this will need to be done. 

Notes:

* 12.5% of traffic to /firefox/new/ should go to /firefox/new-b/
* Verify that data is going into Google Analytics experiment

Comment 1

[Chris More [:cmore]]

Timeframe: We would like to be QA complete by Dec. 18th so we can do a 1-2 A/B test. Specific problems can be put in this bug and also ping :jpetto in the #webprod channel.

Comment 2

[Isac Lagerblad (:icaaq)]

Right now downloads from android devices is not tracked in GA

Comment 3

[Chris More [:cmore]]

(In reply to Isac Lagerblad (:icaaq) from comment #2)
> Right now downloads from android devices is not tracked in GA

That's fine because the current /firefox/new/ conversion funnel is set up to be a conversion when it goes to /products/download.html. /products/download.html serves up from d.m.o and for desktop-only.

Our controlled tests is going to be conversions for desktop-only. We will later want to decide on site-wide tagging including Google Play store links.

Comment 4

[Rebecca Billings [:rbillings]]

Tested on Firefox 3.6 & 17, Chrome, Safari. Tested links are correct, display, download- that you can & version is correct, JS enabled/disabled.

With Javascript disabled on Firefox & Safari the download button is behind an image: http://imgur.com/rW8dt

Comment 5

[Chris More [:cmore]]

Here are the top 10 browsers and versions to the existing page since these are the browsers we need to make sure are not broken:

Browser 10 top:

1) Firefox 17
2) IE 8
3) IE 9
4) Chrome 23
5) IE 6
6) IE 7
7) IE 10
8) Firefox 16
9) Firefox 3.6
1) Safari 536.26.17

The top 10 above should be tested on Windows first Windows is 87% of the traffic to this page.

Comment 6

[Isac Lagerblad (:icaaq)]

No space between different and by in IE6 on windows

https://www.evernote.com/shard/s30/sh/8549199b-1e55-41b4-9791-a4a88e9a34a1/43b50b6f039bf0345c0c04692d6d4ea7

Comment 7

[Isac Lagerblad (:icaaq)]

Step 3 has been wrapped under step 1 in scene 2 (IE6)

https://www.evernote.com/shard/s30/sh/c9ea049c-8001-40a5-9da3-e2546a2e1ec0/7ce0706a2ea93b11030bfc8abdf17acc

Comment 8

[Isac Lagerblad (:icaaq)]

Scene 2 is visible for screenreaders before the actual download click has occurred

Comment 9

[Jonathan Petto [:jpetto]]

IE6 issues have been addressed, as has layout in Chrome/FF/Safari with JS disabled:

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

Added display: none; to scene 2 prior to download click to hide from screen readers.

Comment 10

[Jonathan Petto [:jpetto]]

Attachment: IE6 - fix "Different by" spacing, install images line break

Comment 11

[Jonathan Petto [:jpetto]]

Attachment: noscript view - Safari 6

Comment 12

[Jonathan Petto [:jpetto]]

Attachment: noscript view - Firefox 17

Comment 13

[Rebecca Billings [:rbillings]]

Verified JS fix and IE6 UI fix.

Comment 14

[Rebecca Billings [:rbillings]]

Tested with all of the top ten browsers- no new bugs found.

Comment 15

[Chris More [:cmore]]

Attachment: Green text or checkmark doesn't show up in Safari 5.1 on Mac

Safari text display problem after button click.

Comment 16

[Isac Lagerblad (:icaaq)]

The page is quite heavy right now, it weighs in on 787.75KB and 36 requests. You could get rid of many of those KB if you only serve the images that is needed to that specific OS and screen resolution. If you on OSX right now you can get rid of 101.29KB right away (the win install images). And on mobile all the desktop and install images wouldn't have to be loaded.

You could load the scene2 images on window load as well and that would make the first scene to load faster. and make the install images a sprite to make one request instead of 3.

There is more stuff to, I made a pull request yesterday but now i realize that you've probably haven't seen it. You can have a look at it here https://github.com/mozilla/bedrock/pull/540 and pick the commits you like. If you have any questions I'm in #www :)

Comment 17

[Chris More [:cmore]]

Attachment: Green text on safari resolved

Comment 18

[Chris More [:cmore]]

Jon: Two things.

1) Can you let us know the status on getting the page weight solution in place regarding comment 16?

2) Did you get the Chrome green checkbox resolved?

Comment 19

[Jonathan Petto [:jpetto]]

(In reply to Chris More [:cmore] from comment #18)
> Jon: Two things.
> 
> 1) Can you let us know the status on getting the page weight solution in
> place regarding comment 16?

Added all optimizations suggested by Isac, save for replacing download instruction images with sprites. Will experiment with this optimization (in regards to responsive layout) tomorrow.

Thanks Isac!

The optimizations have not been pushed to demo2 as of this writing.

> 
> 2) Did you get the Chrome green checkbox resolved?

Yep, webkit green checkbox issue has been resolved (Chrome & Safari). This fix has been pushed to demo2.

Comment 20

[Jonathan Petto [:jpetto]]

The optimizations above (comment #19) have now been pushed to demo2.

Comment 21

[Isac Lagerblad (:icaaq)]

https://gist.github.com/8ce7cf9472f9c9b1ef22

That will remove ~180KB of the initial load.

Comment 22

[Isac Lagerblad (:icaaq)]

Jon: if you implement the gist in #comment21 I don't think the sprite-optimizations are necessary. I do think you should use a empty alt attribute value on the install images though, the description below them is enough :)

Comment 23

[Jonathan Petto [:jpetto]]

(In reply to Isac Lagerblad (:icaaq) from comment #22)
> Jon: if you implement the gist in #comment21 I don't think the
> sprite-optimizations are necessary. I do think you should use a empty alt
> attribute value on the install images though, the description below them is
> enough :)

Done and done!

Comment 24

[Chris More [:cmore]]

Jon: Can we push the updates to demo2 now?

Comment 25

[Jonathan Petto [:jpetto]]

(In reply to Chris More [:cmore] from comment #24)
> Jon: Can we push the updates to demo2 now?

pmac pushed these optimization updates earlier this morning.

Comment 26

[Isac Lagerblad (:icaaq)]

wow, I just realized we can shave of yet another 75KB on the initial load by adding .ready-for-scene2 on the installation selector:

.ready-for-scene2 .installation {... ... }

The last optimization I can find is that you could use the base64 version [https://gist.github.com/81b9dcc5ba8e373401b7] of features-divider.png instead of making that request.

I think that's all the optimization you can do on that page. the download-button and tabzilla are a different matter ;)

Comment 27

[Chris More [:cmore]]

Jon/Isac: I'm ready to get this page on production if we are fine with the code as it stands now. Putting the page live won't do anything since we don't have the experiment enabled and we will be able to production testing before the A/B test is ready. We will also need to get in the /b/ redirect too.

Comment 28

[Isac Lagerblad (:icaaq)]

It would be awesome if Jon could get the fixes in comment #26 before that. If that's not possible it's ok to push anyway. The page is quite fast now :)

Comment 29

[Chris More [:cmore]]

All fixes are in place and code reviews by pmac and mkelly.

Comment 30

[Isac Lagerblad (:icaaq)]

interesting stuff on translate() or position:absoulte; http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/