855533 - [Newsletter] Re-design Firefox & You Newsletter Template

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jessilyn Davis]

Attachment: April 2013 sample newsletter

The new template Ty designed for Student Reps (Bug 846518) is absolutely beautiful - and perfectly designed to be mobile responsive code! \o/

Can he make one for Firefox & You pretty please?

Ideally, we'd like to have it in place by May 1st in preparation for our new FirefoxOS communications (we should have mobile responsive newsletters with all of our emphasis on mobile this year).

Please let me know if this is doable.


I'm attaching our current template HTML for a look at the elements of the design. 

Things I'd like to be sure are upgraded/included in the redesign:

- "Firefox & You" should be hard-coded text w/ web friendly font - not an image.
 
- Prominent images & links to download Firefox for Android and Firefox for Desktop
 
- Prettier/shorter help & plugins section that has less words and updated graphics


Thanks team! I'm really excited and hopeful! :D

Jess

Comment 1

[Tara (musingt)]

Thanks Jess, can you please let me know what the handoff date would be if May 1st is your launch date?

Comment 2

[Jessilyn Davis]

April 24th please :)

Comment 3

[John Slater]

Assigning to Matt.

Comment 4

[Jessilyn Davis]

Hey MT! 

Just wanted to check in - are we on track for a final version by next Wednesday the 24th?

Thanks!

Comment 5

[MT]

Hi Jessilyn,

This is currently in the works! I am hoping to have something by later today or tomorrow to show.

MT

Comment 6

[MT]

Attachment: Firefox&You_Newsletter_Redesign_Apr2013

Hi Jessilyn,

I've attached a first round of the Firefox & You template update.  This is closely based off of what Ty had established.  There are two specific areas I want to confirm with you. One being the 'share' previously it was FB and Twitter share, but I see this is now a direct link to the Den? I have designed it with FB and Twitter in mind...you will see that it sits in the footer of most modules, but this could easily be replaced with the 'via @Firefox' link. 

And Two being the request to make a Firefox for Android and Desktop download more prominent. I have not yet included this, but am wondering if it is something that could placed in the 'The Firefox Way' top module?

Also, I envision the new top banner space area where it currently reads 'We're back' on the chalk board, as the new intro graphic...this would vary from issue to issue.

Please let me know what you think of this direction.

Thanks,
Matt

Comment 7

[Jessilyn Davis]

Hey Matt!

This first round looks pretty good! I'm really excited to see a cleaner/fresh look for this email template :D

To answer your questions:

* The share links:
This works differently in email than it does on the web - in email it's a static image with a link I hand-code to share rather than an integrated widget. I like the separate box with the call-out to share, but we'll need different images for facebook and twitter. Maybe play with these images?

Facebook: http://image.e.mozilla.org/lib/fe9915707361037e75/m/1/facebook_icon.png
Twitter: http://image.e.mozilla.org/lib/fe9915707361037e75/m/1/twitterbird.png

* For the Firefox for Desktop and Android links:
I think you're right it could/should be baked into the top module. If you take a look at this month's newsletter: http://htmlpad.org/4-2013-firefoxAndYou-EN/  You'll see that instead of the sidebar being about "In this issue" - it's more for helpful links to download Firefox for Android, Check your plugins, etc.  Can you try playing with this idea?

I'd also like to see something with a Firefox for Android download button beside/in the same module as the "Firefox health check"


Other suggestions/edits/ideas:

1) Can you move "Need help?" section to replace the "Any questions?" module?
2) Take out "Keep apprised of Mozilla News" from the "Connect with us" section
3) Take out tips images
4) Try spelling out the month completely?
5) "Firefox & You" should not be an image when we put it into code. Can you try playing with some browser/email inbox safe fonts?
6) Take out the "We're back" image at the top (We're trying to limit the number of images we use in the newsletter each month to keep the size down in people's inboxes and make it easier to load around the world on slower connections)
7) Move the "In this issue" sidebar to the right hand side and replace with quick links and a new title...maybe "Helpful links"?


Thanks Matt! I look forward to seeing the next round! This is very exciting. :)

Jess

Comment 8

[MT]

Hi Jess, 

Made some changes to the newsletter based on your feedback. Starting with my earlier questions. I have revised the shared call out with the same icons that Ty used in the 'Connect with us' module...I thought for consistency it made sense to stick with these.

For the Firefox Desktop and Android links, I have included them as the first options under 'Helpful Links' I thought this would give them prominence in the top half of the newsletter.

I've also added another button for downloading Firefox for Android in the 'Firefox Health check' section...basically stuck to the norm of the green download buttons.


As for the other suggestions
1. Replaced the 'Any Questions' with 'Need help?' module
2. Removed 'Keep apprised'
3. Removed tips images
4. Option of full month spelling
5. New version using Arial black and Georgia fonts
6. Removed main header image
7. Moved 'In this issue' to right side and renamed 'Helpful links' along with a list of helpful links, including downloading Firefox for desktop and Android.

Let me know what you think of the latest changes,

MT

Comment 9

[John Slater]

Thanks Matt! Seems like you and Jess are working through the details very closely, so I won't add too much, but I do have a couple of quick observations:

- any reason why we don't have an actual Firefox logo in the header area? I realize it might require some reworking of things to make it clear that "Firefox & You" isn't a product the way Firefox OS is, for example, but it would be nice to have that image right up at the top if possible.

- about the fonts, the section headers look like Gil Sans (please correct me if I'm wrong, of course). Any reason why we're not using Open Sans instead? 

Thanks!

Comment 10

[MT]

Attachment: Firefox&You_Newsletter_Redesign_Apr2013

Comment 11

[MT]

Hi John,

With regards to the logo...I have no real reason for not using it in this space. I was following the existing one which doesn't make use of one...possibly to have a reduced amount of images because of overall size?  But I don't see it altering much of the header layout if we decide to go with it.  

As for the font being used, it is Gill Sans...but again I am not sure why other than I was working from the original template Ty had created.  Maybe we are restricted to just the basic web fonts for email purposes? Again, it would be an easy swap to replace with Open Sans if we are able to go that route.

Matt

Comment 12

[Jessilyn Davis]

Attachment: Browser safe fonts

Re: Fonts:
With email you have to use browser/email client safe fonts. See attached PDF of a list of most common fonts. Open Sans is a custom font that requires custom loading of the font file which we don't send with the email.

Exact Target recommends:
arial, arial black, arial narrow, comic sans MS, courier New, Georgia, Impact, Tahoma, Times New Roman, Verdana

We can definitely use font families - but it's best to make sure the design looks good no matter the fall-back font.

Comment 13

[Jessilyn Davis]

Matt - thanks for making those edits! It seems there's a lot of extra/wasted space in the header area (with the title, Mozilla image, date etc.) as well as in the "Firefox health check" sections.

Can you play with some combos to cut out the not-used space and still keep it clean/pretty?

I'm down for adding a Firefox Logo somewhere in the header if you can make it fit/look good.

Comment 14

[John Slater]

Duly noted on the fonts, thanks Jess. 

Matt, if you think you can make the Fx logo work in the header, I'd love to at least give it a try and see how it looks.

Comment 15

[MT]

Attachment: Firefox&You_Newsletter_Redesign_Apr2013

Comment 16

[MT]

Hi Jess and John, I have tightened up some of the extra wasted space and have added a Firefox logo next to the word mark. Let me know what you think!

MT

Comment 17

[John Slater]

+1!

Comment 18

[Jessilyn Davis]

Hey MT!

My apologies on the delay. I think this latest version looks great from the intro module down (the download buttons and plugin section look great!) - the top part still needs a little tweaking.

Thoughts:
1) Now the content looks a little crowded and the spacing is a bit off (I know it's a delicate balance given my last comments that there was too much space)
2) The logo looks like it's centered for "Firefox & You" and not with the tagline too. It looks a little off.
3) It's weird that the "&" is bigger than the logo
4) I love the blue & orange coloring of "Firefox & You"
5) "Firefox" and "You" look a little too bold/blocky/hard lined (especially in comparison with the "mozilla" tab image above it). I know we can't use Open Sans that's on the website, but is there a way to play with browser safe fonts and styling that can make it look a little more complimentary?
6) It looks weird to me that "April" and "2013" are 2 different fonts


Do you mind putting together a few different options for the top title section to play with sizing, spacing, etc.?

Thanks again for all your hard work on this, MT. Let me know if you have any questions or ideas you'd like to play with.

Hope you're well!
Jess

Comment 19

[Jessilyn Davis]

Aaaand we're good!

https://www.dropbox.com/s/35xad7z1v472gu4/Firefox%26You_Newsletter_Redesign_Apr2013.psd


Thank you Ty and MT! Happy weekend all! :D