1397520 - [Fx 57] firefox/mobile page (new)

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Create new page applying new design elements reflective of the photon branding in product, align across onboarding workflow.

Any/all copy changes due 10/3 for l10n

Note that /firefox/mobile currently resolves to the firefox/android page

Comment 1

[Eric Renaud [:erenaud]]

jpetto - copy is final - here - https://docs.google.com/document/d/1unlVtUCqJq8FL72ZlFpitFwH_EgMMqERQBQ6YKEXkco/edit?ts=59dfdaa4#

Comment 2

[christa seabolt]

Attachment: FF Send to Device_Email Copy.png

Revised design per widget restraints.

Comment 3

[christa seabolt]

Attachment: Focus Send to Device_Email Copy.png

Revised design per widget restraints.

Comment 4

[Eric Renaud [:erenaud]]

QR code for Focus - https://drive.google.com/file/d/0BxiQvPDzee3EV3FjdE4zZmZob00/view?ts=59e682ff

QR code for Firefox mobile is the same as in the /whatsnew mobile CTA version - https://www.mozilla.org/media/img/firefox/whatsnew_54/qrcode.35140448ea72.png

Requirement: For Germany, linking to Klar in each appstore is required (not Focus) as on https://www.mozilla.org/de/firefox/focus/

Comment 5

[christa seabolt]

Sketch file is too large to attach, can be downloaded here: https://drive.google.com/open?id=0Bz-i5ssRMXa1clM0NVVJalFXcGc

Comment 6

[christa seabolt]

Attachment: Mobile_Meta.png

Meta image for the mobile page.

Comment 7

[GitHub Bugzilla PR Linker]

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

Comment 8

[Jonathan Petto [:jpetto]]

I believe we discussed needing new adjust.com links for the app store badges, and potentially unique links for different geolocated locales (as we've done on prior /whatsnew pages). Mike Han should be familiar with this logic.

I'll need these links pretty soon.

We also need to know which basket message IDs to use for the Send to Device widget.

Comment 9

[[e-mail]]

JPETTO,

Can you use the existing adjust links for the badges from our previous product pages? 

Id also like to reiterate:

For desktop users accessing the page, the badge should not show up.  Only the send to device widget or QR code, depending on the locale.

For mobile users accessing the page we should only have the badges, with the links used in the previous product pages.

Comment 10

[Jonathan Petto [:jpetto]]

mhan - 

We have two sets of adjust.com links currently in GitHub:

https://github.com/mozilla/bedrock/blob/master/media/js/firefox/mobile-download-desktop.js
https://github.com/mozilla/bedrock/blob/master/media/js/firefox/whatsnew/whatsnew-50.js

Which set do you prefer?

Also, don't we need different/new links for Focus?

Comment 11

[Jonathan Petto [:jpetto]]

To be a bit more clear, here is what we need:

# Default app store links

- default App Store adjust.com link for Firefox
- default Play Store adjust.com link for Firefox
- default App Store adjust.com link for Focus
- default Play Store adjust.com link for Focus

These links will be the default at page load, and will be used if the geolocation lookup fails or results in a locale for which we do not have a locale-specific link.

For Firefox, we can re-use the default links specified in either of the following templates[1][2], or specify new links:

[1] https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/mobile-download-desktop.html#L39-L45
[2] https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/whatsnew/whatsnew-50.html#L38-L39

For Focus, we can re-use the links specified in the /firefox/focus template[3], or specify new links:

[3] https://github.com/mozilla/bedrock/blob/master/bedrock/settings/appstores.py#L89-L99


# Locale-specific app store links

- locale-specific App Store adjust.com links for Firefox
- locale-specific Play Store adjust.com links for Firefox
- locale-specific App Store adjust.com links for Focus
- locale-specific Play Store adjust.com links for Focus

These links will be swapped in for the default link after the geolocation lookup completes, but only if the returned locale has a pre-defined adjust.com link.

For Firefox, we can re-use those specified in either JS file linked in comment 10[4][5], or specify new links:

[4] https://github.com/mozilla/bedrock/blob/master/media/js/firefox/mobile-download-desktop.js
[5] https://github.com/mozilla/bedrock/blob/master/media/js/firefox/whatsnew/whatsnew-50.js

For Focus, we will need new links generated.

Comment 12

[Eric Renaud [:erenaud]]

Ben Niolet confirmed only sms slugs (en-US only, of course).

So, I confirmed with Mike Han that the plan of record for Focus is to:

Desktop users - show the QR code for Focus
Mobile users - show the appstore badges for Focus

Comment 13

[Jonathan Petto [:jpetto]]

Attachment: Simulator Screen Shot - iPhone 8 Plus - 2017-10-26 at 13.24.31.png

Klar homescreen

Comment 14

[christa seabolt]

Attachment: FF_modal_tail.png

blue modal tail PNG

Comment 15

[christa seabolt]

Attachment: FF_modal_tail.svg

blue modal tail SVG

Comment 16

[christa seabolt]

Attachment: Focus_modal_tail.png

pink tail PNG

Comment 17

[christa seabolt]

Attachment: Focus_modal_tail.svg

pink tail SVG

Comment 18

[Jonathan Petto [:jpetto]]

Okay, the page is ready for both creative and GA review.

https://bedrock-demo-jpetto-fxmobile.us-west.moz.works/firefox/mobile/

Interaction notes:

- The Firefox modal will show the Send to Device widget for en-US (and some other locales). To see the QR code for Firefox, change the locale in the URL from /en-US/ to /it/.

- The Focus modal should always show the QR code for desktop.

- If on Android or iOS, both modals (Firefox and Focus) should show app store badges only. You can test on an iOS or Android device, or use the dev tools to change "osx" (or "windows") on the <html> element's class attribute to either "android" or "ios".

Comment 19

[[e-mail]]

I checked these from mobile and desktop and they work well.  thanks @jpetto.

Comment 20

[christa seabolt]

Hi Jon - 

Here is the design feedback on the mobile pages, let me know if you want to walk through this or have any questions! 

Header
- Decrease the width of the firefox and focus white containers by 10px each
- Increase padding between the two by 20px (although the above may do that?)
- Increase blue background height by about 50px, content placement is perfect - just bottom padding will increase

Firefox module 
- Increase padding (top/bottom/left & right margin) to roughly 25px
- See more text same as the get firefox - 16pt

Focus module 
- Increase padding (top/bottom/left & right margin) to roughly 25px
- See more text same as the get firefox - 16pt

Firefox Title 
- Increase white space padding above by roughly 80px
- Decrease the blue rule length by roughly 10px
- blue rule, title and subhead should align centered vertically to the phone image
- subhead font looks like it might be 18pt - should be 24pt
- subhead column width should be about 100px narrower 

Carousel Left Nav
- Confirm that Firefox mobile is bold
- Extra padding on the top and bottom of the bottom (20px both) 

Sync
- Increase white space padding above the blue rule by about 60px
- Decrease the blue rule length by roughly 10px
- no paragraph break between “Sync” and “iOS and Android”
- “iOS and Android” & “Add Firefox…” look small - confirm they are 24 pt please
- Extra 20px padding above the image and “Add Firefox…”
- The copy next to the icons need a shorter width column, roughly 20px

Insert an additional 100px padding between sections

Privacy 
- Increase white space padding above the blue rule by about 60px
- Decrease the blue rule length by roughly 10px
- no paragraph break between “Sync” and “iOS and Android”
- “iOS and Android” & “Control what…” look small - confirm they are 24 pt please
- Subhead copy column width needs to be about 200px narrower

Insert an additional 100px padding between sections


Extensions & Customizations
- Increase white space padding above the blue rule by about 60px
- Decrease the blue rule length by roughly 10px
- no paragraph break between “Android only”
- “Android only” & “Break out of …” look small - confirm they are 24 pt please
- Subhead copy column width needs to be about 200px narrower
- Extend the rule length by about 30px
- Add about 10 px padding above and below the rule

Firefox Focus 
- Increase white space padding above by roughly 80px
- Decrease the pink rule length by roughly 10px
- pink rule, title and subhead should align centered vertically to the phone image
- subhead font looks like it might be 18pt - should be 24pt
- subhead column width should be about 100px narrower 

Focus Carousel 
- about 30px padding above and below the download now button 

Automatic Privacy 
- Decrease the pink rule length by roughly 10px
- no paragraph break between “iOS & Android”
- “iOS & Android” & “Browse worry free …” look small - confirm they are 24 pt please
- Subhead copy column width needs to be about 200px narrower

Insert an additional 100px padding between sections

Speed
- Decrease the pink rule length by roughly 10px
- I think we are missing “iOS & Android” here?
- Subhead looks small, please confirm it is 24pt
- Subhead copy column width needs to be about 200px narrower

Insert an additional 100px padding between sections

Lightweight
- Decrease the pink rule length by roughly 10px
- I think we are missing “Android only” here?
- Subhead looks small, please confirm it is 24pt
- Subhead copy column width needs to be about 200px narrower

Comment 21

[yuliya]

Updated "Firefox" title below the fold to black.

Comment 22

[Jonathan Petto [:jpetto]]

(In reply to yuliya from comment #21)
> Updated "Firefox" title below the fold to black.

Do you mean the "Firefox" with the blue bar above it, that precedes the following copy?

"The full-featured version of Firefox with robust customization and privacy options ready to go for mobile and tablet."

If so, should the blue top bar also be black? What about the "Firefox Focus" text with the same treatment? Should that be changed to black as well?

Comment 23

[yuliya]

Yes, the bar too. 

In the scroll section let's also make the titles black and change the italics to non-italics.

Please match the treatments here as close as possible.
https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/

Thanks

Comment 24

[Jonathan Petto [:jpetto]]

(In reply to yuliya from comment #23)
> Yes, the bar too. 
> 
> In the scroll section let's also make the titles black and change the
> italics to non-italics.
> 
> Please match the treatments here as close as possible.
> https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/
> 
> Thanks

Are these the final change requests to this page? If not, let's get the full list together before updating the page.

Thanks!

Comment 25

[christa seabolt]

Hi Jon - 

Here are the final design QA tweaks. Reasoning for these changes are to marry it up to the desktop page as closely as possible. 

Firefox intro section
- blue rule turns black
- Firefox should be black , not bold and larger (It think it’s 42 pt?) Reference the desktop page 2x faster type treatment)
- https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/

Firefox Carousel 
- Need a white rule above Firefox mobile
- Same font treatment as listed above (not bold) 
- Sync: Blue rule, Sync and iOS and Android needs to be black
- Privacy: Blue rule, Privacy and iOS and Android needs to be black
- Extensions: blue rule, Extensions & Customization, Android only need to be black

Firefox Focus intro section
- pink rule turns black
- Firefox Focus should be black , not bold and larger (It think it’s 42 pt?) Reference the desktop page 2x faster type treatment)
- https://bedrock-demo-agibson.us-west.moz.works/en-US/firefox/

Firefox Focus Carousel 
- Need a white rule above Firefox Focus
- Same font treatment as listed above (not bold) 
- Automatic Privacy: Pink rule, Automatic Privacy and iOS and Android needs to be black
- Speed: Pink rule, Speed needs to be black
- Lightweight: pink rule, Lightweight needs to be black

Let me know if you have any questions!

Comment 26

[pgerman]

Hi Jon,

Please refer to this doc for tagging requirements.

https://docs.google.com/document/d/19vW4JAk6IERyqgYaCF_1bkT5f3VUTiZo5aAEY3mfpFY/

LMK when this is done because there is some tag management that I'll need to do as well.

Comment 27

[Jonathan Petto [:jpetto]]

:pgerman - The demo server has been updated with the tagging requirements from comment 26. Give it one more look?

Also addressed design feedback from comment 25.

https://bedrock-demo-jpetto-fxmobile.us-west.moz.works/firefox/mobile/

Comment 28

[pgerman]

jpetto: Looks good to me.

Comment 29

[christa seabolt]

Sorry - I just realized Yuliya may have been talking about the iOS & Android in italics. I know it was that way in the comp - but I think that is the last thing we need to change - take out all italics.

Comment 30

[christa seabolt]

We also need to add the wordmark for firefox and firefox focus next to their associated icons. As well as the intro sections with the rule and in the carousel. Will try to track these down tonight and have the SVG's attached to this bug.

Comment 31

[Krishna]

Sorry for being that person right now (and shelve this comment if it holds things up), but there's a capital I in internet. Latest buzz is it's lowercase going forward.

Fx section > Privacy > 1st Value Prop bullet point > LC the word "internet" please. 

Mega thanks.

Comment 32

[Jonathan Petto [:jpetto]]

Eric - 

Should we be adding redirects to /firefox/mobile/ from the following URLs?

/firefox/android/
/firefox/focus/
/firefox/ios/

Comment 33

[Eric Renaud [:erenaud]]

Jon - we've not been asked to do so. I mentioned this/deprecating the pages to Fabio and we agreed we'd revisit the existence of those pages, post-launch. So for now, no redirects.

Comment 34

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/d1e3c194218dce28bd9b5512c87876bf0d5f70a7
[fix bug 1397520] Add /firefox/mobile/ page.