iOS CTA updates on mozilla.org

RESOLVED FIXED

Status

www.mozilla.org
Project Tracking
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: malexis, Assigned: shobson)

Tracking

(Depends on: 1 bug, Blocks: 1 bug)

Production
x86
Mac OS X
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1644254] )

Attachments

(21 attachments)

5.72 MB, image/png
Details
1.39 KB, image/svg+xml
Details
720 bytes, image/svg+xml
Details
1.09 KB, image/svg+xml
Details
123.96 KB, image/png
Details
377.96 KB, image/png
Details
812.32 KB, image/png
Details
464.28 KB, image/png
Details
1.07 MB, image/png
Details
579.97 KB, image/png
Details
169.80 KB, image/png
Details
1.38 KB, image/svg+xml
Details
65.00 KB, image/png
Details
76.01 KB, image/png
Details
223.30 KB, image/png
Details
299.36 KB, image/png
Details
133.43 KB, image/png
Details
230.70 KB, image/jpeg
Details
226.66 KB, image/jpeg
Details
580.77 KB, image/png
Details
233.55 KB, image/jpeg
Details
(Reporter)

Description

3 years ago
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
(Reporter)

Updated

3 years ago
Whiteboard: [kb=1644254]
(Reporter)

Comment 1

3 years ago
Notes from Feb 3 check-in.

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

Schedule:

https://app.smartsheet.com/b/publish?EQBCT=b6b2e128e5664e1d985f7510436275aa
Assignee: nobody → craigcook.bugz
Created attachment 8560775 [details]
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.
(Reporter)

Updated

3 years ago
Depends on: 1131259
Assignee: craigcook.bugz → shobson
(Reporter)

Updated

3 years ago
Depends on: 1132686
(Reporter)

Comment 3

3 years ago
Copy deck:
https://docs.google.com/document/d/1-qJd6RTQWikaDfT0BTccoybr8VZwHEDeBVeTjcqXN_M/edit?usp=sharing
Let's use this url  https://www.mozilla.org/newsletter/ios
Duplicate of this bug: 1134340
(Assignee)

Comment 6

3 years ago
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
(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.
Flags: needinfo?(shobson)
Flags: needinfo?(matej)

Comment 8

3 years ago
(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?
Flags: needinfo?(matej) → needinfo?(troy)
(Assignee)

Comment 9

3 years ago
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 mozilla@e.mozilla.org to confirm your subscription.
If you don't see it, check your spam filter. You must confirm your subscription to receive our newsletter.
Flags: needinfo?(shobson)
(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 mozilla@e.mozilla.org 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.
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.
(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

3 years ago
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?
(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

3 years ago
Created attachment 8566755 [details]
blue-mobile_icon.svg

Blue mobile icon SVG for iOS link

Comment 16

3 years ago
Created attachment 8566758 [details]
green-checkmark_icon.svg

Green checkmark icon SVG - updated

Comment 17

3 years ago
Created attachment 8566759 [details]
yellow-alert_icon.svg

Yellow alert icon SVG - updated
Created attachment 8566808 [details]
Download button, home page
Created attachment 8566809 [details]
Download button, desktop page
Created attachment 8566810 [details]
Hello page
Created attachment 8566812 [details]
Sync page
Created attachment 8566814 [details]
Android page
Created attachment 8566815 [details]
firefox/new page
Created attachment 8566816 [details]
Email signup page

Updated

3 years ago
Blocks: 813052
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.
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.
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.
(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.
(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

3 years ago
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 mozilla@e.mozilla.org, check your spam filter. You must confirm your request in order to receive the updates.
Flags: needinfo?(troy)
Thanks, Troy.

Stephanie - Let's move forward with this.
(Assignee)

Comment 32

3 years ago
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!
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.
Flags: needinfo?(shobson)
(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!
This is up on https://www-demo5.allizom.org/
(Reporter)

Comment 36

3 years ago
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.
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
(Reporter)

Comment 38

3 years ago
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

3 years ago
de,en,es,fr,id,pt-BR,ru,pl,hu
(Assignee)

Comment 40

3 years ago
Sounds like the drop-down menu configuration needs to happen in bucket, Ben should be able to set that up himself?
Flags: needinfo?(shobson)
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

3 years ago
I have those permissions. The basket slug "firefox-ios" already has those languages assigned.
(Assignee)

Comment 43

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

Comment 44

3 years ago
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
For those (like me) that don't have an iPhone for testing, would somebody mind posting iPhone screenshots for review?
Created attachment 8568346 [details]
/new download page
Created attachment 8568347 [details]
android
Created attachment 8568348 [details]
hello
Created attachment 8568349 [details]
email sign up page
Created attachment 8568351 [details]
moz homepage
(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
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!
(Assignee)

Comment 53

3 years ago
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 :/
(Assignee)

Comment 54

3 years ago
Created attachment 8568851 [details]
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.
(Assignee)

Comment 55

3 years ago
Created attachment 8568857 [details]
iPhone screen shots Feb 24 15:39

iPhone screen shots (minus newsletter sign up page)
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!
(Assignee)

Comment 57

3 years ago
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?
Flags: needinfo?(hhabstritt.bugzilla)

Comment 58

3 years ago
Created attachment 8569378 [details]
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
(Assignee)

Comment 59

3 years ago
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.
(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.
Flags: needinfo?(hhabstritt.bugzilla)
(Assignee)

Comment 61

3 years ago
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 ;)
Flags: needinfo?(hhabstritt.bugzilla)

Comment 62

3 years ago
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

Updated

3 years ago
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Depends on: 1136960
(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!
Flags: needinfo?(hhabstritt.bugzilla)
(Assignee)

Comment 64

3 years ago
Created attachment 8569508 [details]
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?
Flags: needinfo?(hhabstritt.bugzilla)
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!
Flags: needinfo?(hhabstritt.bugzilla)

Comment 66

3 years ago
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
You need to log in before you can comment on or make changes to this bug.