1054460 - New House Tiles for Directory Page

Status: VERIFIED FIXED

(Firefox :: General, defect)

Description

[Aaron]

Attachment: Final Images.zip

Original request from Marketing:

1.) Firefox for Android

https://www.mozilla.org/firefox/android/

 

2.) Web Maker

https://webmaker.org/      

 

Accounts (URL never provided)

(Getting URL from accounts team and ensuring we can actually link directly to that page from tiles)
 

3.) Alternate to Accounts:

Mozilla Manifesto

https://www.mozilla.org/en-US/about/manifesto/


Assets are attached. Specs are as follows:

1.) LABEL = Firefox for Android

Static State = HouseTile_FX-Android.png @ 50%

Rollover = FX_Android_Logo_142x70.svg on white BG


2.) LABEL = Mozilla

Static State = HouseTile_Our-10-Principles.png @ 50%

Rollover BG = HouseTile_Our-10-Principles_Rollover-BG.png  /  Logo = Mozilla_Logo_160x42.svg


3: LABEL = Webmaker

Static State = HouseTile_Webmaker.png @ 50%

Rollover = Webmaker_Logo_123x125.svg on white BG

IMPORTANT: Webmaker creative still being decided!

Comment 1

[Aaron]

UPDATE:

3: LABEL = Mozilla Webmaker

Comment 2

[Aaron]

Rollover BG = HouseTile_Webmaker_Rollover_BG.png @ 50%  /  Webmaker_Logo_123x125.svg

Comment 3

[Aaron]

Attachment: HouseTile_Webmaker_Rollover_BG.png

Use this image for the rollover background treatment for Webmaker. No change to the logo file.

Comment 4

[Sabrina Ng [:sabrina]]

Webmaker Green: #3fb58e

(from the webmaker style guide: http://mozilla.github.io/makerstrap/demo/#/)

Comment 5

[Aaron]

Thanks Sabrina. A background image has already been provided based on this HEX value.

Comment 6

[Aaron]

To clarify, 50% = 1/2 size, not opacity

Images are 560 x 380 for retina display on mobile (for future use). For desktop, they should display at half that size (50%) at 280 x 190.

Comment 7

[Aaron]

Attachment: House Tiles - Round 2.zip

Visual assets for the following House Tiles:

1.) Mozilla Community
    - HouseTile_Community_BG.png @ 50% size
    - HouseTile_Community_Rollover-BG.png @ 50% size

2.) Customize Firefox
    - HouseTile_Customize_BG.png @ 50 size
    - HouseTile_Customize_Rollver-BG.png @ 50% size

3.) Mozilla Developer Network
    - HouseTile_MDN_BG.png @ 50 size
    - HouseTile_MDN_Rollover-BG.png @ 50 size + MDN_Logo_White_44x39.svg (centered)

4.) Mozilla Festival
    - HouseTile_MozFest_BG.png @ 50 size
    - HouseTile_MozFest_Rollover_BG.png @ 50% size

Comment 8

[Andrea Wood [:andreawood]]

Adding Paul Johnson, the new Marketing Lead for the Foundation. Paul is going to be the single source of info for our tiles - including for things like Webmaker, Mozfest; etc. Aaron can you let us know where you got the Mozfest Tile from? Paul wasn't looped into that one, we're not sure it's a good fit for Tiles. (Pardon us while we get our internal protocols in order.)

Comment 9

[Aaron]

I was asked to produce a tile for Mozilla Fest - but no assets were provided. So I simply hacked together what you see now from the website.

Please advise - if we don't use this tile, we will need a new one ASAP (like, by EOD today).

Comment 10

[Andrea Wood [:andreawood]]

Hi Aaron, who specifically asked you to do a Mozfest Tile? We're trying to sort our own internal process for Tile requests and we were a bit confounded about who actually requested a Mozfest Tile (I know it wasn't me)?

Comment 11

[sbohan]

We needed backfill for Mozilla tiles, I was in the process of inviting folks to pitch a session at MozFest and I (Sean Bohan) requested it.

Comment 12

[Sabrina Ng [:sabrina]]

Attachment: DirectoryTiles_MozillaWebmaker&Advocacy_Mockup.jpg

I have attached a mockup of the Mozilla Webmaker and Mozilla Advocacy tiles that includes flat and original logo designs as well as a photo bg and colour bg rollover options. Paul do you know who I can flag for a design review? 

I can attach the files needed as soon as we know which style we want to go with?

TEXT: 
Webmaker Tile Rollover Text - "We Teach the Web"
Advocacy Tile Rollover Text - "Protect Net Neutrality"

COLOURS:
Webmaker Tile Default - (see HouseTile_Webmaker_Rollover_BG.png) #3fb58e (light green)
Webmaker Tile Rollover - #01527D to #013E5F (navy blue)
Advocacy Tile Default - #F6F4EC to #D7D3C8 (sand)
Advocacy Tile Rollover - #5EBDEA to #0095DD (light blue)

Comment 13

[paulj]

Thanks, Sabrina. 

These look good to me and I prefer the image versions of the rollover. 

Checking with Hannah about design review as I'm not sure if there's anyone that needs to signoff besides she and I. I will let you know.

Comment 14

[paulj]

@Sabrina

Let's go with the flat versions of the logo and photo version of rollover for both Webmaker and Net Neutrality tile. 

If you could go ahead and send over the files Aaron should be able to take them from here. 

Thank you!

Comment 15

[Sabrina Ng [:sabrina]]

Attachment: MozillaDirectoryTiles_WebmakerLogo.svg

Webmaker Flat Logo (svg)

Comment 16

[Sabrina Ng [:sabrina]]

Attachment: MozillaDirectoryTiles_AdvocacyLogo.svg

Advocacy Flat Logo (svg)

Comment 17

[Sabrina Ng [:sabrina]]

Attachment: HouseTiles_Rollover_MozillaWebmakerBG.png

Webmaker Rollover Image (png)

Comment 18

[Sabrina Ng [:sabrina]]

Attachment: HouseTiles_Rollover_MozillaAdvocacyBG.png

Advocacy Rollover Image (png)

Comment 19

[Sabrina Ng [:sabrina]]

Aaron - Let me know if you need anything else for these tiles.

Comment 20

[Aaron]

Sabrina - the files your provided are perfect. One comment - the 2 tiles with a single line of copy do not look visually centered. Is this intentional? Just wanted to check before sending on to dev.

Comment 21

[Sabrina Ng [:sabrina]]

Attachment: HouseTiles_Rollover_MozillaWebmakerBG_centered.png

yes, initially I did place it a bit above centre - I adjusted it so it is in the middle (esp. when it is next to other tiles that have centred elements, I realize now it would look misaligned with the rest) Thanks Aaron for the feedback!

Comment 22

[Aaron]

Bryan/Ed - now that we have the updated image, I APPROVE these tiles. Please proceed with implementation.

Comment 23

[Ed Lee :Mardak]

I believe the advocacy tile is new compared to what's currently delivered to users. What page should it end up showing?

Comment 24

[Andrea Wood [:andreawood]]

Please use this URL for the net neutrality click through:
https://sendto.mozilla.org/page/s/protect-net-neutrality?source=Directory_Tile

Comment 25

[Bryan Clark (DevTools PM) [:clarkbw]]

I'd like to wrap this bug up especially considering the MozFest Tile is expiring this week.  What I understand is next to do is this:

* Launch the Advocacy Tile
* Remove the MozFest Tile
* Update the Webmaker Tile to match the assets in this bug

If that's it we can probably get this done by end of week.

Comment 26

[Aaron]

Attachment: House_Tiles_PSD_Comps.zip

ZIP folder containing the master PSD with all 12 house tiles for translation, as well as jpgs and mocks for reference.

Comment 27

[Ed Lee :Mardak]

(In reply to Aaron from comment #26)
> Created attachment 8510695 [details]
Thanks. The MDN tile there still has a hover/enhanced tile which will cause bug 1087513. Per bug 1069759, it seems like the tile is going to be unenhanced with just "[logo] MDN]" (attachment 8492267 [details]).

Comment 28

[Ed Lee :Mardak]

Attachment: en-US tiles unhovered

Comment 29

[Ed Lee :Mardak]

Attachment: en-US tiles hovered

Comment 30

[Ed Lee :Mardak]

Those tiles for attachment 8516954 [details] and attachment 8516955 [details] are live.

Comment 31

[paulj]

Ed- I'm confused by this. The webmaker tile and the advocacy tile are two distinct tiles. In attachments above it looks as if the webmaker tile ("We teach the web") is rolling over to the Mozilla Advocacy logo. That's not right. 

The "We Teach the Web" graphic (attachment 8484513 [details]) should rollover to the Webmaker logo (attachment 8484511 [details]). 

A second advocacy tile is what we had scoped above originally. That tile would start with "We Protect the Web" (attachment 8484514 [details]) and roll over to Advocacy logo (attachment 8484512 [details]).

Happy to walk through this outside of the bug if it's helpful.

Comment 32

[Ed Lee :Mardak]

I was somewhat confused about that as well (seeing advocacy for webmaker). That's also used across all the translations.

clarkbw, this might just need a swap out of advocacy hovered image to be webmaker? Doesn't look like it should affect localization.

Comment 33

[Ed Lee :Mardak]

Attachment: webmaker hovered

Is this what's expected on webmaker hover?

Comment 34

[paulj]

Yes, that's the correct Webmaker hover. Thx.

Comment 35

[Ed Lee :Mardak]

Attachment: en-US tiles unhovered

Comment 36

[Ed Lee :Mardak]

Attachment: en-US tiles hovered

Comment 37

[Ed Lee :Mardak]

Latest tiles publish fixes up the hovered image, title, and url (to have referral) for all targeted locales.

Comment 38

[Petruta Horea [:phorea], Desktop QA]

Verified as fixed (compared tiles with attachments from comment 36 and 37) using Firefox 33.1 build 3.

Comment 39

[Ed Lee :Mardak]

Attachment: US/en-US

Here's the tiles that went live with 33.1 for US/en-US (advocacy is only shown in US).

Comment 40

[paulj]

Hi Ed-

We have a new tile we'd like to put out for our EOY Fundraising campaign. It will run from now (or whenever we can get it out) until 12/31 when it will need to be removed. 

Should we continue to use this bug or would you like me to create a new one for this campaign?

-Paul