Twitter header image to support MWC 2013

RESOLVED FIXED

Status

RESOLVED FIXED
6 years ago
6 years ago

People

(Reporter: ccollins, Assigned: ltom)

Tracking

Details

Attachments

(14 attachments)

(Reporter)

Description

6 years ago
Greetings!

Mary had a thought about branding our channels for MWC, and a side conversation has taken place with Pete and John S.

So we'd like to update our Twitter header graphics for MWC.

http://www.cypressnorth.com/blog/social-media/guide-to-the-new-twitter-header-image-specifications-tips-templates/

This is the best site I know for specs and info and inspiration.

My recommendation is that since MWC is a focus on MOBILE that we need to make the Twitter header section use the branding (and incorporate the avatar if we can.)

There are three design assets to consider

You can see how our page looks now:
https://twitter.com/firefox

1) Background image:
2) Header image (which is what people see on their mobile devices)
3) Avatar (which is embedded within the header section.

For the background image
QUESTION: Do we leave this the Firefox logo (since it is a consumer channel)

90% of visitors see first 78 px of the background 	
67% see 204 px 		
43% see 247 px 	
21% see 284 px 	

Original image size cannot exceed 1252×626 pixels (with a max file size of 5MB). Twitter does not specify a minimum size, but anything smaller than 640 pixels wide will likely look bad.

For the Header image 

I would recommend, that since the focus is mobile for MWC, that you make this area fit your mobile message (on the Twitter page right now, we only use a background color.)

The display size of the Twitter header image is 520px x 260px
Maximum file size of 5MB

For the Avatar
It would be super cool if we could incorporate the Avatar into the design somehow (see the site above for examples and how-tos) 

We would switch out the graphics on Feb. 25 for the start of MWC. Therefore the due date for the final graphic would be Feb. 21. Can we get a draft graphic for discussion by Feb. 19?

Comment 1

6 years ago
id make sure firefox logo remains visible.
(Reporter)

Comment 2

6 years ago
Thinking out loud here

Maybe it's the blue background with the tail swish that's on http://www.mozilla.org/en-US/firefox/partners/ with the Firefox logo still the avatar.

But that's just something to get us started.

Comment 3

6 years ago
Lee, this is due on 2/21, first creative review on 2/19 (see comment #0 for deets).
Assignee: tshahian → ltom

Updated

6 years ago
Status: NEW → ASSIGNED
(Assignee)

Comment 4

6 years ago
Created attachment 715702 [details]
twitter header image 01
(Assignee)

Comment 5

6 years ago
Created attachment 715706 [details]
twitter header image 02

attaching 2 mockups here - let me know what you think. 
both integrate flames behind our logo/avatar - is our avatar being used in other places? if so, I think we may need to keep it clear behind the logo, so we don't have just a little chop of flame where ever else our avatar is used. thanks! L

Comment 6

6 years ago
I like the idea behind that, but yes, the avatar shows up on its own any time we tweet from @firefox so keeping that part of the background clean is probably best.
(Assignee)

Comment 7

6 years ago
Created attachment 715728 [details]
twitter header image 03

OK, let's go with something like this then

Comment 8

6 years ago
+1
(Assignee)

Comment 9

6 years ago
Created attachment 715734 [details]
twitter header jpg -  520x260

header background 520x260 px
(Assignee)

Comment 10

6 years ago
Created attachment 715735 [details]
twitter firefox avatar - 81x81 px

firefox avatar - 81x81 px

Comment 11

6 years ago
Thanks, guys.  Is there anything we can do to make this a little more exciting/radical?  The thinking was to do something wild during MWC.. maybe incorporating Firefox OS branding?  This is so similar to what we currently have, I’m not sure I’d notice the change if I were a casual follower.
(Assignee)

Comment 12

6 years ago
Hey Winston, I know what you mean... however, that background IS incorporating the branding FFxOS branding elements. I also think that we need to be careful not to over-clutter this section if we want the bit of copy below the avatar to be legible - the entire page IMO is quite noisy due to the overall FFx background plus the Twitter UI and content. To me, opening up the header image is going to command attention bc it's the only open space on the page.

Comment 13

6 years ago
Could we change the overall background instead of (or in addition to) the header image?

Comment 14

6 years ago
That's what i was thinking.  The header image is def the most important piece because the background doesn't show up on mobile devices... but if we could make the background more subtle and find a way to highlight a device in the header image, I think that'd work.  Ultimately, we'd like people to automatically understand the connection to mobile when they see the change.
(Assignee)

Comment 15

6 years ago
OK, based on the above - I'll create a new overall background image to something more subtle (still anchored by the FFx logo in top left) and try to get more FFxOS branding (+device?) in the header graphic. Stay tuned...
(Assignee)

Comment 16

6 years ago
Created attachment 715884 [details]
twitter header image

Hi Winston, 
Here are the few assets we finished up today with: 

- Header image that contains a more dynamic fox illustration to grab attention on mobile devices. We thought leaving out the marketing copy would still be effective in piquing users interest, but leading them directly down to the tweets

- Revised background image creates a more calm and elegant page to interact with. Also compliments and sets up the header graphic to be prominent, instead of competing for attention. *please use #00539f as background color, and do not tile the background image. The graphic to background should look seamless

- Avatar has blue background only (no cropped illustration artifacts) so it can be used in multiple places
(Assignee)

Comment 17

6 years ago
Created attachment 715886 [details]
twitter background image - 01

Revised Twitter page background image (no tile)

Please use #00539f as background color to match edge of graphic.
(Assignee)

Comment 18

6 years ago
No change to avatar 81x81 px - See comment #10
(Reporter)

Comment 19

6 years ago
Hi all,

I took a screenshot of what this looks like, attached.

1) the avatar is appearing blurry. Not sure why

2) I can't get the text to get a hard break in it like the @Firefox account, even so, the text will overlap the graphic. Most experts recommend that the design part of the header not overlap the text, because it makes the text hard to read. Even with the hard break, the head and tail are going to overlap the text.

Can we make the fox and tail smaller, and move it up so that it doesn't move into the text field?

Or move up just the head part of the fox? The tail is enough of a solid color to still read the text on it.

3) This is just my opinion, and you guys are the designers here, but I feel like the logo background and the unleashed fox in the header still really compete for attention a lot. (If the idea here is to make the header image the focal point)
(Reporter)

Comment 20

6 years ago
Created attachment 716031 [details]
twitter screenshot

Comment 21

6 years ago
Lee, can you investigate?

Comment 22

6 years ago
Thanks, Lee.  Carmen - good point on number 3.
(Assignee)

Comment 23

6 years ago
Created attachment 716131 [details]
twitter background - blue / blank

Carmen, Here are some of those background images we talked about trying: 

- blue / blank (no logo), just for MWC
- blue (toned-back logo)
(Assignee)

Comment 24

6 years ago
Created attachment 716133 [details]
twitter background - blue (toned-back)
(Reporter)

Comment 25

6 years ago
Thanks Lee,

Attaching screenshots of the new background. Also removing all text except the blog url to see how that looks.
(Reporter)

Comment 26

6 years ago
Created attachment 716143 [details]
screenshot subtle background
(Reporter)

Comment 27

6 years ago
Created attachment 716144 [details]
blank background screenshot
(Reporter)

Updated

6 years ago
Attachment #716143 - Attachment description: subtle background → screenshot subtle background
(Reporter)

Comment 28

6 years ago
So you can all see things on the live site - like how the header image and avatar are "blurry" (Lee and I are working on that.) Right now, the blue blank background is live.

https://twitter.com/Ffxtest
(Reporter)

Comment 29

6 years ago
fwiw - I like the background with the subtle header. But the blank one is fine, too
(Assignee)

Comment 30

6 years ago
John, is there any brand issue using this blue toned-back version of our logo background? Comment #26

Comment 31

6 years ago
(In reply to Lee Tom from comment #30)
> John, is there any brand issue using this blue toned-back version of our
> logo background? Comment #26

I would prefer not to do it.

Comment 32

6 years ago
Lee,

Awesome looking header image! 

For the compression issues now that it is live (It's very artifacty and blurry) the original image should be 1252×626, not 520×260. They make the smaller size (for non-retina desktop) by scaling down the larger image on the fly. If a 520px image is uploaded as the original, they rescale up to 1252px on upload and it causes the blurry/compression issues.

1252×626 should be the default original header size to upload, if we want to update this.

Thanks!

Comment 33

6 years ago
Thanks, Sean.  

Lee - any chance we could update this today?
(Assignee)

Comment 34

6 years ago
Created attachment 718494 [details]
twitter header image - 1252x626

Hi Carmen, Here's the up-scaled Twitter header to use for our page. Hopefully, we can avoid the distortion with this. 

Thanks Sean!

L
(Reporter)

Comment 35

6 years ago
Comment on attachment 718494 [details]
twitter header image - 1252x626

Thanks Lee

This image has the logo in the center. That's a separate file. Can we get one without the logo?
(Assignee)

Comment 36

6 years ago
Created attachment 718500 [details]
twitter header image - 1252x626  - redeux!

whoops! here you go.

Updated

6 years ago
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.