1126578 - iOS CTA updates on mozilla.org

Status: RESOLVED FIXED

(www.mozilla.org :: Project Tracking, defect)

Description

[Mike Alexis [:malexis]]

Tracking bug for updating default message to iOS users from "doesn't meet system requirements" to "sign up for our launch message." 

Notes from requirements discussion Jan 23:
https://etherpad.mozilla.org/ios-cta

Comment 1

[Mike Alexis [:malexis]]

Notes from Feb 3 check-in.

https://etherpad.mozilla.org/ios-3feb2015

Schedule:

https://app.smartsheet.com/b/publish?EQBCT=b6b2e128e5664e1d985f7510436275aa

Comment 2

[Holly Habstritt Gaal [:Habber]]

Attachment: Updated iOS user messaging wireframes as of Feb 6, 2015

Updated wireframes outline messaging requirements and conditional content for iOS users viewing pages across Mozilla.org.

Comment 3

[Mike Alexis [:malexis]]

Copy deck:
https://docs.google.com/document/d/1-qJd6RTQWikaDfT0BTccoybr8VZwHEDeBVeTjcqXN_M/edit?usp=sharing

Comment 4

[Jennifer Bertsch [:jbertsch]]

Let's use this url  https://www.mozilla.org/newsletter/ios

Comment 6

[Stephanie Hobson [:shobson]]

Notes:
- went with separate sign-up page instead of modal because the default modal does not support iframes and I didn't want to weigh down the pages with new code
- used Firefox logo and blue skin for newsletter sign up as directed in hand-off meeting (https://etherpad.mozilla.org/ios-weprod-checkin-2015-02-13)
- the privacy notice will show up once bug 1134058 is fixed

Comment 7

[Holly Habstritt Gaal [:Habber]]

(In reply to Stephanie Hobson [:shobson] from comment #6)
> Notes:
> - went with separate sign-up page instead of modal because the default modal
> does not support iframes and I didn't want to weigh down the pages with new
> code
> - used Firefox logo and blue skin for newsletter sign up as directed in
> hand-off meeting (https://etherpad.mozilla.org/ios-weprod-checkin-2015-02-13)
> - the privacy notice will show up once bug 1134058 is fixed

Hi Stephanie, 
I just realized that I didn't define details for a confirmation page. Is the form currently using our default newsletter confirmation? Could you share what the confirmation state looks like?

I think Troy/Matej might want to take a look at the copy. We might need confirmation language specific to this form that recognizes that we'll let the user know when Firefox for iOS is ready.

Comment 8

[Matej Novak [:matej]]

(In reply to Holly Habstritt Gaal [:Habber] from comment #7)
> (In reply to Stephanie Hobson [:shobson] from comment #6)
> > Notes:
> > - went with separate sign-up page instead of modal because the default modal
> > does not support iframes and I didn't want to weigh down the pages with new
> > code
> > - used Firefox logo and blue skin for newsletter sign up as directed in
> > hand-off meeting (https://etherpad.mozilla.org/ios-weprod-checkin-2015-02-13)
> > - the privacy notice will show up once bug 1134058 is fixed
> 
> Hi Stephanie, 
> I just realized that I didn't define details for a confirmation page. Is the
> form currently using our default newsletter confirmation? Could you share
> what the confirmation state looks like?
> 
> I think Troy/Matej might want to take a look at the copy. We might need
> confirmation language specific to this form that recognizes that we'll let
> the user know when Firefox for iOS is ready.

Adding Troy.

Just to confirm, is there anything ready to review now or is it still coming?

Comment 9

[Stephanie Hobson [:shobson]]

The newsletter does use the default newsletter form and by default the thank you page reads:

Thanks! Please check your inbox to confirm your subscription.
You'll receive an email from [e-mail] to confirm your subscription.
If you don't see it, check your spam filter. You must confirm your subscription to receive our newsletter.

Comment 10

[Matej Novak [:matej]]

(In reply to Stephanie Hobson [:shobson] from comment #9)
> The newsletter does use the default newsletter form and by default the thank
> you page reads:
> 
> Thanks! Please check your inbox to confirm your subscription.
> You'll receive an email from [e-mail] to confirm your
> subscription.
> If you don't see it, check your spam filter. You must confirm your
> subscription to receive our newsletter.

Yeah, it might be a good idea to tweak this. We probably don't want to mention "subscription" or "newsletter." Instead, we could reinforce that this is about iOS news.

Comment 11

[Craig Cook (:craigcook)]

Some thoughts about l10n, since localizing the website is separate from localizing the emails...

For purposes of getting this CTA/signup into production quickly we decided to launch it only in English. But the actual release of Firefox for iOS is months away so we could potentially have the email announcement translated in a number of languages by the time it goes out. In order to sign people up ahead of time we would need to know in which languages the announcement will eventually be available. Or at least a starter set of locales we can commit to now and we can add more along the way.

Alternatively, if we commit to the email being in English only we can remove the language option from the form but still allow other locales to see the form, and just indicate that the email itself will be in English.

One more option is to send the email only in English and expose the form only to English browsers. That seems like the least desirable path but it's still an option.

In all three cases we can still launch the CTA updates on the website in English first and other locales can be added as they update strings, so there should be no need to adjust the schedule. We just need to know how to treat the new strings on the website.

Ultimately this decision is up to the folks handling the emails. Who should we ping on the email end of things?

Also ccing flod so he's in the loop.

Comment 12

[Jennifer Bertsch [:jbertsch]]

(In reply to Craig Cook (:craigcook) from comment #11)
> Some thoughts about l10n, since localizing the website is separate from
> localizing the emails...
> 
> For purposes of getting this CTA/signup into production quickly we decided
> to launch it only in English. But the actual release of Firefox for iOS is
> months away so we could potentially have the email announcement translated
> in a number of languages by the time it goes out. In order to sign people up
> ahead of time we would need to know in which languages the announcement will
> eventually be available. Or at least a starter set of locales we can commit
> to now and we can add more along the way.
> 
> Alternatively, if we commit to the email being in English only we can remove
> the language option from the form but still allow other locales to see the
> form, and just indicate that the email itself will be in English.
> 
> One more option is to send the email only in English and expose the form
> only to English browsers. That seems like the least desirable path but it's
> still an option.
> 
> In all three cases we can still launch the CTA updates on the website in
> English first and other locales can be added as they update strings, so
> there should be no need to adjust the schedule. We just need to know how to
> treat the new strings on the website.
> 
> Ultimately this decision is up to the folks handling the emails. Who should
> we ping on the email end of things?
> 
> Also ccing flod so he's in the loop.

+Ben Niolet from the email team

Comment 13

[Ben Niolet]

Hi Craig and all. 

Jen and I will sync up with the PMM team to id the priority locales. After that we'll work with the l10n team to figure out how to cover locales (if any) that we don't already have covered on the email side. Sound good?

Comment 14

[Craig Cook (:craigcook)]

(In reply to Ben Niolet from comment #13)

> Jen and I will sync up with the PMM team to id the priority locales. After
> that we'll work with the l10n team to figure out how to cover locales (if
> any) that we don't already have covered on the email side. Sound good?

Sounds great!

Comment 15

[Lee Tom]

Attachment: blue-mobile_icon.svg

Blue mobile icon SVG for iOS link

Comment 16

[Lee Tom]

Attachment: green-checkmark_icon.svg

Green checkmark icon SVG - updated

Comment 17

[Lee Tom]

Attachment: yellow-alert_icon.svg

Yellow alert icon SVG - updated

Comment 18

[Craig Cook (:craigcook)]

Attachment: Download button, home page

Comment 19

[Craig Cook (:craigcook)]

Attachment: Download button, desktop page

Comment 20

[Craig Cook (:craigcook)]

Attachment: Hello page

Comment 21

[Craig Cook (:craigcook)]

Attachment: Sync page

Comment 22

[Craig Cook (:craigcook)]

Attachment: Android page

Comment 23

[Craig Cook (:craigcook)]

Attachment: firefox/new page

Comment 24

[Craig Cook (:craigcook)]

Attachment: Email signup page

Comment 25

[Holly Habstritt Gaal [:Habber]]

Thanks for sharing the screenshots. I have a few updates to pass along. I’m not sure if some things are showing up this way because of your user agent when previewing these locally. Maybe iOS users won’t actually see some of the links/buttons that are showing up in the screenshots. Just in case, I’ve noted a few things below:

Homepage: For iOS users can we remove the “Systems & Languages / What’s New / Privacy” links?

Hello: 'Try Hello' button shouldn’t show up for iOS users.

Sync: This page seems to be missing a line of copy. Check the wireframes for guidance and copy doc for proper text. (http://cl.ly/image/0R2I0L1V3m0u) We replaced one line of copy in the page and then added the “Fx is coming soon… sign up…” copy/link below. The icon was not appearing in my screenshots, but if we are going to use an icon here, it should be Lee’s new blue mobile icon. Also, is it possible to have “device” not wrap by itself to the second line?

Download /new page: For iOS users there should be only 1 tertiary link after the logo and page messaging (http://cl.ly/image/2Q363H0I1S0Q). The link is “Learn more about Firefox on iOS” and points to the blog post.

If you have any questions, I'm free to meet tomorrow.

Comment 26

[Holly Habstritt Gaal [:Habber]]

One more note: Once we have our Firefox Family navigation over all product pages, I don't think it will be necessary to have the message about iOS on the Desktop page. We will simply not display a download button or message as iOS will be in the navigation just above the page.

Comment 27

[Jennifer Bertsch [:jbertsch]]

Thanks for:
1. coding this, Stephanie!  
2. and for posting the screenshots, Craig!
3. and for reviewing, Holly!

Maybe we could put it up on a demo server tomorrow and look at it on iOS devices just to make sure everything is as expected?  My schedule is pretty open tomorrow, so I could look pretty quickly if you ping me on irc once they are up.

Comment 28

[Craig Cook (:craigcook)]

(In reply to Holly Habstritt Gaal [:Habber] from comment #25)
> Thanks for sharing the screenshots. I have a few updates to pass along. I’m
> not sure if some things are showing up this way because of your user agent
> when previewing these locally. Maybe iOS users won’t actually see some of
> the links/buttons that are showing up in the screenshots. Just in case, I’ve
> noted a few things below:

I should mention that the screenshots are actually from Firefox and simulating the iOS presentation by changing some classes around in devtools, so I could have easily missed something when I made them. Maybe it's worth getting this onto a demo server after all, for easier testing with real iOS devices, but I think all five are currently in use.

Comment 29

[Craig Cook (:craigcook)]

(In reply to Jennifer Bertsch [:jbertsch] from comment #27)

> Maybe we could put it up on a demo server tomorrow and look at it on iOS
> devices just to make sure everything is as expected?  My schedule is pretty
> open tomorrow, so I could look pretty quickly if you ping me on irc once
> they are up.

Jinx!

Comment 30

[Troy Palmer]

Hey everyone

Here is some new copy for the confirmation page based on the copy and feedback from Comments #9 and #10. Let me know if there are any questions:


Thanks for your interest in the upcoming iOS version of Firefox. We’re pretty excited about it too!

Don’t forget to check your inbox to confirm your request to get Firefox for iOS updates. If you don’t see an email from [e-mail], check your spam filter. You must confirm your request in order to receive the updates.

Comment 31

[Jennifer Bertsch [:jbertsch]]

Thanks, Troy.

Stephanie - Let's move forward with this.

Comment 32

[Stephanie Hobson [:shobson]]

Looks like we really do need to get it on a demo server so people can actually look at it with iOS devices. There's at least 3 different ways content is being hidden/shown based on operating systems and Craig was only able to spoof one of them for the screen shots BUT he thinks he can get a demo server for us on Monday! Yay!

Comment 33

[Francesco Lodolo [:flod]]

I left a comment in the PR about reusing the same string in the /android page.
https://github.com/mozilla/bedrock/pull/2750

If we could do that it would be great.

If someone confirm that strings are good to go, I can start exposing them for localization today.

Comment 34

[Jennifer Bertsch [:jbertsch]]

(In reply to Francesco Lodolo [:flod] from comment #33)
> I left a comment in the PR about reusing the same string in the /android
> page.
> https://github.com/mozilla/bedrock/pull/2750
> 
> If we could do that it would be great.
> 
> If someone confirm that strings are good to go, I can start exposing them
> for localization today.

Strings are good to go.  Thx Flod!

Comment 35

[Craig Cook (:craigcook)]

This is up on https://www-demo5.allizom.org/

Comment 36

[Mike Alexis [:malexis]]

Stephanie,
Let Ben Niolet know when the confirmation page is up on demo5. He's blocked from testing the Exact Target back-end stuff until that's up.

Comment 37

[Jennifer Bertsch [:jbertsch]]

Hi-

I looked at the homepage, Sync, Hello, Android, and /new pages on my iphone 6.

They are all working as expected, except for /new which still has the old yellow ! icon not the new icon blue mobile icon in comment 15 above.

Thx,
Jen

Comment 38

[Mike Alexis [:malexis]]

Ben, 
Can you provide a list of languages in which the emails will eventually be translated? Stephanie will need those to add to the drop-down.

Comment 39

[Ben Niolet]

de,en,es,fr,id,pt-BR,ru,pl,hu

Comment 40

[Stephanie Hobson [:shobson]]

Sounds like the drop-down menu configuration needs to happen in bucket, Ben should be able to set that up himself?

Comment 41

[Craig Cook (:craigcook)]

Yeah, the list of locales should be handled in basket and the website form just displays them. I think the newsletter ID is "firefox-ios"? If Ben doesn't have the right access we can ask pmac to add them.

Comment 42

[Ben Niolet]

I have those permissions. The basket slug "firefox-ios" already has those languages assigned.

Comment 43

[Stephanie Hobson [:shobson]]

I think I've done all the changes and Craig has pushed to demo5 for testing.

Comment 44

[Lee Tom]

Attachment: blue-mobile_icon.svg

Hi Stephanie, Do you mind trying to use this SVG for the iOS alert blurb? I updated a couple of things. Thanks

Comment 45

[Holly Habstritt Gaal [:Habber]]

For those (like me) that don't have an iPhone for testing, would somebody mind posting iPhone screenshots for review?

Comment 46

[Jennifer Bertsch [:jbertsch]]

Attachment: /new download page

Comment 47

[Jennifer Bertsch [:jbertsch]]

Attachment: android

Comment 48

[Jennifer Bertsch [:jbertsch]]

Attachment: hello

Comment 49

[Jennifer Bertsch [:jbertsch]]

Attachment: email sign up page

Comment 50

[Jennifer Bertsch [:jbertsch]]

Attachment: moz homepage

Comment 51

[Jennifer Bertsch [:jbertsch]]

(In reply to Lee Tom from comment #44)
> Created attachment 8568275 [details]
> blue-mobile_icon.svg
> 
> Hi Stephanie, Do you mind trying to use this SVG for the iOS alert blurb? I
> updated a couple of things. Thanks

Thanks, Lee!  

Hi Stephanie-

Can we use a cleaner version of that icon? You can't see it v well on my screenshots, but it is blurry on my iphone 6.

Thx,
Jen

Comment 52

[Holly Habstritt Gaal [:Habber]]

On /new: There are still 3 links showing up on iOS for /new. For iOS users there should be only 1 tertiary link after the logo and page messaging (wireframe - http://cl.ly/image/2Q363H0I1S0Q). The link is “Learn more about Firefox on iOS” and points to the blog post.

On /new: There seems to be too much spacing between main message, links, and image. I’ve noted where (in red) in this iPad screenshot http://cl.ly/image/1Y0i243h2x2K Lee, can you advise on spacing here?


Sync (viewing this page on my iPad): width of “soon you’ll be able to use Sync on your iOS device” is greater than “Firefox is coming soon…”, below it. Can the text area width for each of these lines of text be the same? I’ve noted this (in red) in this iPad screenshot http://cl.ly/image/243B3N3U2o2c

Android: “more” wraps to second line by itself. Can this be avoided and the word “learn” wrap with it? 

Hello: looks good!

Comment 53

[Stephanie Hobson [:shobson]]

I looked into the spacing on /new and I don't think it's practical to change it today. The space is there to accommodate the possibility of multiple links for a variety of different device/os/browser/translation state combos. I'd have to re-think how the switching is happening and I don't have time if we want this out of review today :/

Comment 54

[Stephanie Hobson [:shobson]]

Attachment: iPad screen shots Feb 24 15:39

iPad screen shots. Didn't include the newsletter page since there was no changes to it since last round of feedback.

Comment 55

[Stephanie Hobson [:shobson]]

Attachment: iPhone screen shots Feb 24 15:39

iPhone screen shots (minus newsletter sign up page)

Comment 56

[Holly Habstritt Gaal [:Habber]]

Is there any way to stop a single word from wrapping to the next line by itself (ie: iPad Sync page and iPhone Hello)? 

The spacing above and below the /new link on iPad is not ideal. I understand that we don't want to delay launch because of it, but is it possible to fix this afterwards?

Everything else looks good!

Comment 57

[Stephanie Hobson [:shobson]]

Hi Holly, Craig has given me permission to add a hack for the spacing above and below the link on /new could you please provide me with exact pixel measurements to work to or identify a space somewhere else on the page that I can measure to get an exact pixel measurement?

Comment 58

[Ben Niolet]

Attachment: IMG_1910.PNG

Hi gang. I'm doing some testing for the ExactTarget / Basket integration, and I've noticed that when you submit the form, whether on my iPhone 6 or my iPad, the confirmation page loads so that it's too "zoomed" in. You have to pinch it back to see all of the text. I'm not an expert, so maybe I'm wrong, but is that a "viewport" issue? 

This is happening on bo

Comment 59

[Stephanie Hobson [:shobson]]

Hi Ben, What's happening is that when you fill out the form the device zooms in on the form fields to make them easier to see. When you submit the form the device does not zoom back out and so when the thank you message loads it is still zoomed in on that too. There isn't a way to control the user's zoom using javascript so the solution for may not be simple :( I'm looking into it.

Comment 60

[Holly Habstritt Gaal [:Habber]]

(In reply to Stephanie Hobson [:shobson] from comment #57)
> Hi Holly, Craig has given me permission to add a hack for the spacing above
> and below the link on /new could you please provide me with exact pixel
> measurements to work to or identify a space somewhere else on the page that
> I can measure to get an exact pixel measurement?

Hi Stephanie, 
Awesome news re: lonely words wrapping to next line. 

I was not the visual designer for this page and don't have the PSDs. Do you know what the spacing is currently when there are 3 links displayed? Like this http://cl.ly/image/0E1S3u1N321F 

The space between the headline (Choose Independent. Choose Firefox.) and the top link should always be consistent. Between iPhone and iPad, the spacing gets greater. The spacing used in this screenshot, when there are 3 links, looks good http://cl.ly/image/0E1S3u1N321F Using that spacing will keep us in line with the original designs.

For the spacing between the bottom (or sole) link and the device screenshot, you can double the spacing you used between the headline and top (or sole) link.

Comment 61

[Stephanie Hobson [:shobson]]

Hi Holly, I think you intended to link to 2 different screen shots in comment 60 but it's the same one twice, so I used the current /new page as the 3 link example page. I'm sorry if that was not the one you intended. The current /new page (3 links) when viewed on iOS has the following spacing*:

desktop:
Heading -> 140px -> link list -> 182px -> graphic

tablet:
Heading -> 140px -> link list -> 182px -> graphic

mobile:
Heading -> 64px -> link list -> 264px -> footer

small mobile:
Heading -> 64px -> link list -> 264px -> footer

This is the same spacing used on the updated version of the new page except that there was 42px of blank space where the other 2 list items used to be. I figured that had to go so it's been removed from the version on demo5 already :)

Does this sound like the right numbers to change to:

all sizes:
Heading -> 64px -> link list -> 128px -> footer





* spacing measured includes line height which is why the numbers are so random looking, rest assured that the coder before me used very sane looking numbers and I will adjust those sane numbers in sane ways to come up with the new values ;)

Comment 62

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/4b36ba505944ee10ffe2e023bf314d181fb48a13
Fix Bug 1126578: iOS CTA updates and newsletter

newsletter/ios
- created page, stylesheet, and URL to support sign up page to live at newsletter/ios
- I did not use the provided starter template for email newsletters instead, I base it off of an existing page with the Firefox theme

Added iOS only copy to: button macro, hello, new, sync, and android pages. Made CSS changes to support this. Including a few places where I increased the contrast on link styles.

helpers & form
- made the 'details' text customizable (someone who knows things about python needs to look this part over)

https://github.com/mozilla/bedrock/commit/fed022c0cff661264a56b7fa65288516e67ffa41
Merge pull request #2750 from stephaniehobson/bug-1126578-ios-cta

Fix Bug 1126578: iOS CTA updates and newsletter

Comment 63

[Holly Habstritt Gaal [:Habber]]

(In reply to Stephanie Hobson [:shobson] from comment #61)
> Hi Holly, I think you intended to link to 2 different screen shots in
> comment 60 but it's the same one twice, so I used the current /new page as
> the 3 link example page. I'm sorry if that was not the one you intended. The
> current /new page (3 links) when viewed on iOS has the following spacing*:
> 
> desktop:
> Heading -> 140px -> link list -> 182px -> graphic
> 
> tablet:
> Heading -> 140px -> link list -> 182px -> graphic
> 
> mobile:
> Heading -> 64px -> link list -> 264px -> footer
> 
> small mobile:
> Heading -> 64px -> link list -> 264px -> footer
> 
> This is the same spacing used on the updated version of the new page except
> that there was 42px of blank space where the other 2 list items used to be.
> I figured that had to go so it's been removed from the version on demo5
> already :)
> 
> Does this sound like the right numbers to change to:
> 
> all sizes:
> Heading -> 64px -> link list -> 128px -> footer
> 
> 
> 
> 
> 
> * spacing measured includes line height which is why the numbers are so
> random looking, rest assured that the coder before me used very sane looking
> numbers and I will adjust those sane numbers in sane ways to come up with
> the new values ;)

Hi Stephanie, 

Just to be clear, the spacing should not block launching, although we should get this figured out soon.

I did mean to link to the same screenshot twice. Sorry I wasn't more clear, but I was just reiterating that the spacing between the headline and the top of the links in that screenshot (http://cl.ly/image/0E1S3u1N321F) is fine and should be consistent when switching between devices. The spacing above and below the link area (whether there is 1 or 3 links) shouldn't change. There shouldn't be a gap left where the links used to be. When there is only 1 link, the content below should slide up to fill the space it left. 

It sounds like by removing the 42px of spacing that was accommodating the extra links, you've solved it. Without being able to to try things out in devtools for the iOS view or move them around in a PSD, it's hard to estimate what the pixels you shared would do. However, just by removing the 42px and making sure the space between the headline and top of the links is always consistent, the issue will be solved!

Comment 64

[Stephanie Hobson [:shobson]]

Attachment: screenshots of /new 20150225:15:36

Hi Holly,

Don't worry, it's not blocking launch :)

I'm confused because you ask me to stay consistent to the original design and make the space consistent on different devices. The original design does not have consistent space between devices.

Sometimes text isn't much of a substitute for being in the same room and getting to point at things :( I've attached screen shots of all the different versions of this page. Maybe it would be clearer to me if you drew arrows or something? Or maybe everything is okay now?

Comment 65

[Holly Habstritt Gaal [:Habber]]

Hi Stephanie, 

We should have just had a vidyo conversation :)  Sorry. It's hard to communicate about this in a bug and not knowing exactly how the original pages were built, spacing was defined, etc.

What you have will work in the screenshots will work just just fine. The only thing that is a little odd is the single link floating in the iPad page. However, soon we'll have a nice iOS download button to fill the space. Let's just call it done. Thanks for working on this!

Comment 66

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/c8b7a5f5c39e735b546edee0bfc0f73e73ce59c9
Bug 1126578: iOS CTA updates and newsletter

Small tweak for spacing around list on firefox/new and some text sizing tweaks to the subscribe form to avoid iOS zooming in.

https://github.com/mozilla/bedrock/commit/65d11f5b2705f3f3ff7762532ca8ec7e63211fc2
Merge pull request #2778 from stephaniehobson/bug-1126578-ios-cta

Bug 1126578: iOS CTA updates and newsletter