1082648 - [Firefox 10th] Thunderclap Snippet GIF

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Lizz Noonan - she/her (:lizzn)]

>>Project/Request Title:
[Firefox 10th] Thunderclap Snippet GIF

>>Project Overview:
A GIF to accompany the Thunderclap snippet. MJ will write the copy and provide design direction, but the GIF will be the fox wrapping around the world (a version of the video animation). 

>> Creative Help Needed:
Copy:    Yes 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
MJ, please provide the GIF specs. I am only aware of the static icon specs for snippets. 

>>CTA and Design:
See above. 

>>Creative Due Date:
2014-10-27

>>Launch Date:
2014-11-01

>>Mozilla Goal:
Firefox Browser

>>Points of Contact:
[e-mail], [e-mail], [e-mail], [e-mail], [e-mail]

Comment 1

[Lizz Noonan - she/her (:lizzn)]

MJ, please provide the GIF specs. I am only aware of the static icon specs for snippets. Please also confirm that the due date is in line with your timeline - if not, I will change accordingly. Thanks!

Comment 2

[M.J. Kelly]

Hi Lizz, 

Snippet specs are:

Large animated gif 447 x 184
Small icon 40 x 50 png 

All needs to total under 200KB

Comment 3

[Fabio Rios [:frios]]

Hello all, 

This one is going live November 1st which is coming up very quickly. Not many comments in here, has there been conversation outside of the bug? I can't seem to find any docs detailing the gif creative. If it already exists can you please share here?

Comment 4

[Lizz Noonan - she/her (:lizzn)]

Matt is working on it now and we'll have it for review in Friday's creative meeting if not before, so there will be time for review before Monday's due date. Since this request came in much later than the other snippet requests, it was only assigned to Matt on Friday - but he's on it. 

To my knowledge, there is no documentation beyond slide 5 in this deck: https://docs.google.com/a/mozilla.com/presentation/d/19k7Sx76M0APXA1yITR8lVvcidbi7udUZ4-vX4c6YZVU/edit#slide=id.g406ed9eb7_057

There has been no more specific creative direction from MJ or Michaela on this snippet other than what is in my original comment, so if you have something more specific you'd like to see, please let us know as soon as possible! Otherwise, Matt will make a GIF using the fox tail animation, as planned.

Comment 5

[MT]

Attachment: Firefox10th_snippet_447x184_onScreen

Hi guys, I am wondering if both the larger and smaller snippet are to appear on a page at the same time, or will be they be mixed with other snippets?  For the larger snippet I have gone with the obvious route to include the 10th Anniversary graphic as the standalone graphic.  I am giving the smaller snippet some more thought as it looks a bit odd to have a similar graphic appear on a smaller scale directly below the larger one.

Comment 6

[MT]

Also wondering if there is copy ready for the smaller snippet. Currently the copy is a placeholder.

Thanks,
MT

Comment 7

[Fabio Rios [:frios]]

Hey MT, thanks for sending the graphic! Yes, we will have a smaller snippet running with the graphic. The copy is ready, and there are multiple messages that will be rotated in and out, I've included them below. 

I will provide some guidance on the icon (small snippet graphic) shortly.

Messages for Thunderclap snippet.

1. Firefox is fiercely independent. We don’t accept the status quo. Kind of like you! Sign up to show your support for online independence.

2. Click here to sign up and post a message to your social network in honor of our 10th anniversary later this month!

3. On November 10, Firefox is celebrating 10 years by stoking the embers of online independence. Sign up to fuel the fire.

4. Help us create some thunder online on our 10th anniversary later this month. Here’s how.

Comment 8

[MT]

Attachment: Firefox10th_snippet_onScreen.jpg

Thanks, I've updated with the appropriate copy. I will give the smaller snippet some more thought..

Comment 9

[MT]

Attachment: Firefox10th_snippet_onScreen.jpg

Hi guys, based on some of the feedback in the latest creative review, I've updated the smaller snippet to reflect a similar look found in other 10th Anniversary creative. I would also like to include an alternate version for the larger snippet.  Will attach shortly.

Thanks,
Matt

Comment 10

[MT]

Attachment: Firefox10th_snippet_onScreen_v2.jpg

As mentioned I've created an alternate version for the larger snippet...not sure how possible this is from the dev side of things, but thought a larger version of the other offered some more impact on screen. 
 
Thanks,
MT

Comment 11

[Fabio Rios [:frios]]

Thanks MT. I'm a fan of these, particularly the larger one you've included. I'll have confirmation today on whether we can go with the larger one. If so, we can close this one out!

Comment 12

[MT]

Attachment: Firefox10th_snippet_large_2x.png

Thanks, if the larger one is a go ahead, I've attached both a .png and .gif version at 2x. 

MT

Comment 13

[MT]

Attachment: Firefox10th_snippet_large_2x.gif

Comment 14

[Osmose [:osmose, :mkelly]]

Attachment: Final image for use in snippet

I made a snippet template that removes the gap between the logo and the snippet, so we can use the larger version. For reference, I'm attaching the resized, optimized version of the image we're using (snippets doesn't yet support using PNGs at 2x for Retina screens, so I resized it down before running it through ImageOptim).

Comment 15

[MT]

Attachment: Firefox10th_snippet_small_40x50px.png

Hi guys, I've attached a .png version of the smaller snippet at 2x.

Comment 16

[Fabio Rios [:frios]]

(In reply to MT from comment #15)
> Created attachment 8515088 [details]
> Firefox10th_snippet_small_40x50px.png
> 
> Hi guys, I've attached a .png version of the smaller snippet at 2x.

Hey MT, can you attach non retina version? Mike says we can't yet support...

Comment 17

[MT]

Attachment: Firefox10th_snippet_small_40x50px.png

Comment 18

[MT]

Attachment: Firefox10th_snippet_small_40x50px.svg

svg version as well. Although would need to be optimized quite a bit.

Comment 19

[Fabio Rios [:frios]]

(In reply to Michael Kelly [:mkelly,:Osmose] from comment #14)
> Created attachment 8513878 [details]
> Final image for use in snippet
> 
> I made a snippet template that removes the gap between the logo and the
> snippet, so we can use the larger version. For reference, I'm attaching the
> resized, optimized version of the image we're using (snippets doesn't yet
> support using PNGs at 2x for Retina screens, so I resized it down before
> running it through ImageOptim).

Mike, viewing the preview, I'm still seeing the gap and the image looks pretty small? Can you confirm it will look OK on live tomorrow? 

https://snippets.mozilla.com/show/4623/

Comment 20

[Osmose [:osmose, :mkelly]]

(In reply to frios from comment #19)
> (In reply to Michael Kelly [:mkelly,:Osmose] from comment #14)
> > Created attachment 8513878 [details]
> > Final image for use in snippet
> > 
> > I made a snippet template that removes the gap between the logo and the
> > snippet, so we can use the larger version. For reference, I'm attaching the
> > resized, optimized version of the image we're using (snippets doesn't yet
> > support using PNGs at 2x for Retina screens, so I resized it down before
> > running it through ImageOptim).
> 
> Mike, viewing the preview, I'm still seeing the gap and the image looks
> pretty small? Can you confirm it will look OK on live tomorrow? 
> 
> https://snippets.mozilla.com/show/4623/

The logo change templates require you to specify the width and height of the image that's replacing the logo so it can size it properly. If none is provided, it defaults to 192x192.

I've updated the snippet you linked to have the proper width and height; the preview now shows up properly for me. You'll have to update the other snippets with the right width and height as well.

Comment 21

[Fabio Rios [:frios]]

Thanks Mike, I've updated the others and all looks good now. 

We are ready for go live tomorrow!