Closed Bug 630638 Opened 13 years ago Closed 13 years ago

Add open email field to site footer

Categories

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

Product:
www.mozilla.org
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: lforrest, Assigned: jlong)

References

Details

Attachments

(3 files)

Footer
163.44 KB, image/jpeg
Details
error state
108.47 KB, image/png
Details
Confirmation message placement
434.81 KB, image/png
Details 
Since we added the open email fields to the What's New and First Run page we've seen great results in user engagement, with a consistent 13% increases in mailing list subscribers. 

Lets apply the same open field treatment to the site footer throughout www.mozilla.com. 

Change:
-Keep the two lines of copy
-Remove the >> and add the open field and the small button used here: http://www.mozilla.com/en-US/firefox/3.6.11/whatsnew/
-When the small button is clicked it should collapse and show the other email fields. To make this work on this page, consider extending that row of gradient so the second layer of the footer does not get awkwardly covered.

Let me know if a mockup is needed.
Thanks for filing this, Laura!  Jane and I had a few questions/edits: 

- We'd like to remove the Facebook and Twitter icons and place them in the bubbles on "More Ways to Connect".  This would leave the footer with the email opt-in and the more ways to connect graphic.  There would no longer be direct links to facebook and twitter.  They'd get there by clicking on the more ways to connect. 

- Is there any heat map data on which portion of the footer is clicked the most?  We were discussing move it to the left hand side of the footer vs. the right.
Attached image Footer — 

    
    

    
  
Awesome! +1 for building on success.

    
    

    
  
(In reply to comment #1)
- We'd like to remove the Facebook and Twitter icons and place them in the
bubbles on "More Ways to Connect".  This would leave the footer with the email
opt-in and the more ways to connect graphic.  There would no longer be direct
links to facebook and twitter.  They'd get there by clicking on the more ways
to connect. 

I'm in support of simplifying the footer if Twitter and Facebook are no longer needed down there. This would leave us with: 

-Email 
-More Ways to Connect
-Let's Be Friends graphic. 

I wonder if within this more paired down social media footer we'd need the "Let's Be Friends" graphic and copy - it doesn't make as much sense as before. John - what do you think? 

In any case, moving from 5 elements in that row down to 3 (or even 2) we may need to do a bit of re-thinking and re-balancing down there. 

I do like the Yeti where it is.

There's no heat map that I know of.

Jane- thinking ahead a bit, are there plans to include a link to "Join Mozilla" within the footer?

    
    

    
  
Thanks All. 

Currently there are no plans to add a graphic for Join Us in the footer. We're going to be adding it in the menu bar drop down under "About" and therefore this would be added in the footer as a text link.

    
    

    
  
Agreed with Laura that we should rethink that footer now, visually.

    
    

    
  
(In reply to comment #6)
> Agreed with Laura that we should rethink that footer now, visually.

John - Shall I work with Mr. Lee Tom on said visual rethinking?

    
    

    
  
Lee is pretty booked, actually. I think silverorange could probably help here if they have the time.

    
    

    
  
We're in the development of the 1.3 milestone which this is slated for, so is the design being worked on? I'll implement it when it's ready.

    
    

    
  
Still no word on this?

    
    

    
  
(In reply to comment #9)
> We're in the development of the 1.3 milestone which this is slated for, so is
> the design being worked on? I'll implement it when it's ready.

Hi James- Since we're basically removing elements I don't think we'll need new design on this after-all. The changes to this part of the footer should include:

1. Remove the Twitter and Facebook icons, as well as the 'Let's Be Friends' icon (won't make as much sense anymore)

2. Keep the 'More ways to connect' link but move it over to where the 'Let's be friends' is now. 

3. Add the open form field to the "Get monthly news" promo on the right. Keep it where it is. 

Let me know if you have any questions!

    
    

    
  
So you want the "get monthly news" to expand into a form on the whats new page? That will create some awkward space in the footer bar.

    
    

    
  
What if we didn't put the drop down in the footer.  What if they fill in their email address and it redirects them to the newsletter page with their email pre-populated.  We'd get more conversions if we did it all on the same page, but I can see the complexity of making the drop down work in the footer.

    
    

    
  
(In reply to comment #13)
> What if we didn't put the drop down in the footer.  What if they fill in their
> email address and it redirects them to the newsletter page with their email
> pre-populated.  We'd get more conversions if we did it all on the same page,
> but I can see the complexity of making the drop down work in the footer.

Interesting idea Winston. I think this is a possible option if having a dropdown in the footer can't work for some reason. We should try to stay consistent with how we treat email signups throughout the site, and since we're using the functional dropdown other places and know it's effective lets try to use it here. 

(In reply to comment #12)
> So you want the "get monthly news" to expand into a form on the whats new page?
> That will create some awkward space in the footer bar.

Yes, that's the idea. Since there's another layer/row of footer content beneath this I can see two approaches possibly working: 

1. Have that whole footer row (that mid-blue layer) expand downward after
button click. This may feel really heavy to the user since most of that real
estate, besides the form fields, that expands downward will have blank content. 

2. Using a self-contained module that expands downwards. It would partially
cover the "About" & "Other Languages" section of the lower footer temporarily
until form submission. That small part of the footer row would extend
downwards, not the whole row like in #1. 

James - Let us know what you think about would work best here. I'm open to other suggestions here if need be, but would ideally like to keep consistency across the site.

    
    

    
  
#2 is nice, and it lets us throw it anywhere on the site without always have to worry about how it affects the design. The only problem is that I need some designs for that. It should probably have a border and look like a block placed on the site (which grows taller). We're basically creating a little widget.

The fallback for user without js will be to just link to the /newsletter page.

    
    

    
  
(In reply to comment #15)
> #2 is nice, and it lets us throw it anywhere on the site without always have to
> worry about how it affects the design. The only problem is that I need some
> designs for that. It should probably have a border and look like a block placed
> on the site (which grows taller). We're basically creating a little widget.
> 
> The fallback for user without js will be to just link to the /newsletter page.

Great, lets proceed that way. 

John - is there a designer we can work with on this?

    
    

    
  
I wonder how it would like to just use the newsletter "block" on this page:

http://www.mozilla.com/en-US/firefox/3.6/whatsnew/

That has a pretty solid look that could fit in a lot of places. We could also use CSS to change the background image to customize it for specific pages.

    
    

    
  
I'd be up for repeating the What's New look & functionality. We know it works, so better to keep up that style than reinvent the wheel.

    
    

    
  
John - James and I chatted about this and he'll still need design guidance for
how to treat the form drop-down when it expands down into the footer.

    
    

    
  
Hey Steven - Can SilverOrange help the visual design piece of this change? Basically we need some sort of container element created to make the drop-down aspect of this interaction look good.

    
  
Depends on: 634306

    
  
Target Milestone: 1.3 → 1.4

    
    

    
  
We can help with this, but are quite swamped with Fx4 page work right now - how soon is this needed?

    
    

    
  
I don't think this is very high priority. I'll go ahead and throw the box found on the whatsnew page into the footer, and we can critique from there, but it can wait.

    
    

    
  
I'm having a hard time abstracting out the block from the whatsnew page because it depends on so much CSS from the whatsnew stylesheet. Getting there though:

http://footer.moz.jlongster.com/en-US/firefox/RC/

    
    

    
  
(In reply to comment #22)
> I don't think this is very high priority. 

It's important for our overall engagement goals, but definitely ranks behind anything essential for the Fx4 launch. Let me know if you have other prioritization questions.

    
  
Target Milestone: 1.4 → 1.5

    
    

    
  
hey all - was just chatting with Jane about this bug.  What's the current status?

    
    

    
  
It's marked as released 1.5, which is the one after the Fx4 launch.

    
    

    
  
When will 1.5 go live?

    
    

    
  
With the Fx4 for mobile release.

    
  
Blocks: 641084

    
  
Target Milestone: 1.5 → 2.0

    
    

    
  
Hey James - Now that Fx4 has launched, mind picking this up again? It'll definitely make a big impact on how many people we'll be able to establish a direct email relationship with, so it would be great to see this go live in this release.

    
    

    
  
ok guys, I finally got around to a working prototype.

r86893, r86894, r86895, r86896, r86897 on trunk

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

This is the point where design should come in a see if it can be improved. I realized while testing the other landing page

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

does not have the footer. Is there a reason for this?

    
    

    
  
(In reply to comment #29)
> Hey James - Now that Fx4 has launched, mind picking this up again? It'll
> definitely make a big impact on how many people we'll be able to establish a
> direct email relationship with, so it would be great to see this go live in
> this release.

We actually mid-aired on my last comment, I kept this page open a while. Should be basically done.

    
    

    
  
(In reply to comment #30)
> http://www-trunk.stage.mozilla.com/en-US/firefox/new/
> 
> does not have the footer. Is there a reason for this?

It was pulled out as part of the page optimization tests we did late last year.
Apparently it was hurting load time on this page.

    
    

    
  
Just a note, I found some CSS clashes now that this is in the footer. It breaks on the newsletter pages because multiple elements us the same ID. This will require some refactoring of the code.

    
    

    
  
done in r86962

    
    

    
  
(In reply to comment #34)
> done in r86962

yikes, wrong bug. that is NOT for this bug.

    
    

    
  
Still need some design input.

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

    
  
Depends on: 648069
No longer depends on: 634306

    
    

    
  
(In reply to comment #36)
> Still need some design input.
> 
> http://www-trunk.stage.mozilla.com/en-US/firefox/fx/

Thanks James. The 'get monthly news' part looks great to me, but the rest of that blue bar feels a little empty. Feels like we need a bit more than just "more ways to connect" over on the left side to balance things out.

Jane, could we put the individual Twitter & Facebook icons there instead? Anything else you'd recommend?

Also, copying Sean in case he has other design feedback.

    
    

    
  
Tara had some design comments as well. 

----

Thanks Winston, perhaps you've thought of this already... but If you're trying
to give more weight to the email section, why not expand that piece into the
now empty space so it's more visible?  Or, move it all the way to the left, and
put "more ways to connect" on the right.  It just feels a little odd the way
the content is placed right now with a big gap in the middle. My 2 cents.  

---- 

I like placing the email opt-in to the left and then keeping "more ways to connect: facebook, twitter" and aligning them to the right.  

John/Jane - do you like this approach?

    
    

    
  
Do you think it'll be more visible on the left? My concerns with that are that the little yeti might crowd the download button on that side, and that the way he's facing sort of works better with him on the right (so he's looking into the page rather than off the screen).

    
    

    
  
Hard to tell without testing / reviewing some heat map data - but my gut was the left was more visible.  But I see your point about yeti.  I'm okay with the facebook/twitter icons on the left if that's the best design solution.

    
    

    
  
Jane, are you ok with this approach? Sounds like James needs feedback soon to beat our code freeze deadline (which is EOD).

    
    

    
  
hey there -- fine to add back in the social call outs. Nice email sign up treatment. thanks!

    
    

    
  
Thanks Jane!  

So our edits are to add back in the twitter / facebook icons on the left hand side.

Also - we noticed a small bug.  If you click the email box open and then try to click off, it won't close.  

James - do you have all the feedback you need from us?  Thanks again.

    
    

    
  
We had hoped to provide some visual design help here, but the Rapid Release project has eaten our time this week.

    
    

    
  
Removed it from the footer in r87111 because it's messing up testing.

    
    

    
  
Ok, so I'm going to add back in the twitter and facebook icons and fix the bugs with the newsletter popup. And then we're done?

    
    

    
  
That'll do it.

    
  
Target Milestone: 2.0 → 2.1

    
  
Target Milestone: 2.1 → 2.2

    
    

    
  
James - any chance this can go live for 2.2? (unit testing architecture stuff should come first, of course)

    
    

    
  
I should be able to fix this on Monday in time for Tuesday's push. There's a chance it might require some refactoring because of CSS clashes, but I suspect it won't be too bad.

    
    

    
  
(In reply to comment #49)
> I should be able to fix this on Monday in time for Tuesday's push. There's a
> chance it might require some refactoring because of CSS clashes, but I suspect
> it won't be too bad.

That's great! Thanks.

    
    

    
  
This turned out to be quite a bit of work, since we have to deal with pages that now have multiple forms. I've fixed up the css/js to work with it but I have to figure out how to handle errors now.

Anyway, still working on it, will take at least a couple hours more work.

    
    

    
  
After a rehaul of the newsletter forms, I have this working.

Everyone:

I need feedback! Please test the form. You can see in the footer. It's best to test it on this page, as it gets quite complicated when there are multiple forms on one page:

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

Raymond:

Please test this thoroughly, I refactored a large bit of code which touches all the newsletter forms! Here are all the pages which are affected. Please test form validation and submission on all the forms on these pages:

http://www-trunk.stage.mozilla.com/en-US/firefox/fx/
http://www-trunk.stage.mozilla.com/en-US/newsletter/
http://www-trunk.stage.mozilla.com/en-US/firefox/3.6/whatsnew/
http://www-trunk.stage.mozilla.com/en-US/firefox/3.6/firstrun/
http://www-trunk.stage.mozilla.com/en-US/newsletter/about_mobile/
http://www-trunk.stage.mozilla.com/en-US/newsletter/about_mozilla/
Keywords: qawanted

    
    

    
  
rehaul was done in r87822 and r87830

    
    

    
  
(In reply to comment #52)
> Everyone:
> 
> I need feedback! Please test the form. You can see in the footer. It's best to
> test it on this page, as it gets quite complicated when there are multiple
> forms on one page:
> 
> http://www-trunk.stage.mozilla.com/en-US/newsletter

That's probably confusing: please test BOTH forms, the main form on the page and the small subscribe form in the bottom right.

    
    

    
  
Thanks James.  This is looking good.

Couple of quick comments.

- we had talked about adding the facebook / twitter icons back in comment 46.
- the movement from the optin box to the confirmation message in the footer seemed jarring.  I'd like to display the opt-in in the same box where they opt-in rather than moving them somewhere else on the page. Is that possible?
- i noticed the footer is broken here - http://www-trunk.stage.mozilla.com/en-US/mobile/ - image attached as well. 
- on the newsletter page - http://www-trunk.stage.mozilla.com/en-US/newsletter/ can we remove the opt-in from the footer and only display our social media icons?  Just want that treatment for this page to avoid confusing the user when opting in. 

I'll continue to test the other pages mentioned in comment 52.
Depends on: 652910
Depends on: 652918

    
    

    
  
James, I found two problems whiles testing. I found some missing css and js errors on one page and some PHP errors on other pages. I filed bug 652910 and bug 652918 for those issues. Another issue I found was that the Facebook and twitter links were missing from the footer
Keywords: qawanted

    
    

    
  
added in the social links in r87839

    
    

    
  
r87840 from bug 652910

    
    

    
  

      
      
      
      

        Attached image
          
        error state
        — 
      

    


  
Thanks James. Overall, it's looking good but I get a weird error message, and the graphics sort of go sideways, when I sign up from the lower right promo. See attached-

    
    

    
  
(In reply to comment #59)
> Created attachment 528422 [details]
> error state
> 
> Thanks James. Overall, it's looking good but I get a weird error message, and
> the graphics sort of go sideways, when I sign up from the lower right promo.
> See attached-

Unfortunately, I forgot about another bug going on which is waiting on action from IT. That warning will go away and the layout will be fine. This bug is now blocking on it.
Target Milestone: 2.2 → 2.3

    
    

    
  
(In reply to comment #55)

Just noticed your comments, Winston.

> - the movement from the optin box to the confirmation message in the footer
> seemed jarring.  I'd like to display the opt-in in the same box where they
> opt-in rather than moving them somewhere else on the page. Is that possible?

What do you mean? The "thank you" message is in the same place as the form.

> - on the newsletter page - http://www-trunk.stage.mozilla.com/en-US/newsletter/
> can we remove the opt-in from the footer and only display our social media
> icons?  Just want that treatment for this page to avoid confusing the user when
> opting in. 

Sure, what about /newsletter/about_mozilla and /newsletter/about_mobile ? I think we should keep it on those pages since it's a different mailing list (and I like header/footer consistency).

    
    

    
  
+1 on mobile page.

Regarding the confirmation message - attaching an image of what I'm seeing.  I think this is a bug.

    
    

    
  
Oh, that was mentioned in comment 59. It will appear in the same place as the form when that warning is gone. Just waiting for IT to fix something on the server.

    
    

    
  
(In reply to comment #63)
> Created attachment 528660 [details]
> Confirmation message placement

Filed bug 652918 for that a couple of days ago

    
    

    
  
Would be great to see this go live in the next 2.3 push as it'll surely give us a big life in email subscribers.
Priority: -- → P2

    
    

    
  
(In reply to comment #69)
> qa-verified-trunk

Thanks Raymond! Just to be sure, did you test submitting both forms on the pages that have 2 forms? That was tricky to do.

    
    

    
  
(In reply to comment #70)
> (In reply to comment #69)
> > qa-verified-trunk
> 
> Thanks Raymond! Just to be sure, did you test submitting both forms on the
> pages that have 2 forms? That was tricky to do.

I did and both forms work
http://www-trunk.stage.mozilla.com/en-US/newsletter/about_mozilla/#subscribe-form
http://www-trunk.stage.mozilla.com/en-US/newsletter/about_mobile/#subscribe-form

    
    

    
  
Thanks Raymond!

This ready to go live today? (my fingers are crossed ;))

    
    

    
  
Yep, rolling out now.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED

    
    

    
  
pushed to stage r88225
pushed to production r88226
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: