Create landing page for mobile beta launch

[annlee@adblockplus.org]

Background

The landing page serves as the marketing 'entry point' for any journalists or people who want to get access to the beta version of the browser, as well as give iOS users a chance to get notified of the iOS launch.

Due to the fact that we need to keep everything confidential until PR announces the beta / press release,
I cannot get the URL for the Google+ community beforehand, which is linked to the button on this page. (Once a community is created it goes live, and it's not possible to create a private community and then change to a public community later).

I've provided a placeholder URL in this ticket (it's to a Google+ community on adblocking that @greiner created in the past), to be swapped out for the real URL on the day of our launch announcement.

​user flow & linking

For email collection & storage: refer to Issue2234

The Google+ community page is where discussion about the beta test happens, beta testers can post topics related to beta testing, including bugs, issues, feature requests etc., and we can post updates on the progress of the beta. For more info on using a Google+ community page in beta testing an Android app, ​see step 2

What to change

Create a new landing according to the attached layout​ and style guide​ page available under this URL scheme and all other available respective languages: ​https://adblockplus.org/en/adblock-browser

Add this headline to the top of the page: Want Adblock Browser for your smartphone or tablet?
Add this subheadline below the headline: Join the beta test!

Below the subheadline, add a numbered list of instructions about how to access the beta version of the browser:

1. Join the Adblock Browser for Android Beta Google+ community.
2. Click the Become a Tester link.
3. Download the beta app.

Below this list, add a green button with this text inside: Beta test Adblock Browser for Android
When this green button is clicked, users should be taken to the Google+ community page being created by #2243. The URL that will redirect user to Google+ community page is -> ​https://adblockplus.org/redirect?link=adblock_browser_android_beta_community (#2463).

Below the green button, add a message for iOS users, which prompts them to enter their email in the form field as follows:

The first line of text is: iOS user? Coming soon!
The second line of text is: Get a heads-up prior to the launch!

Below this text, add a form field in which people can enter in their email address. Add this text in light grey Inside the form field: Your email address (when the form field's value is the empty string and the control is not focused, for browser that don't support placeholder attirbute)

Next to the form field, add a small blue button with the text: Notify me

When a user submits their email address by clicking the blue button, this text, in BLACK, should replace the form field and button: A confirmation email has been sent. Please check your email and click the confirmation link.

When a user does not fill in their email address or provide invalid email address, but clicks the blue button anyway, this text, in RED (#d50215), should appear underneath the form field and button: "Please enter a valid email address."
as seen in this after no email design​

For French users ONLY, the following disclaimer text should appear at the bottom of the page, it's the same text that currently appears on the adblockplus.org landing page, except that 'Adblock Plus' is replaced with 'Adblock Browser':

En téléchargeant le logiciel Adblock Browser vous acceptez que si vous utilisez Adblock Browser pour visiter un site Internet en violation de toute obligation ou droit de quelque nature que ce soit en relation avec ce site Internet, en aucun cas EYEO ne pourra être tenu pour responsable envers vous ou tout autre tiers pour toute perte ou dommage (y compris, sans y être limité, les dommages pour perte de chances et perte de bénéfices) découlant directement ou indirectement de votre utilisation de ce logiciel.

Use current meta data in head section:
Title -> Adblock Browser Beta launch
Description -> Want Adblock Browser for your smartphone or tablet? Join the Adblock Browser for Android Beta Google+ community.

Additional information

The landing page described in the following may not go live until PR announces the beta / press release. We don't know the exact date yet, at earliest mid-April, we're supposed to get 2 weeks notice. This issue will ne updated accordingly.

[saroyanm]

@annlee please be more concrete when creating ticket, you can align with me beforehand to get information about technical details.
I guess the ticket is really missing bunch of information:

notification message, when clicked, brings devusers to the landing page

This doesn't say anything about what notification message you are talking about, anyway it doesn't matter how user will be redirected here it doesn't cause the implementation, so I would consider "links TO this page" information not important or you can mention that in the background of the description.

We also need to know what will be the link of current landing page, I think -> https://adblockplus.org/en/adblock-browser-beta
Adblock Browser

when clicked, the (green) Button should redirect users to the Google+ community page

Please add link to that community otherwise the description doesn't say anything about the link.

this should appear above the fold

What you mean by this ? Should it be different than in design ?

email addresses should be collected in a simple format, CSV is fine

Please be more concrete how the email addresses should e collected.
Also this is not part of the Websites module and if be honest I'm not sure how we should proceed here.
I'll suggest to align regarding storing the data with @Sebastian or @Matze (maybe they can help you more here)

see ​design

I can't see any technical details about design implementation I think you need to align with @Sven to provide styles for the buttons they are not generic buttons we are using anywhere (anyway I couldn't find similar button currently implemented).

I have no choice to reject the ticket.

[sebastian]

Replying to saroyanm:

I guess the ticket is really missing bunch of information

Agreed.

We also need to know what will be the link of current landing page, I think -> https://adblockplus.org/en/adblock-browser-beta

So far we didn't add "beta" to the URL of landing pages for upcoming products. Otherwise, the URL would change when we end the beta.

[philll]

@Ann-lee: When writing issues, please always imagine, you are telling the next random person passing by the street what's written in the "what to change" section. If that random person perfectly withtout any sort of question understood what you wanted, the description is fine.

I really put on question, whether this works with the current what to change section.

Also, please attach ALL files neccessary to fix an issue directly in the issue AND link them in your description. Texts should be directly within the description itself, as that has a version history.

[annlee@adblockplus.org]

please ignore, accidentally posted changes to ticket in comments

[philll]

• The info about the release time currently hidden in the background section is an essential detail of this issues and needs to go to the "What to change" section to not be missed
• I guess the URL of the landingpage is just an example and it should exist for other languages, too
• Why should we use quotes around "Adblock browser for Android Beta"?
• What is the "the Google+ community page"'s URL?
• What is the "PLACEHOLDER for Google+ community page:" for?
• What shall happen if a user clicks the blue "Notify me" button? (both, if the "your email adress" (<- note the typo) field was empty or not)
• The labels of the email address field and the according button are not described
• The design and style guide attachments are linked but not referred to in the description
• In general, I'd suggest to use a rather directive than descriptive language, as descriptive would imply things to exist already, while you actually want someone to do something

[philll]

I cleaned your description up a bit by using attachment: style links instead of full URLs and made some content relations more obvious. I still wonder about the following remarks:

• What happens to the grey preset text in the email form field if a user clickt in it or switches his cursor in there by other means?
• Shouldn't the no-email-address-entered form field error be rather red than black?
• (unaddressed from previous remarks) Why should we use quotes around "Adblock browser for Android Beta"?

[annlee@adblockplus.org]

Replying to philll:

• The info about the release time currently hidden in the background section is an essential detail of this issues and needs to go to the "What to change" section to not be missed

done

• I guess the URL of the landingpage is just an example and it should exist for other languages, too

Yes, correct

Can you advise on what I need to do in terms of the URL? Should I include all the different versions for each language in the ticket? Or do I just explain that it should exist for other languages too?

• Why should we use quotes around "Adblock browser for Android Beta"?

To differentiate it / call it out, because it's the name of the page, the next line of text also has quotes around the name of the button.

• What is the "the Google+ community page"'s URL?

There was an explanation in the Background section, I've added the relevant instruction now to the What to change section. Basically, I cannot create the community page in advance. Once created, it goes live and will be searchable, and this is not ok since we're keeping everything confidential. Therefore, since Manvel needs some kind of URL right now, I've given him a placeholder to use for the time being. Once we get close to the launch date, I will create the page and Manvel can swap out the placeholder URL for the real one.

• What is the "PLACEHOLDER for Google+ community page:" for?

(see above)

• What shall happen if a user clicks the blue "Notify me" button? (both, if the "your email adress" (<- note the typo) field was empty or not)

good point, I've added the description and design for both

• The labels of the email address field and the according button are not described

done

• The design and style guide attachments are linked but not referred to in the description

done

• In general, I'd suggest to use a rather directive than descriptive language, as descriptive would imply things to exist already, while you actually want someone to do something

done

[annlee@adblockplus.org]

Replying to philll:

I cleaned your description up a bit by using attachment: style links instead of full URLs and made some content relations more obvious. I still wonder about the following remarks:

Thanks @philll, looks good

Sorry there were several delays on my end, as I had to revise the design and then confirm any language limitations w/ PR & legal (which also affected the other issue 2214), which took longer than expected.

• What happens to the grey preset text in the email form field if a user clickt in it or switches his cursor in there by other means?

what do you mean by 'switched his cursor in there'?

I think usually the text disappears once you start typing your email, but in any case, will have to ask @sven what the standard UX treatment it

• Shouldn't the no-email-address-entered form field error be rather red than black?

not sure, I did consult @sven today on the email form field, color didn't come up, will ask again along w/ above point

• (unaddressed from previous remarks) Why should we use quotes around "Adblock browser for Android Beta"?

It's to highlight that it's the name of the community, to differentiate it from the rest of the sentence. Same idea with the next line, quotes around "Become a Tester" because it's the name of the button.

[philll]

Restored version 17 of this issue due to unwanted overwrite.

[saroyanm]

Replying to annlee@…:

Replying to philll:

• What happens to the grey preset text in the email form field if a user clickt in it or switches his cursor in there by other means?

what do you mean by 'switched his cursor in there'?

I think usually the text disappears once you start typing your email, but in any case, will have to ask @sven what the standard UX treatment it

I think this should be implemented as it mentioned in ​current specification
User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused.
So by default it could work different in the browsers that support placeholder attribute, but for ex IE 8 or 9 we should implement that ourself. I would suggest current scenario:
when the element's value is the empty string and the control is not focused
I've updated the description accordingly.

The landing page described in the following may not go live until PR announces the beta / press release. We don't know the exact date yet, at earliest mid-April, we're supposed to get 2 weeks notice. This issue will ne updated accordingly.

Makes no sense to mention in two places.
Updated accordingly

When a user does not fill in their email address but clicks the blue button anyway, this text should appear underneath the form field and button: Oops! You didn't enter your email address.

We should also consider the case when user enters wrong email address.
ex.: not valid Email address.

[saroyanm]

Updated the description after internal discussion. We will use type="email" for the email input field, so the validation will be done by browsers that support the email type attribute value.
So we will strip invalid emails before sending them to @annlee, so that will be done on the serverside.

[annlee@adblockplus.org]

update the description after speaking with @saroyanm, added the disclaimer text which should appear for French users only, the text is identical to that which currently appears on the adblockplus.org page, except that references to 'Adblock Plus' are replaced by 'Adblock Browser'. design of text is still pending.

[saroyanm]

I assume this ticket is ready, we still need some information regarding disclaimer design, but I assume that changes going to affect disclaimer in general, currently we can implement same disclaimer we have on adblockplus.org homepage and adjust when we will redesign that.

[saroyanm]

Updated description according @Lisa suggestion.

[saroyanm]

Updated ticket description we need to combine invalid email and empty email messages together to have both checks on serverside, so currently the message is:
Oops! You didn't enter a valid email address.

@Lisa @annlee

[annlee@adblockplus.org]

Checked with @Lisa, here is the text:

Please enter a valid email address.

This is applicable for the situation when someone enters an address but not in a valid format, as well as when someone doesn't enter anything at all but clicks the button

[fhd]

Note that #2463 will add a redirect for the beta community, let's use that one here as well. The link is going to be: https://adblockplus.org/redirect?link=adblock_browser_android_beta_community.

[saroyanm]

Replying to fhd:

Note that #2463 will add a redirect for the beta community, let's use that one here as well. The link is going to be: https://adblockplus.org/redirect?link=adblock_browser_android_beta_community.

Thanks, will update review shortly.

[Ross]

The landing page looks and functions as expected in most browsers other than what is listed below.

Problems:

• The green button is not displayed correctly in IE8.

• French text isn't displayed in a French set browser.

The French text did not appear until I changed the html tag's lang attribute to fr as well. I'm guessing the lang attribute is set depending on which language is in the URL? I only have the /en/ page for testing.

Expected issues:

• IE 8/9 do not support the type="email" attribute.

No validation occurs in these browsers at all (and it's done on the server as per a comment above).

Tested with:

IE	8.0.6001	Windows XP
IE	9.0.8112	Windows 7
IE	10.0.9200	Windows 7
IE	11.0.9600	Windows 8.1
Chrome	42.0.2311.135	Windows 8.1
Opera	29.0.1795.47	Windows 8.1
Firefox	37.0.2	Windows 8.1

[saroyanm]

Replying to Ross:

• The green button is not displayed correctly in IE8.

Will have a quick look, I've also tested with IE8 and it were working Okey, for me.

• French text isn't displayed in a French set browser.

The French text did not appear until I changed the html tag's lang attribute to fr as well. I'm guessing the lang attribute is set depending on which language is in the URL? I only have the /en/ page for testing.

Well you should also have French version of the page translated, but in general this should be fine because whenever user is redirected to the French version of the page the HTML lang attribute is being updated.

Expected issues:

• IE 8/9 do not support the type="email" attribute.

No validation occurs in these browsers at all (and it's done on the server as per a comment above).

It's Okey we still have serverside validation, for this case, doesn't make sense to implement validation logic both serverside and locally in this case.

[Ross]

Re-tested Adblock Browser pages as part of the CMS (instead of Anwiki). They appear to working correctly and the IE8 issue with the green beta test button is fixed.

Tested with:
cms / r42
web.adblockplus.org / r86 (with patches)

Tested on:

IE	8.0.6001	Windows XP
IE	9.0.8112	Windows 7
IE	10.0.9200	Windows 7
IE	11.0.9600	Windows 8.1
Chrome	42.0.2311.135	Windows 8.1
Opera	29.0.1795.47	Windows 8.1
Firefox	37.0.2	Windows 8.1
Chrome	42.0.3211.111	Android 4.2.2

[sebastian]

As we are targeting iOS users here. I suppose we should test Safari (Desktop and Mobile) as well. Probably also Firefox Mobile.

@saroyanm: I suppose the patch you added 7 days ago, ported the changes to the CMS? Can you put me in CC there, as well as for other related website changes?

[saroyanm]

Replying to sebastian:

@saroyanm: I suppose the patch you added 7 days ago, ported the changes to the CMS? Can you put me in CC there, as well as for other related website changes?

Sebastian I've added you as CC to all related reviews, actually the patches were sent by Email to Ross for test. I'll upload the patches to rietveld shortly.

[saroyanm]

Changeset:
​https://hg.adblockplus.org/web.adblockplus.org/rev/0f2408b32245