Closed Bug 795976 Opened 12 years ago Closed 11 years ago

Create new buttons

Categories

(www.mozilla.org :: General, defect, P1)

defect

Tracking

(Not tracked)

RESOLVED FIXED
Future

People

(Reporter: matej, Assigned: tyronflanagan)

References

(Blocks 1 open bug)

Details

(Whiteboard: u=user c=ux p=2)

Attachments

(6 files)

We should update our buttons on the style guide and on our sites.

Reference: http://mozilla.seanmartell.com/nothingtoseehere/guide-3_0005_6.jpg

(There may be some other variants as well. Sean will add them once we've figured them out.)
+1 

Would be great if we could get this done soon. Steven, what's the prognosis?
This is a bit of a blocker to bug 791061 - which I was hoping to roll out prior to the Engagement offsite on the 15th. Is this week possible?
Depends on: 791061
Whiteboard: u=user c=ux p=2
Target Milestone: --- → Future
Assigning over to Steven. bug#791061 is almost ready to go. 

John, what's the timing here? Are we targeting to make these change in time for the offsite?
Assignee: nobody → steven
Hey Mike. Thanks for checking in. Upon further review, we actually need to make a few more design revisions, so we're not ready to start coding these.

Also, the issue in bug 791061 has been cleared up (and no longer depends on these buttons), so having this resolved by next week is no longer critical.

Will post the final button designs here when we have them.
Ty will be creating the final button designs, so am adding him here. 

Using http://mozilla.seanmartell.com/nothingtoseehere/guide-3_0005_6.jpg as a starting point, here's what we need:

Desktop
- big button with Firefox logo on it - example in the above mockup is a good starting point, but it needs to call out Free Download prominently (see http://www.mozilla.org/en-US/firefox/new/ for reference)
- big button with no logo - same notes as above, just without the logo
- little button with Firefox logo on it - also needs to call out Free Download (ex. http://www.mozilla.org/en-US/firefox/features/)
- little button with no logo on it - same notes as above, just without the logo

Mobile
- big button with Firefox logo on it - example in the current mockup is a good starting point, but we need to add the word "Free" in there…perhaps "Free at Google Play" (Matej, please confirm the wording)
- big button with no logo on it (http://www.mozilla.org/en-US/firefox/fx/ is a good starting point)
- little button with Firefox logo (adding free messaging)
- little button without Firefox logo (same changes)


Ty, let us know when you think these will be ready...thanks!
For mobile we've been using "Get it free from Google Play." You can see it in use on a new button here: http://www.youtube.com/firefox (though the desktop button there is a one-off since we couldn't detect the user's OS).
Please note that using an italic font in the buttons will require pages to include the italic variant of the Open Sans web font, which will pull in another 60Kb or so. We can certainly do this, but if you're on the fence about the italics, know that there is a performance side-effect.
There's probably a good reason for this, but why can't the buttons be images vs. having live text on them? Or could they be a combination? So "Firefox" would be live, but "for Android" would be part of the image.
Having the buttons as images would also increase the file size. Let's try doing without the italics as a starting point and see how that looks.

For what it's worth, our current buttons - ex. http://www.mozilla.org/en-US/firefox/new/ - don't have italics and seem fine to me.

(Steven, thanks for flagging.)
(In reply to Matej Novak [:matej] from comment #8)
> There's probably a good reason for this, but why can't the buttons be images
> vs. having live text on them? Or could they be a combination? So "Firefox"
> would be live, but "for Android" would be part of the image.

We try to ensure that the download buttons display immediately upon page load, so the green background and key text are immediately visible while the download button logos and any other images/resources on the page load.
I ran these buttons (see attached mockup) by Pascal for l10n issues and he brought up a few points:

1. Short locale codes ("EN-US") are kind of robotic - could we use actual language titles like "English (US)" or is that too much extra text?

2. The "Get it on Google Play" string can be quite long in some languages. German, for example: "Kostenlos aus dem Google Play Store" This probably won't work in the right-aligned text position.
I believe we'll need to work with L10N to get new strings as that "Get it on Google Play" is our standard. As mentioned in the style guide, it doesn't always have to be direct translations.

As for the language titles, that'd take up more space so I'll have to know what the longest would be and work from that to adjust the design if that's the route we want to take.
By removing the word "download" and indicating it with a arrow (in some version) is fine for sighted users, but for screenreader users it's not clear what this link leads to. As an example, the link text for Mac OSX is. "Firefox for Mac OSX, EN (US)" that could easily be mistaken for a link to a page that describes Firefox for Mac OSX. 

It's a easy fix though, just add a non-visual element <span>Download </span> before "Firefox for Mac OSX."
I'll second comment 13 from a SEO point of view. I think a lot of people search for "download firefox".
Yeah, it's a bit confusing (apologies) but the mockup in comment #11 isn't quite right. In addition to needing to keep the word download as mentioned in the previous comments, we also need to keep the word free...tests have shown over & over that it really makes a difference when we make that clear.

My notes in comment #5 still seem accurate when it comes to the content direction for this. I think we should update the buttons with the Sandstone-y visual tweaks, but we need to follow those guidelines.
Another note, we need a declination of those buttons for Aurora.
Blocks: 808570
No longer blocks: 808570
Blocks: 808570
I believe this is blocking the implementation of the non en-US Social API download pages (Bug 808570). 

That said, any estimate on when this bug will be complete?
Blocks: 814079
Im working on download buttons today through tomorrow. Will share them tomorrow folks :)
If you ever need more details or have specific questions, feel free to jump in #www to ask pascalc or me (if we're around).
Thanks Ty and Rik for the updates. 

Process Questions:

1. So then is this a creative bug, or a implementation bug? It's currently assigned to Steven, not Ty so I'm a bit confused. 

2. I see this bug marked as "Future." Pending the designs being delivered to WebDev, what's the estimated "live" date of these new buttons?  

3. Who "owns" this project? I'm not sure who would be best to answer these questions. 

Okay, that's all the project management I'll sprinkle into this bug for now. As you can tell I'm trying to get clarity around when this bug will ultimately go live, so that we can have a better sense into when our global Social API campaign is able to launch. 

Any insight into that would be great.
Thanks Laura. It's a little confusing, but right now the ball is in Ty's court. I've reassigned the bug to him to reflect that.

Also to be clear, the plan is for Ty to update the Sandstone button designs to include the content details called out in comment #5. Then it's over to webdev to implement (but I can't answer your other questions beyond that, though).
Assignee: steven → tyronflanagan
I intend to work on the HTML/CSS/images implementation with Anthony when the design updates are confirmed.
OK - thanks for more clarity.
Quite the balancing act this :P

Here is the design for the updated buttons based on the requests and feedback.
I have tried to keep it light on copy and tried to keep them easier for L10N to modify. Kept with using only Open Sans (Regular) and got rid of any wordmarks or use of a second font face (i.e Georgia).
Here is the updated button on the /firefox/new page
Thanks Ty! These look good to me. As discussed with Jennifer, we'll want to test different versions soon to figure out the best possible combination but this does a nice job of bringing the current elements into a more Sandstoney look.

Any other comments before we wrap up the design here?
Hi,

Here are the string changes with l10n impact:

The screenshot use 'Free download' with a lowercase d, we currently have 'Free Download' with an uppercase D, is the lowercasing intentional?

The "What’s New" link is now called "Notes", can we use "What's New" or "Release Notes" that we already have translated and not a new term?

Same with "Free from the Google Play Store" which was changed to "Get it Free from Google Play".

Ideally, "Systems & languages" would be one of the variants we already have translated on the PHP site:
All Systems & Languages
Other Systems and Languages
Other Platforms & Languages

Also, I see that there is no OS indicated in the button, we no longer want to expose that information?

Overall, if we can't reuse existing strings, I would need the full list of final strings soon so as to launch the translation of those in our 80+ languages.

Thanks
(In reply to Pascal Chevrel:pascalc from comment #27)
> Hi,
> 
> Here are the string changes with l10n impact:
> 
> The screenshot use 'Free download' with a lowercase d, we currently have
> 'Free Download' with an uppercase D, is the lowercasing intentional?

Yes, that was an intentional on my part. On the whole, we're trying to use a lot less capitalization of things like headers and titles in Sandstone.

> The "What’s New" link is now called "Notes", can we use "What's New" or
> "Release Notes" that we already have translated and not a new term?

Not sure about this change, but I'm guessing we're trying to keep everything as short as possible. I'd prefer "Notes," but "What's New" also works for me.

Ty, can you comment on this as well?

> Same with "Free from the Google Play Store" which was changed to "Get it
> Free from Google Play".

I definitely want to keep this new wording, which we'll be using as our standardized line for download buttons pointing to Google Play.

> Ideally, "Systems & languages" would be one of the variants we already have
> translated on the PHP site:
> All Systems & Languages
> Other Systems and Languages
> Other Platforms & Languages

The current buttons already use "Systems & languages" (here, for example: http://www.mozilla.org/en-US/firefox/new/) so there's no change here. Do we not have that localized? Again, it's an issue of length. Let's keep it like this if we can.

> Also, I see that there is no OS indicated in the button, we no longer want
> to expose that information?

That's another question for Ty (or John).

> Overall, if we can't reuse existing strings, I would need the full list of
> final strings soon so as to launch the translation of those in our 80+
> languages.
> 
> Thanks
> > The "What’s New" link is now called "Notes", can we use "What's New" or
> > "Release Notes" that we already have translated and not a new term?
> 
> Not sure about this change, but I'm guessing we're trying to keep everything
> as short as possible. I'd prefer "Notes," but "What's New" also works for me.
> 
> Ty, can you comment on this as well?

I went with "Notes" instead of "What's new" to keep each link short. Will this change translate poorly though? 

-----

> > Also, I see that there is no OS indicated in the button, we no longer want
> > to expose that information?
> 
> That's another question for Ty (or John).

Was trying to avoid having too many elements on the button itself. We already include OS detection, which I feel its something we no longer need to expose on the button.
What's the next step here?
(In reply to John Slater from comment #30)
> What's the next step here?

I had been waiting on Rik's before getting into this, but I'm going to start working on implementation now.

So far we have the following button variations:
 size (large/small)
 icon (with/without firefox icon)
 platform (desktop/android)

I think we also need to address the channel (release, Beta, Aurora). There's also Nightly, but I don't think our buttons actually address nightly downloads, so we might be able to ignore that for now.

Ty, can you address the release/beta/aurora variations?
Priority: -- → P1
Rik, are you done with this or should we get pmac/mkelly to pick up the python side of things? I've been working on the CSS/images, but can only go so far there.
I wrote up some of the basic requirements for the download buttons. I think we can simplify the templates quite a bit: https://etherpad.mozilla.org/download-buttons
I won't be able to work on this given the level of coordination that it requires. Sorry.
Thanks for letting us know, Rik. 

Steven, do you need another WebDev-er to help here?
Ty and John - Do we have final art for the buttons?  If not, when do you expect to have design complete?  Thanks!
Ty, can you update?
I've been working on the assumption that the attached design is final (though it's not too late for changes).

I'm attaching the PSD version here too.

When this is confirmed as final, we should post the PSD to the assets.mozillalabs.com site and keep it updated there.

With Rik on another team now (fare thee well, Rik!), pmac is taking on the coding portions of implementing these. We can either close out this bug and open a new bug for implementation, or reassign this to pmac.
Blocks: 820937
I created an implementation bug#820937 to simplify things and assigned to pmac.
Buttons are done currently being implemented.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Attached image screenshot
The button looks a bit broken on production in Firefox, Chrome, Safari. The Firefox logo is not well positioned see attachment
I agree Raymond - the one on the homepage doesn't look quite right.
Yeah, image caching issues. I'll update the CSS with some cache-busting suffixes.
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/60c168a540d829fbec0d1345789b1b6683f6ef4d
Bug 795976 - change image URLs to force the CDN to refresh

https://github.com/mozilla/bedrock/commit/a60c18ecb7b42fe5f52aa473b116562d4f9081f5
Merge pull request #672 from craigcook/bug-795976-new-buttons

Bug 795976 - change image URLs to force the CDN to refresh
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: