Update meta tag content and images on app and cms

[noahmanger]

We need to update the share image and favicons on both the main site and the app, as well as content that shows up when sharing a page on social media.

@emileighoutlaw do you want to take the content on and @jenniferthibault the icons?

The code / copy currently lives here: https://github.com/18F/openFEC-web-app/blob/8373db749a3d8f13baae0774610e5d27e6b44024/templates/partials/meta-tags.html#L2

[noahmanger]

I believe most favicon generators do this already, but make sure to include an iOS homescreen icon per #721

[jenniferthibault]

Yes! I was thinking about this last week. We should also find some way to test this, because I don't think it worked when we designed it and hooked it up for the API.

[leahbannon]

related to https://github.com/18F/openFEC/issues/1216

[jenniferthibault]

@noahmanger helped me break this down into 3 categories that need to be designed, and should feel consistent across platforms:

• Social sharing images & headlines (facebook/twitter) More details on specs here
  • Image
  • Title @emileighoutlaw
  • Description @emileighoutlaw
• Favicon for browser tabs
• "App" images (For when you save or bookmark something to your homescreen)

Social Sharing images

For social sharing images (facebook, twitter) I'm thinking something simple without marketing text, that intros the URL and previews FEC branding, like the following:

Browser favicon

For the browser favicon, I'm thinking we use a simplified version of the seal (without text) so that it can be a little larger and more distinguishable:

For comparison, here's the current one on fec.gov:

App images

For App images, I'm thinking we can shorten the URL, and give a peek of the seal, or drop the seal entirely.

1
2
3

Thoughts? cc @leahbannon / @LindsayYoung

[leahbannon]

For the app, I like the second design. I'm not sure about shortening to a incorrect link, though. How about removing the dot so it's betaFEC? I think that's what we're calling it in the blog post.

[jenniferthibault]

Yessss. Helpful and certainly do-able!

Here are a few alternate favicons I'm kicking around based on the data flag, h/t @leahbannon :

I think the first, on the light background, is the most clear and distinguishable, even at that size

[leahbannon]

I agree that the first one is more distinguishable -- I like that one :)

[noahmanger]

Nice! I like the second app icon. But I think I prefer the simplified seal favicon though. It'll feel more relevant across both parts of the site, and also feels more government-y, albeit subtly.

[jenniferthibault]

Visually I do like the flag/graph favicon, but I think that the simplified seal will tie it to fec.gov more closely. Going to go with that for now, and the second app icon with the text adjusted to betaFEC.

[jenniferthibault]

18F/fec-style#118 put all the images into the FEC style repo

[jenniferthibault]

Moved assignment to Emileigh to wrap up text. Woo!

[noahmanger]

Remove references to "@18F" on twitter meta tags (h/t @konklone )