583842 - Newsletter signup - promotion on "Stay Connected" page

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Eve Murto]

Please add a promotion for the mainstream user newsletter on the "Stay Connected" page, which is this one: 

http://www.mozilla.com/en-US/firefox/connect/

Location: We'd love it in the far left position (where the Facebook icon currently is), and move the icons on the page to accommodate the new one 

The subheadline would need to be modified, as it currently says this:  

"Firefox is on your favorite social media sites. Connect with us and join the conversation!"

Since this is a newsletter and not a social media site, we'll look to John Slater's team to update the headline language to reflect that ... one humble suggestion: 

"Learn about Firefox and other Mozilla happenings through our newsletters and your favorite social media sites."  (feel free to edit) 

(We might choose to add one or two more newsletters on this page over time). 

Links will lead the viewers to the new Newsletter landing page for signup (bug #576413) currently underway. 

Thank you

Eve x288

Comment 1

[John Slater]

Assigning this one to Lee.

Also, two suggestions:
- given the layout of the page and the general way we structure things on mozilla.com, I think this promo would be better suited to being on the right (under the nav).
- how about this for the new page subhead: "There are lots of ways to keep in touch with Firefox. Connect with us and join the conversation!"

Eve, do you have any direction on what the promo copy should say?

Comment 2

[John Slater]

Copying Steven as a heads up for future work and Tara so she can track this while I'm on paternity leave.

Comment 3

[Eve Murto]

How about if the promo copy says:  (edit to something better if you wish)

Major Headline: 
Newsletter   

Subheadline: 
Learn more and join us...

Comment 4

[John Slater]

If we keep it really short, like the other promos on the page, it could be something like:

Headline: Newsletter
Linked Text: Get product news and more

Or, if we made it bigger (say, filling up the entire vertical height of the open space), we could try something like what we're using on First Run: 

Headline: Get the Monthly News
Detail text: Don't miss our newsletter featuring new products, Firefox tips & tricks, events and more!

Eve, any preference?

Comment 5

[Lee Tom]

Attachment: Mozilla.com Footer promo for newsletter - v2

Another jpg including more body copy for the promo...

Comment 6

[Eve Murto]

Lets go with the bigger promo zone, thank you, John.    With language that you suggest to fit the space but as you said, this would be wonderful: 

Headline: Get the Monthly News
Detail text: Don't miss our newsletter featuring new products, Firefox tips &
tricks, events and more!
[email sign in box]
[Country: (pick list)] - set on United States as default since this is EN-US
[privacy check box]
(see what we did on the First Run page, for instance...) 
 https://www.mozilla.com/en-US/firefox/3.6/firstrun/

thank you! Eve x288

Comment 7

[John Slater]

Hey Lee. The mockup in comment #5 is for the homepage, not http://www.mozilla.com/en-US/firefox/connect/ (perhaps you meant to add that to bug 582349?)

What I had in mind was using Eve's text from comment #6 to create a promo under the right nav on http://www.mozilla.com/en-US/firefox/connect/ that would be roughly the vertical height of both rows of content on the main part of the page. Was thinking that it could look a little different from the others (but still in the general moz.com styling) so it would stand out.

Let me know if you want to discuss further!

Comment 8

[Lee Tom]

Attachment: Newsletter sign-up/promo for Connect page

Hi Eve,
Attached is the newsletter signup/promo for Connect page.

Lee

Comment 9

[Eve Murto]

This looks great!

Comment 10

[Lee Tom]

Final PSDs for Steven:
https://www.yousendit.com/download/T1VreUNKMGtWRCt4dnc9PQ

Comment 11

[John Slater]

Lee, can you upload that PSD again to the intothefuzz file repository?

Steven, we're hoping to launch this on Friday (after the basic landing page goes up). Is that doable?

Comment 13

[Eve Murto]

Gentle checkin:  when can we go live on this one?

Comment 14

[Lee Tom]

you guys have these right? just want to make sure!

http://intothefuzz.com/leetom/Mozilla%20Newsletter/Promos/

Comment 15

[Mike Alexis [:malexis]]

Steven,
Hoping to get this live soon. can you provide eta? Should have all you need.

Comment 16

[Alex Buchanan [:abuchanan]]

Les, can you do the CSS on this one?

Here's the PSD,
http://intothefuzz.com/leetom/Mozilla%20Newsletter/Promos/04_newsletter_signup_connect.psd

Comment 17

[Alex Buchanan [:abuchanan]]

Attachment: newsletter form patch

Here's a patch that will add the form to the sidebar.  The logic should work fine, it just needs some CSS

Comment 18

[Alex Buchanan [:abuchanan]]

The style can mostly be copied from existing newsletter forms on the firstrun page and/or newsletter landing page.

http://www-trunk.stage.mozilla.com/en-US/firefox/3.6/firstrun/index.html
http://www-trunk.stage.mozilla.com/en-US/newsletter/

Comment 19

[Les Orchard [:lorchard]]

(In reply to comment #17)
> Created attachment 486155 [details] [diff] [review]
> newsletter form patch
> 
> Here's a patch that will add the form to the sidebar.  The logic should work
> fine, it just needs some CSS

There are some inconsistencies with this patch and the mockup, will need a separate form include to make it match up unless we're okay with departing from the mockup.

Also, seeing a few PHP warnings on staging and my dev machine

Comment 20

[Alex Buchanan [:abuchanan]]

(In reply to comment #19)
> There are some inconsistencies with this patch and the mockup, will need a
> separate form include to make it match up unless we're okay with departing from
> the mockup.

To be specific the inconsistencies are...

1) Header "Get the monthly news"

implement this above the PHP file include

2) Intro paragraph "Don't miss our newsletter..."

I'd like to keep this consistent with the firstrun page

http://www-trunk.stage.mozilla.com/en-US/firefox/3.6/firstrun/index.html

"Subscribe to our email Newsletter to receive special Mozilla news, Firefox tips & tricks, and other Mozilla information."

Eve, is it OK if we use the paragraph from the firstrun page, instead of the one in the mockup?  It's more consistent that way, and easier for Les to implement.  Thanks.

3) Label on the country field.  I'm ok with dropping this, since the default should be a blank value that says "Select country" anyway.



We need to be better at reusing copy/style for these forms, please.  That helps web devs reuse code and keep things cleaner on the backend.

Comment 21

[Les Orchard [:lorchard]]

r76335 includes abuchanan's patch along with CSS based on the mockup, but I left the copy in the shared form include alone

Comment 22

[Alex Buchanan [:abuchanan]]

(In reply to comment #21)
> r76335 includes abuchanan's patch along with CSS based on the mockup, but I
> left the copy in the shared form include alone

I think it looks great.  Thanks Les!

Comment 23

[Eve Murto]

Please go with the language in the mockup.  We will not be using absolutely identical wording everywhere as signup boxes are different sizes and sometimes tuned slightly for different audiences.  I like the language that was selected for this box and the character count fits perfectly to the spacing.   Please keep the language suggested.  thank you. -Eve

Comment 24

[Les Orchard [:lorchard]]

(In reply to comment #23)
> Please go with the language in the mockup.  We will not be using absolutely
> identical wording everywhere as signup boxes are different sizes and sometimes
> tuned slightly for different audiences.  I like the language that was selected
> for this box and the character count fits perfectly to the spacing.   Please
> keep the language suggested.  thank you. -Eve

I'll see what I can do about tweaking the copy in a duplicate instance of the form or something.

Just FYI, though, character counts in mockups rarely fit exactly the same way in implemented web pages

Comment 25

[Les Orchard [:lorchard]]

r76356 - Duplicated the newsletter form code to accommodate copy variant.

http://www-trunk.stage.mozilla.com/en-US/firefox/connect/

Comment 26

[raymond [:retornam] (inactive)]

qa-verified-trunk http://www-trunk.stage.mozilla.com/en-US/firefox/connect/