1131216 - Graphics for social sharing of Mozilla.org pages

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[William Reynolds [:williamr]]

This bug is to create 6 graphics that will increase how many people click on social posts and land on Mozilla.org pages.

Note that these graphics will not appear on the page itself - they will be embedded using the og:image meta tag and will only appear on the image preview of social networks (Facebook, Twitter, Google+).

= The pages that will get new og:image graphics =
https://www.mozilla.org/firefox/new/
https://www.mozilla.org/plugincheck/
https://www.mozilla.org/firefox/33.1/whatsnew/?oldversion=33.0.3
https://www.mozilla.org/
https://www.mozilla.org/firefox/all/
https://www.mozilla.org/firefox/os/
https://www.mozilla.org/firefox/developer/

This Google Doc has ideas for each graphic as well as the headline and body text that will accompany it in a social post:

https://docs.google.com/document/d/1co1xOwbok2rQg99SX0ySEsbm_3BtFWgJYvw3sJLgyJA/edit?usp=sharing

Image requirements: 1200 x 630px PNG file

Timing: March 3 is ideal, though we have some flexibility. We want to get this live by the end of March.

Comment 1

[William Reynolds [:williamr]]

This graphics bug blocks updating the meta tags (bug 1131331). Since the bugs to add Sharing buttons do not depend on any graphics, I am removing those as being blocked by this bug.

Comment 2

[mternoway]

Attachment: firefox_check-plugins_march-3-2015_facebook-timeline.png

Comment 3

[mternoway]

Attachment: firefox_choose-independent_march-3-2015_facebook-timeline.png

Comment 4

[mternoway]

Attachment: firefox_download-firefox_march-3-2015_facebook-timeline.png

Comment 5

[mternoway]

Attachment: firefox_download-firefox-in-your-language_march-3-2015_facebook-timeline.png

Comment 6

[mternoway]

Attachment: firefox_firefox-developer-edition_march-3-2015_facebook-timeline.png

Comment 7

[mternoway]

Attachment: mozilla_march-3-2015_facebook-timeline.png

Comment 8

[mternoway]

Hi all, I've posted 6 of 7 social graphics. Hoping to have the 7th finalized and posted today as well. Let me know what you think of the first 6.

Thanks,
MT

Comment 9

[William Reynolds [:williamr]]

(In reply to mternoway from comment #8)
> Hi all, I've posted 6 of 7 social graphics. Hoping to have the 7th finalized
> and posted today as well. Let me know what you think of the first 6.

These look great, MT! I spoke with Michaela and we just have a comment on the Mozilla homepage graphic.

We'd like to see the 'Mozilla' wordmark much more front and center (perhaps twice its current size). The main reason is that the graphics will be scaled down depending on the user's screen size (on mobile the graphic will scale down to about 300 pixels wide), so we want to make sure the Mozilla wordmark is still prominent. Our other thought is to show a little more color on the faces of the people, if possible.

The other 5 graphics are fantastic. Thank you MT!

Comment 10

[mternoway]

Attachment: mozilla_march-3-2015_facebook-timeline.png

Thanks William, I've reworked this post, increased the mozilla wordmark and added some colour photos to the grid. 

MT

Comment 11

[mternoway]

Attachment: firefox_adaptive_march-3-2015_facebook-timeline.png

Following up with the remaining post for Firefox OS - Adaptive Phone. I've made use of some of the newer FxOS branding elements..main one being the outlined phone and new 2.0 screenshot.

Comment 12

[Matej Novak [:matej]]

(In reply to mternoway from comment #11)
> Created attachment 8572665 [details]
> firefox_adaptive_march-3-2015_facebook-timeline.png
> 
> Following up with the remaining post for Firefox OS - Adaptive Phone. I've
> made use of some of the newer FxOS branding elements..main one being the
> outlined phone and new 2.0 screenshot.

I already asked this in another bug, but I'm trying to track down where this screenshot came from. I don't see it in the Box folder of approved screens for 2.0.

Comment 13

[William Reynolds [:williamr]]

Looking really good! One small request on the Firefox OS graphic. Since this graphic will be shared with non-English audiences too, can we remove the text that appears on the phone? Let's keep the Firefox OS wordmark, and remove the strings that say 'Search or enter address', 'Phone', 'Messages', etc.

I noticed the Firefox OS page has the same graphic without the English text:
http://mozilla.org/firefox/os

The reworked graphic for the Mozilla homepage is wonderful. Thanks MT!

Comment 14

[Matej Novak [:matej]]

(In reply to William Reynolds [:williamr] from comment #13)
> Looking really good! One small request on the Firefox OS graphic. Since this
> graphic will be shared with non-English audiences too, can we remove the
> text that appears on the phone? Let's keep the Firefox OS wordmark, and
> remove the strings that say 'Search or enter address', 'Phone', 'Messages',
> etc.
> 
> I noticed the Firefox OS page has the same graphic without the English text:
> http://mozilla.org/firefox/os

That's actually a mistake and is being updated. We need to keep that text on the screenshot.

If we want something without text, we'll have to use a different screen (like the camera app or something like that).

Comment 15

[mternoway]

(In reply to William Reynolds [:williamr] from comment #13)
> Looking really good! One small request on the Firefox OS graphic. Since this
> graphic will be shared with non-English audiences too, can we remove the
> text that appears on the phone? Let's keep the Firefox OS wordmark, and
> remove the strings that say 'Search or enter address', 'Phone', 'Messages',
> etc.
> 
> I noticed the Firefox OS page has the same graphic without the English text:
> http://mozilla.org/firefox/os

> 
> The reworked graphic for the Mozilla homepage is wonderful. Thanks MT!

Unfortunately it won't be easy to remove the English copy for this. We could go with Matej's suggestion and use a screen grab from the camera app.

Comment 16

[William Reynolds [:williamr]]

(In reply to mternoway from comment #15)
> Unfortunately it won't be easy to remove the English copy for this. We could
> go with Matej's suggestion and use a screen grab from the camera app.

That might work well. Could you share a screen grab to give an idea of what that looks like?

Comment 17

[mternoway]

Attachment: firefox_adaptive_march-3-2015_facebook-timeline.png

William - I've updated based on Matej's screen recommendation. I've also had to make a change to the fox pose...the other one wasn't working with this screen. 

MT

Comment 18

[William Reynolds [:williamr]]

(In reply to mternoway from comment #17)
> William - I've updated based on Matej's screen recommendation. I've also had
> to make a change to the fox pose...the other one wasn't working with this
> screen. 

This graphic looks great. 

Marking this bug as resolved. Thanks MT and Matej!