1215743 - Create a Firefox for iOS browser image for /new

Status: VERIFIED FIXED

(Marketing :: Design, task)

Description

[Craig Cook (:craigcook)]

We need a genericized FxiOS browser image for the /firefox/new page, matching the images we already have for Mac, Windows, Linux, and Android.

Current Android image for comparison: https://www.mozilla.org/media/img/firefox/new/browser-android-high-res.png

We'll need it in two resolutions, transparent PNG, and it shouldn't have any text so we can avoid l10n issues... all the usual stuff.

Comment 1

[Mike Alexis [:malexis]]

Craig, when do you need this?

Comment 2

[Craig Cook (:craigcook)]

(In reply to Mike Alexis [:malexis] from comment #1)
> Craig, when do you need this?

Technically it could be dropped in right before the iOS global launch, but having it by the end of next week (11/6) would be ideal.

Comment 3

[Ty Flanagan]

Ill have this image readied tomorrow.

Comment 4

[Ty Flanagan]

Attachment: browser-ios-high-res.png

Comment 5

[Ty Flanagan]

Attachment: browser-ios-high-res.png

Needed to add the separation shading on the bottom device edge

Comment 6

[Rebecca Billings [:rbillings]]

I don't see the updated image on https://www-demo1.allizom.org/en-US/firefox/new/

Comment 7

[Jonathan Petto [:jpetto]]

Hm, local tests show this image is updated in master. demo1 must be behind - can you check on dev?

https://www-dev.allizom.org/firefox/new/

Comment 8

[Rebecca Billings [:rbillings]]

I don't see it on https://www-dev.allizom.org/firefox/new/ either

Comment 9

[Rebecca Billings [:rbillings]]

Testing further:
iphone user agent 3.0 = updated image
iphone 4 phone = no image at all
iphone 6 user agent = old image
all browsers = old image

Comment 10

[Rebecca Billings [:rbillings]]

iPad mini = new version

Comment 11

[Rebecca Billings [:rbillings]]

It would be helpful to get the exact parameters of when/how/where the new image is supposed to display vs. the old image. Is it only iPhone/iPad version 6+ or...?

Comment 12

[Jonathan Petto [:jpetto]]

(In reply to Rebecca Billings [:rbillings] from comment #11)
> It would be helpful to get the exact parameters of when/how/where the new
> image is supposed to display vs. the old image. Is it only iPhone/iPad
> version 6+ or...?

The old iOS image was simply a copy of the Android image (which is why it needs updating :). The new image is taking the place of that old image.

The new image (white iPad & iPhone) should display for all users on an iOS device with screen wider than 760px. (Smaller viewports don't see any browser image at all.) No users on an iOS device should see any browser image other than this new one.

Comment 13

[Jonathan Petto [:jpetto]]

A bit more technical information:

The browser image displayed is based on navigator.platform, not navigator.userAgent. This makes it a little more difficult to test from non-iOS devices.

Essentially, navigator.platform must contain any of the following: iPhone, iPad, iPod. See the related code here: https://github.com/mozilla/bedrock/blob/master/media/js/base/site.js#L53-L56

Comment 14

[Rebecca Billings [:rbillings]]

Verified on www-dev.allizom.org on phones/iPads & updating user agent platform  - looks good.